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:
- Install GIT and Node.js following the instructions for those applications.
- 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.
- 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.