owzzz/html5_bootstrap

A Comprehensive HTML5 Bootstrap Project

HTML5 Bootstrap

####Introduction

Setting up Grunt tooling at the start of projects can be tedious and time consuming. After doing it for the millionth time I decided to create a base HTML5 bootstrap to roll projects.

Features

• Auto Prefixer
• SASS Compilation
• Bower
• JS Browserify
• JS Uglify
• Source Maps
• Newer
• Responsive Images
• Image Minification
• HTML Minification
• Watch / Live reload
• Jasmine
• Istanbul Code Coverage
• PhantomJS
• Assemble
• YUIDocs

Libraries

• Normalize
• Modernizr

Requirements

Make sure your have the following installed with these versions or greater when running the bootstrap

• Node v0.10.26

Installation

There are several hoops you may have to jump through to get all dependencies installed, but hopefully alot of this stuff will be on your machine anyway.

Installing Ruby dependencies

First we need to install bundler

gem install bundler

Then we need to get the rest of our ruby dependencies (Sass, Neat Bourbon)

bundle install

Installing Tooling dependencies (Grunt tasks)

npm install

Image optimisation dependencies

To run optimisations over images we use GraphicsMagick, to install we need to use brew. If your on mac and do not have brew installed you'll need to go ahead and get that setup.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

If your on windows you will need to download the binary and install it manually on your machine. You can get the binary here.

Now we can install GraphicsMagick

brew install GraphicsMagick

Running Tests

To run tests we need PhantomJS and jasmine

Jasmine will come installed as part of the npm install task. PhantomJS, will need to be installed using brew, see previous step to install Brew if you don't already have it.

brew install phantomjs

Starting grunt

We have five targets we can run dev, dist, server, and docs.

dev is pretty optimised but gives you source maps and does not optimise images as much as dist. The dist target is highly optimised and is production ready. Use this when building to a production server. Spinning up a simple http server you'll use the server target. It comes with live reload turned on. The final target docs produces a one time hit of the yui docs and places it in the dist folder. this same task will also run as part of the dist task mentioned previously.

The tasks are pretty self explanatory, but for the purpose of this documentation I've listed them below:

Development target

grunt dev

Production target

grunt dist

Server target

grunt server

Docs target

grunt docs

FAQ

Road Map

A list of upcoming features for consideration.

• Sonar Integration
• Custom Yeoman Generator (AngularJS or HTML5)

Change log

Recent Updates to repo

• Swapped out Browserify-shim for napa (17/05/2014)
• Removed Neat and Bourbon (13/05/2014)
• Added Travis Build File (28/04/2014)
• Added Istanbul Code Coverage (28/04/2014)