Building the HTML design

Building the HTML design is a good way to explore the raw assets and understand how they are compiled/merged and minified. It also allows you to see how you could customize and extend the CSS and JavaScript.

The HTML design comes with a Gruntfile.js which defines the build tasks. Bower is used to manage some of the included libraries.

First time setup

  1. Install GIT (prerequisite for Bower).
  2. Install Node.js v4 (LTS).
  3. Install npm v3, Grunt and Bower globally using the command prompt. Run the following commands:
    npm install -g npm@3
    npm install -g grunt-cli
    npm install -g bower

Building the assets

Now you are ready to compile the HTML design.

  1. Copy the contents of .\html\design\ from the installation media to a selected folder.
  2. From the root of that folder, run the following commands:
    npm install
    bower install
    grunt build
The compiled assets (HTML, CSS, JavaScript and fonts) can found in the .\dist\ folder.

Running your site locally

To use Grunt to run the site locally, run the following command:
grunt serve
A web server will be started on http://localhost:9000. When you modify any of the source assets they will be automatically rebuilt and the browser will be refreshed.

Modifying the design

The design uses Bootrstap, which in turn uses Less to manage the CSS. This can be customized by, for instance, adding or changing standard Bootstrap variables in .\system\assets\less\_variables.less, and then rebuilding with Grunt.

After modifying the design by changing the contents of the .\src\ folder, run the following command:
grunt package
The html-design-{yyyy-mm-dd}.zip file in the .\zip\ folder is created. You can upload this .ZIP file in the CMS and republish the HTML design.