Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (56 sloc) 2.62 KB

Grunt project starter with cssnext


You need git, bower, npm installed

$ git clone
$ cd cssnext-grunt-boilerplate
$ rm -rf .git
$ npm run install-all (or `npm install` and `bower install`)
$ npm start

Check out cssnext website for more information:

Check out PostCSS website too:

You may also want ot chek out how to use these tools:


  • Assemble (with handlebars templates)
  • cssnext
  • PostCSS
  • Autoprefixer
  • cssmin
  • uglify
  • concat
  • jshint
  • imagemin
  • server with BrowserSync

There is a templates folder with .hbs files. You should use these files to compile your .html files in the root app folder. You can use layouts, partials and even handlebars helpers. for more information about Assemble go to: grunt-assemble readme.

How to work with it

You need to have a basic knowledge about PostCSS and Handlebars templates, also Front Matter.

You can work in app/postcss, app/templates folders. With .hbs and special PostCSS .css files. There will be .html and app/css/*.css files created automatically. You can run server with BrowserSync by npm start. It will host the files from app folder (dev version). After you are ready you can run npm run build. It will prepare your files and copy them to dist folder. If you want to run server with BrowserSync from dist folder run npm run server-dist.

You can find some examples in app/postcss and app/templates folders.


Build and watch http://localhost:3000 with BrowserSync (ui on port 3001) from 'app' folder:

$ npm start

Publish 'dist' folder (included tasks: 'assemble', 'postcss', 'clean:dist', 'validate-js', 'useminPrepare', 'copy:dist', 'newer:imagemin', 'concat', 'cssmin', 'uglify', 'usemin'):

$ npm run build

Watch http://localhost:3002 with BrowserSync (ui on port 3003) only preview ('dist' folder):

$ npm run server-dist

Other 'public' tasks which you can use separately in any moment

..for validating javascript (also in default 'grunt' task):

$ npm run lint-js