Customization

SASS

The recommended way to make edits and additions to the theme CSS is to use the provided user-variables.scss and user.scss files located in the sass/custom folder.

This is the preferred method as your changes are kept separate from the core theme files. By separating your CSS edits into their own files, you can easily overwrite all of the default theme SCSS files when you update the theme.

This is for you to add your own custom SCSS variables to override the default values with the new ones.

Let’s say you need to change the primary color with the one you use for your brand.

All you have to do is to:

1. open the sass/_variables.scss, look for the $primary variable and copy it
2. open the sass/custom/_user-variables.scss and paste the variable with its value
3. replace the value and remove the !default flag

If you need to add CSS for additional components or other needs, add any SCSS or CSS you require here.

3rd Party Plugin via NPM

To install vendor plugins for use in your project, follow these simple steps:

1. Run npm install <package name> --save-dev at the root directory of your project. This command will download the package to node_modules folder and write it to your package.json file
2. Run gulp to move all the dependencies that are listed in package.json file to dist/vendor including your newly downloaded plugins.
3. Lastly, link to the plugin's scripts and styles in your partial/scripts.html and partial/headers.html respectively. Refer to the plugin folder in dist/vendor for its correct path.

Typography

Add or change typography with the following instructions:

1. Import your font stylesheet into the _user-variables.scss. Like:

   @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap");

2. Edit the $font-family-base value to change the current font family variable with yours. You may also change the $headings-font-family as per your need.

   $font-family-base: 'Inter', sans-serif;

Logo

Should you need to display your brand logo within the navigation menu, go to /partials/nav.html and add the logo inside .navbar-brand like this:

HTML Partials

The gulp-html-partial package is used to make global changes in HTML files easier. Partials are basically just html files that are designed to be used from within other pages.

The following partials are available:

1. header.html with title variable for page title.
2. nav.html with addClass variable for nav style.
3. footer.html with optional addClass variable for footer background color.
4. scripts.html that contains all the required javascript.

You can easily create new .html partials inside the /partials folder and point to them from any file by specifying the path to the partial file like this:

• Copy <partial src="header.html" title="This is my website"></partial>
• Copy <partial src="nav.html" addClass="bg-transparent fixed-top"></partial>
• Please read the official gulp-html-partial documentation for more info.