David Ensinger davidensinger

Front End Developer

davidensinger / Gruntfile.js

Last active August 29, 2015 14:09

Grunt Task Configuration for SVG in CSS Backgrounds

	// 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

	<!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

	// 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

	'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

	{
	"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 March 20, 2025 09:04

Adding Open Graph Tags to Jekyll

	<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 / summary-twitter-card-in-jekyll.html

Last active October 18, 2024 08:13

Support for the Summary Twitter Card in Jekyll

	<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

	/*
	* 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) {