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 compiled files
  • src source files
    • assets
    • pages
    • templates
  • gulpfile.js
  • package.json
  • README.md

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 navigate to the theme's folder and run the following npm command to install all dependencies:

npm i

Running gulp will compile the theme, copy all required files to the dist directory, and will open a browser window to view your site.

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.

Starter template

    
        <!doctype html>
        <html lang="en">
        <head>
            <title>Focus Theme</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">

            <!-- Google Fonts -->
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,600%7CFira+Sans:300,400,400i,600">

            <!-- Material icons -->
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

            <!-- CSS (including Bootstrap) -->
            <link rel="stylesheet" href="assets/css/theme.css">

            <!-- JS (including Bootstrap & plugins) -->
            <script src="assets/js/theme.js" defer></script>
        </head>
        <body>
            <h1>Hello, world!</h1>
        </body>
        </html>
    
Important: Remember to add the defer attribute in order to execute the scripts after the page has been rendered.