https://github.com/markcarrrr/grunt-all-the-things

https://github.com/markcarrrr/grunt-all-the-things

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/markcarrrr/grunt-all-the-things
• Owner: markcarrrr
• Created: 2014-11-05T08:15:33.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-01-08T10:51:00.000Z (over 11 years ago)
• Last Synced: 2025-01-06T15:19:00.399Z (over 1 year ago)
• Language: CSS
• Size: 980 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# grunt-all-the-things

-- 

##Grunt Tasks

### Grunt Modernizr

grunt-modernizr will crawl your project for Modernizr test references and save out a minified, uglified, customized version using only the tests you've used in your JavaScript or (S)CSS.  

Grunt task: grunt modernizr  

NOTE: If you comment out Modernzir specific tests in CSS or JS the Grunt Task will output as though the test is being used e.g.



	// .svg { foo: bar; }  

	.opacity { foo: bar; }



Both .svg and .opacity in the above example would be included in the Modernizr Grunt build so commented out Modernizr tests need to be removed before build or simply don't comment out Modernizr tests. Just to reiterate this applies to both JS and (S)CSS.

References



	
GIT

	
grunt-modernizr



---

###SVG sprite with PNG fallback

Grunt plugin to create SVG sprites with PNG fallback and (S)CSS file with image reference, sizes and coordinates. Images will be optimised as part of the grunt task also.  

			

Grunt task: grunt sprite  

			

NOTE: SVGs must be created at the correct size so the SVG and PNG are identical to match the (S)CSS coordinates output.  

			

####Naming convention:

The CSS naming convention is simply based on the filename e.g. naming a file icon--twitter.svg will result in the classname icon--twitter

			

####CAVEATS:



	
For hover effects include the hover state as a SVG and manually apply the CSS or use CSS opacity, possibliy use background-color depending on the how the icon is applied



####References



	
GIT

	
grunt-dr-svg-sprites