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.

Third-party software prerequisites and first time setup

The following third-party software is needed to compile the HTML design:

  • GIT—distributed version control system; required for Bower.
  • Node.js v4 (LTS)—used to run the process which builds the HTML design assets.
  • npm v3 —a Node Package Manager used for the publishing of Node.js projects.
  • Grunt—a JavaScript task runner which runs the tasks which build the HTML design assets. The HTML design comes with a Gruntfile.js file to define the build tasks.
  • Bower—a package manager which is used to manage the libraries used in the HTML design.

Install the software as follows:

  1. Install GIT and Node.js following the instructions for those applications.
  2. From a command prompt, install npm v3, Grunt, and Bower globally using 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.