Set up of a PostCSS workflow to ensure I can do all the fallbacks and functionality I use frequently from Sass and Compass.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
css
dist/css/maps
fonts
icons/svg
js
.gitignore
Gruntfile.js
LICENSE
README.md
font-packs.json
index.htm
package.json

README.md

PostCSS, JS and Grunticon Build Workflow Boilerplate

Setup of a PostCSS workflow with SVG icons, color opacity, autoprefixer (and more) that has all the functionality and fallbacks I use frequently from Sass and Compass to accomodate an IE8 project. That's right, IE8.

Setup & Install

  1. I used node and grunt and installed each plugin one at a time. You'll have to do the same and your needs will certainly vary from mine.
  2. https://nodejs.org/download/
  3. http://gruntjs.com/getting-started
  4. https://github.com/nDmitry/grunt-postcss

Dependencies

  1. npm
  2. grunt
  3. grunt-postcss
  4. grunticon
  5. Plugin names can be found in package.json and the Gruntfile.js

Installation

After a ton of troubleshooting, I finally got it to just about where I believe I can use this on a production project with all the necessary fallbacks for IE8 - and all the future proofing I could think of. Now it is here for you to use as a reference and starting point.

What PostCSS and other plugins I'm using

//-------------------------------
CSS Build
require('postcss-font-magician')({ hosted: '../fonts'}), // Font face builder
require('postcss-import')(),                    // Partials imports
require('postcss-simple-vars')(),               // Variables, a must
require('pixrem')(),                            // User rem measurements and it writes fallback/current/future compliant sizes
require('postcss-color-function')(),            // Replicates sass's lighten() and darken() plus more
require('postcss-color-rgba-fallback')(),       // For IE8
require('postcss-simple-extend')(),             // sass extend
require('postcss-nested')(),                    // sass nesting style
require('postcss-merge-rules')(),               // Duplicate selector styles are combined
require('autoprefixer-core')('last 1 version'), // Kinda awesome
require('postcss-discard-comments')({removeAll: true}), // Remove comments
require('cssnano')()                            // Minify

//-------------------------------
JS Build
"grunt-contrib-concat": "^0.5.1",   // Put them all together now
"grunt-contrib-jshint": "^0.11.2",  // Learn better coding practices
"grunt-contrib-uglify": "^0.9.1",   // Compress and rebuild

//-------------------------------
Grunticon Build
http://www.grunticon.com/
http://pixelbuddha.net/ballicons2/index.html
To test I downloaded the Ballicons package, deleted everything 
but the svg's and put them in a unique directory to insure they 
were being built from scratch.

//-------------------------------
Server
grunt-serve
serve: {
        options: {
            port: 9000,
            output: 'index.htm'
      },
    }

Demo

The "css/*.css" files have some comments and CSS rules that trigger the different plugins.