How to edit and customize HTML5 UP template in a simple way?

– Dalibor Mesarić

I wanted to quickly get up and running with one of the free pre-made web site templates. HTML5 UP is a collection of amazing free templates, but I also wanted to customize styling a bit. Here is how to achieve that.

To get started, visit HTMP5 UP and download one of the templates. I chose the one called Identity. Once it is downloaded, extract it in a folder. Open the newly created folder with Visual Studio Code.

The issue was that styling for those templates is done using Sass, but there is no tooling included with the downloaded files to generate the css files.

I installed the Live Sass Compiler extension in order to get the Sass compilation working without having to configure any command line tooling.

Live Sass Compiler requires some configuration in Visual Studio Code settings. You want to modify your workspace settings that will live together with the project in .vscode/settings.json. I added the following in my settings

1
2
3
4
5
6
7
8
9
10
11
12
"liveSassCompile.settings.formats":[
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    }
],
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
]

As a final fix for the compilation error, I had to change line 6 in main.scss from

1
@import 'fontawesome-all.min.css';

to

1
@import url('fontawesome-all.min.css');

As a bonus for using Live Sass Compiler, you get a Live Reload extension as well. At the bottom of Visual Studio Code, in the Status Bar, you will see two buttons. Watch Sass will trigger css generation after you save any Sass files, and Go Live will start a web server for your page.

Now you are able to modify the Sass files and see the changes immediately!

To take screenshots I use LightShot