Go from sketch to wireframe to prototype with this front-end development and design kit by generating static HTML pages from dynamic templates and partials, and modular CSS structure using SASS, allowing you to keep everything organised the way you need it to be.

We’re not designing pages, we’re designing systems of components

— Stephen Hay

Enable the building and demonstration of tangible products and reduce describing and documenting them, by facilitating "in-browser design" ("deciding in the browser") using:

• A modular/atomic system of reusable components/patterns
• Flexible tools – opt-in over opt-out

All features are optional, if you don't want to use one just comment it out in the appropriate tasks/task-name.js file. Everything is highly configurable and automated with Grunt.

• Modular templating and partial/includes system (Handlebars) – Assemble
• CSS pre-processing – SASS
• Livereload your designs instantly after saving on multiple devices (without a browser plugin)
• SVG conversion to PNG and Base64 encoded CSS for fallback - Grunticon
• Package/asset management (jQuery, modernizr, etc.) - Bower
• Minification of JS and CSS
• Image optimisation
• Rule based linting of JS, CSS and HTML
• HTML beautification according to rules you set – Prettify
• Growl notifications

The Sass/CSS adheres somewhat closely to the following guidelines (needs cleanup):

• Idiomatic CSS
• CSS Wizardry CSS guidleines
• Sass Style Guide

NOTE: This will eventually all be handled by a script (optional).

If you are unfamiliar with terms like homebrew, npm, ruby and bundler or are having difficulty with the instructions below, read the full install instructions.

If you already have node installed, read on.

gem install sass compass bundler

npm install -g grunt grunt-cli bower

npm install && bower install && bundle install

growlnotify

NOTE: Need to elaborate on this

A lot of the variables are defined in Gruntfile.js and also in package.json.

Source files are in the src directory and the static/flat output is output to the build directory.

Start a server with livereload and edit your HTML (.hbs), SASS or js files from the src and have the changes update in the browser without refreshing.

grunt serve

After you have changed any of the source files, generate new files in the build directory by running the following command:

grunt build

Assemble docs

Most page and directory relatred settings are in tasks/options/assemble.js.

• generator-style-prototype
• grunt-frontend-workflow

• https://twitter.com/msheedy
• http://www.michaelsheedy.com/
• http://www.myplanet.io/

Matt Bailey's bones generator and his blog posts on using Grunt – the seed that started this project.