Customization

How to edit and customize your theme.

There are two ways to customize the theme. The easier method is using CSS and the more advanced is customizing SCSS.

CSS overrides

Using the compiled files from the dist folder is the simplest way to get started with the theme.

Create a custom.css file in the assets/css folder and reference it after the theme.css in the <head> of your pages.

    
        <link rel="stylesheet" href="assets/css/theme.css">
        <link rel="stylesheet" href="assets/css/custom.css">
    

Then simply add your CSS rules in the custom.css file to override the theme styles.

Customizing SCSS

If you’re comfortable with using build tools and are familiar with SCSS syntax, this is the recommended option.

In the assets/scss folder you'll see two files:

  • _user-vars.scss for custom variables.
  • _user.css to add your styles.

When you edit and compile these files they will extend and override the theme's styles with your custom ones.

Remove unused CSS

One advantage of using the build tools is that once your files are ready for production, you can remove all unused CSS running the following command:

gulp uncss

The purgecss plugin analyzes the HTML and JS files and removes unused CSS. The CSS file size will be reduced and your website performance will improve.