sGrid / Grunt Boilerplate

Usage with Grunt

sGrid Grunt If you want to work with Grunt you need to check out this repo: https://github.com/juliancwirko/s-grid-grunt

This is a ready to use Grunt project scaffold. All you need is npm and bower installed.

You will have a clean project scaffold with Autoprefixer included and working. When you clone the repo just run 'grunt' task and the server with live reload should start on 127.0.0.1:9000. All your changes will reload your website.

There will be two folders 'app' and 'dist'. You should work in the 'app' folder and then build the project into the 'dist' folder. In the 'app' folder there are such subfolders like 'styl', 'js', 'images', 'css' (compiled from styl files) and also .html files (compiled from .hbs files).

You can build your project by running 'grunt publish’. It will prepare your CSS and js files and it will compress and concatenate them. Also you should work on .hbs files in the 'templates' folder. These are Handlebars templates and there is a grunt-assemble task which will compile it to .html files. This is cool because you can use template layouts, partials and even helpers. This website is build like that so you can go and see the source code on GitHub. Also I encourage you to read about Assemble templating system.

If you want to use sGrid with Grunt just run:

$ git clone https://github.com/juliancwirko/s-grid-grunt.git
$ cd s-grid-grunt
$ rm -rf .git
$ npm install
$ bower install
$ grunt

 

Do You want a better example? Go and see the sourcecode of this website: sGrid Website GitHub

For more detailed grid documentation see here: Grid