David Ensinger davidensinger
davidensinger
/ Gruntfile.js
Last active
August 29, 2015 14:09
Grunt Task Configuration for SVG in CSS Backgrounds
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // clean the generated icons directory that’s used with grunticon | |
| clean: { | |
| icons: ['<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>static/icons/dist/'] | |
| }, | |
| // minify SVGs | |
| svgmin: { | |
| options: { | |
| plugins: [ | |
| { | |
| removeViewBox: false |
davidensinger
/ fallback-for-svginline.html
Created
November 6, 2014 21:09
Fallback for Inline SVG in HTML5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Fallback for Inline SVG in HTML5</title> | |
| <style type="text/css"> | |
| .my-image { | |
| background: url('my-image.jpg'); | |
| width: 100px; | |
| height: 100px; | |
| } |
davidensinger
/ fallback-for-svgasimg.scss
Last active
August 29, 2015 14:08
Fallback for SVG in CSS Backgrounds
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // here we assume support for SVG | |
| .my-background-class { | |
| background-image: url('my-icon.svg'); | |
| // but if there’s no support, we use the PNG | |
| .no-svgasimg & { | |
| background-image: url('my-icon.png'); | |
| } | |
| } |
davidensinger
/ Gruntfile.js
Last active
August 29, 2015 14:08
Example Gruntfile.js for Five Good Reasons to Use Grunt for Front End CQ Development
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| module.exports = function (grunt) { | |
| // Show elapsed time after tasks run | |
| require('time-grunt')(grunt); | |
| // Load all Grunt tasks | |
| require('load-grunt-tasks')(grunt); |
davidensinger
/ package.json
Last active
August 29, 2015 14:08
Example package.json for Five Good Reasons to Use Grunt for Front End CQ Development
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "example-package-json", | |
| "private": true, | |
| "version": "0.1.0", | |
| "description": "An example package.json for Five Good Reasons to Use Grunt for Front End CQ Development", | |
| "devDependencies": { | |
| "grunt": "^0.4.5", | |
| "grunt-autoprefixer": "^1.0.1", | |
| "grunt-concurrent": "^1.0.0", | |
| "grunt-contrib-clean": "^0.6.0", |
davidensinger
/ adding-open-graph-tags-to-jekyll.html
Last active
October 28, 2023 16:26
Adding Open Graph Tags to Jekyll
davidensinger
/ summary-twitter-card-in-jekyll.html
Last active
June 13, 2016 12:03
Support for the Summary Twitter Card in Jekyll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <meta name="twitter:card" content="summary"> | |
| <meta name="twitter:site" content="@site_username"> | |
| <meta name="twitter:creator" content="@creator_username"> | |
| {% if page.title %} | |
| <meta name="twitter:title" content="{{ page.title }}"> | |
| {% else %} | |
| <meta name="twitter:title" content="{{ site.title }}"> | |
| {% endif %} | |
| {% if page.url %} | |
| <meta name="twitter:url" content="{{ site.url }}{{ page.url }}"> |
davidensinger
/ rem-mixin.scss
Last active
January 31, 2019 17:51
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * a small mixin for easy use of rem with px as fallback | |
| * usage: @include x-rem(font-size, 14px) | |
| * usage: @include x-rem(marign, 0 12px 2 1.2) | |
| * usage: @include x-rem(padding, 1.5 24px) | |
| * | |
| * thanks to Eric Meyer for https://github.com/ericam/susy | |
| * and Hans Christian Reinl for http://drublic.de/blog/rem-fallback-sass-less/ | |
| */ | |
| @mixin x-rem($property, $values) { |