Build the HTML Design

Overview

Building the HTML Design is a good way to explore the raw assets and understand how they are compiled/merged and minified. You will also see how you could customize and extend the CSS and JS.

The HTML Design comes with a Grunt Gruntfile.js which defines the build tasks. Bower is used to manage some of the included libraries. Grunt and Bower run on Node.js, so the first steps are to setup Node, Grunt and Bower on your development machine:

First time setup

1. Install GIT (this is required by Bower)
2. Install Node.js
3. Install Grunt and Bower globally from the command prompt:

npm install -g grunt-cli
npm install -g bower

Building the assets

Now you are ready to compile the HTML design. Copy the contents of .\html\design\ from the installation media, and open a command prompt in the root of the folder. You should then run the following commands:

npm install
bower install
grunt build
					

The compiled assets (HTML, CSS, JS) will now be found in the dist folder

Running locally

You can also use Grunt to run the site locally, by changing the last command to:

grunt serve

A web server will be started on http://localhost:9000 and when you modify any of the source assets, they will be automatically rebuilt and the browser refreshed.