How to customize DXA theme - Step 2 Edit HTML,update CMS and create HTML-design package

In my previous blog, we have launched the default HTML-Design which come up the DXA framework.Today we are going to make some changes in the design, will see how we can create the update HTML-Design package and finally CMS level changes and then publish those changes.

Modifying the design
As we know DXA framework build using Bootstrap, we can customize it by changing the standard Bootstrap variables in .\system\assets\less\_variables.less, and then rebuild with Grunt.

Let's make some changes. what I did is I have changed the default language selector Dropdown into Dropdown with filter functionality by modifying the design by changing the contents of the .\src\ folder.

Modified HTML

Next step is to create the package for updated HTML-Design and for that we need to run the following command:

grunt package

Create 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.

Package

Now, we need to update the raw assets for that we need to make changes in HTML design component and to access that navigate Building Blocks/Modules/Core/Admin Folder.Upload the latest and updated HTML-Design.zip there save and close the component and now we need to publish the Publish HTML Design page.

So, we finally updated the HTML-Design, created the package and upload in the CMS. Similarly we can change the branding of our site like change font, background color etc. to this we need to modify the HTML Design Configuration component navigate to the Building Blocks/Settings/Core/Site Manager/ Folder and here we can configure the HTML Design, Build Files, Version Number, Favicon, Bootstrap Configuration this will need to be done for each microsite that you want to style following the locale.

HTML Design Configuration 

Happy coding and keep sharing

How to customize DXA theme - Step 1 Launch default HTML design

DXA is build using responsive design HTML5 and Bootstrap.It gives us the flexibility to change the design as per requirement.

Let's start with spinning the already existing HTML-design but before that, we need to install prerequisites.

1. Install Node.js
2. Instsll npm,grunt and bower.
• npm install -g npm@3
• npm install -g grunt-cli
• npm install -g bower.

Install npm

Install Gurnt-cli

Install Bower

Once you have done with installations run below command to check node and npm version.

I already have the latest version of Node.js and npm install on my machine.Now let's build the assets we need to copy the content of .\html\desgin from the installation media to any location and run the 

1. npm install
2. brower install 
3. grunt build

What this will do, this will build all the assets and can found in the ./dist folder.

Let's run the site locally and for that we need to run grunt command.

grunt serve

Grunt serve

A web server will be started at http://localhost:9000.

Whitelabel HTML Design

For next step on how to edit HTML, create HTML-Design package and update CMS.

Happy coding and keep sharing!!!