Clone the boilerplate module into your own module
sh clone.sh {{project-name}} - where {{project-name}} is the name of the target project. - Note: on windows, the sh command is usually ran from cygwin.
Create and setup the database
Create an empty database (most people use phpmyadmin...)
Setup the database in www/config/config.json
Setup configuration
Setup the proper URL in in www/config/config.php
Setup languages and project name, if necessary, in www/config/config.json
Initialize Charcoal
Make sure the Charcoal core is installed - Using SVN, this is normally done with a svn:externals property in www/
Setup a local admin user - Visit http://{{project-url}}/admin to start the admin user creation wizard.

Install the node modules / grunt

Get the latest node modules
npm install -g npm-check-updates
npm-check-updates -u
npm install
Run grunt and start coding

grunt

SCSS

Import order

Settings: Global variables, site-wide settings, config switches, etc.
Tools: Site-wide mixins and functions.
Generic: Low-specificity, far-reaching rulesets (e.g. resets).
Base: Unclassed HTML elements (e.g. a {}, blockquote {}, address {}).
Objects: Objects, abstractions, and design patterns (e.g. .media {}).
Components: Discrete, complete chunks of UI (e.g. .carousel {}).
Trumps: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .hidden {}).

From ITCSS

Grid

We are using a simple inline-block grid system.

Usage

Insert a grid block and add grid__item elements inside it. No rows that contain floats, no twelve columns system; just the number of items you want, with the classes names you want, inside a single block.

Include the grid mixins in your components classes.
Create custom width grid items by including the grid__item mixin and adding the widths you need or just include the helpers mixins with fractions like names.
Add media queries, on the helpers mixins or on your custom components to change the grid items widths, for your content, on different screen sizes.

Demo