Skip to content

Instantly share code, notes, and snippets.

Avatar

David Ensinger davidensinger

52 followers · 0 following
View GitHub Profile
@davidensinger
davidensinger / Gruntfile.js
Last active August 29, 2015 14:09
Grunt Task Configuration for SVG in CSS Backgrounds
View Gruntfile.js
// 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
davidensinger / fallback-for-svginline.html
Created November 6, 2014 21:09
Fallback for Inline SVG in HTML5
View fallback-for-svginline.html
<!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
davidensinger / fallback-for-svgasimg.scss
Last active August 29, 2015 14:08
Fallback for SVG in CSS Backgrounds
View fallback-for-svgasimg.scss
// 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
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
View Gruntfile.js
'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
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
View package.json
{
"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
davidensinger / adding-open-graph-tags-to-jekyll.html
Last active February 14, 2023 05:09
Adding Open Graph Tags to Jekyll
View adding-open-graph-tags-to-jekyll.html
<meta content="{{ site.title }}" property="og:site_name">
{% if page.title %}
<meta content="{{ page.title }}" property="og:title">
{% else %}
<meta content="{{ site.title }}" property="og:title">
{% endif %}
{% if page.title %}
<meta content="article" property="og:type">
{% else %}
<meta content="website" property="og:type">
@davidensinger
davidensinger / summary-twitter-card-in-jekyll.html
Last active June 13, 2016 12:03
Support for the Summary Twitter Card in Jekyll
View summary-twitter-card-in-jekyll.html
<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
davidensinger / rem-mixin.scss
Last active January 31, 2019 17:51
View rem-mixin.scss
/*
* 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) {