donut

Using the grunt-dr-svg-sprites GruntJS plugin and a custom Handlebars template (below) I was able to get the basic functionality that Compass provides for PNG sprites but for SVGs.

Note that the below template is not generalized and will not work for all dr-svg-sprites configurations. It works for my setup and would probably be a good base for others.

I've included the relevant portions of my Gruntfile as well.

donut

This is a test.

• test
• test

donut

<?php
/**
 * @file
 * Date forms and form themes and validation.
 *
 * All code used in form editing and processing is in this file,
 * included only during form editing.
 */

/**

donut

// Adapted from [mbilalsiddique1]'s comment on this gist:
// https://gist.github.com/alanhogan/2878758
//
// Note that sprites are ordered for first by file size (ascendingly) and then
// by name.
// https://github.com/chriseppstein/compass/issues/690#issuecomment-3729204

@import "compass/utilities/sprites"
@import "compass/css3/background-size"

donut

<p>this is a test</p>

donut

<?php
 /**
 * Retrieves hipsteripsum for use as dummy text.
 *
 * Source: http://hipsterjesus.com/
 *
 * @return string
 * @author Donovan Mueller
 **/
function beer_me($paragraph_count, $character_limit)

donut

/** A "scroll to" plugin.
    Scrolls to the first element in the jQuery object or to the passed 
    position.
    @author Donovan Mueller (zotobi@gmail.com)
    @url https://gist.github.com/1885908
    ------------------------------------------------------------------------ */
;(function donutScrollPlugin($) {
   var viewport = ($.browser.opera) ? 'html' : 'html, body'
                  // Opera jumps to the top when 'html,body' is used.

donut

<?php
/**
 * Fixes URLs to asset files.
 *
 * If SITE_URL is left blank then WordPress will assume that the SITE_URL is
 * the current URL which causes problems when the current URL is not the root
 * page. So, instead of linking to
 * /wp-content/themes/themename/js/main.js it would link to
 * /some-page-name/a-child-page/wp-content/themes/themename/js/main.js which
 * breaks things. This attemps to fix this.

donut

/**
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
* Author: Drew Diller
* Email: drew.diller@gmail.com
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
* Version: 0.0.8a
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
*
* Example usage:
* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector

donut

/* The code below should be included in a separate file using IE conditional comments 
   as it causes errors in IE8(+?) */

/**
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
* Author: Drew Diller
* Email: drew.diller@gmail.com
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
* Version: 0.0.8a
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license