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
- Install GIT (prerequisite for Bower).
- Install Node.js v4 (LTS).
- 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.
- Copy the contents of .\html\design\ from the installation media to a selected folder.
- From the root of that folder, run the following commands:
npm install bower install grunt build
Running your site locally
grunt serveA 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.
grunt packageThe 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.