Introduction

A brief guide to get started with Focus theme.

Files structure

Unzip the theme folder and you'll see the next file structure:

  • dist - production files
  • src
    • assets
    • pages
    • templates
  • gulpfile.js
  • package.json
  • README.md

Development setup

Theme's dev tools require Node and Gulp CLI. To install Node go to Node.js and follow the instructions. To install Gulp CLI run the following command:

npm i gulp-cli -g

Then run the following npm command to install all the theme's dependencies:

npm i

Running gulp will compile the theme, copy all required files to the dist directory and will open a browser window to dist/index.html.

gulp

Other gulp tasks available:

  • gulp css: Compiles and minifies scss files to dist.
  • gulp watch: Starts a local server and watch for changes.

The theme uses Nunjucks as a template engine, basically to include partials (header, footer...). Gulp renders Nunjucks templates to HTML.

Note: If you prefer, you can simply use the production files that are in the dist folder and bypass the gulp workflow.

Customization

There are two ways to customize your theme:

  • SCSS. If you use the gulp workflow to compile the scss files (recommended) then you can use the _user-vars.scss file to add your own variables and _user.css to add your own styles.
  • CSS. If you use the compiled files, you can simply add a custom.css file in the assets/css folder with your own styles and link it to the head of your pages.

Remove unused CSS

Once your files are ready for production, you can remove all unused CSS using purgecss. To do it just run the following command:

gulp uncss

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