Getting Started

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

Focus uses Browsersync to serve pages from the dist directory. 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.

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

Basic template

The basic template is a guideline for how to structure your pages when building with this theme.

                            
                                <!doctype html>
                                <html lang="en">
                                <head>
                                    <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,700%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.min.css">

                                    <title>Bootstrap Theme</title>
                                </head>
                                <body>
                                    <h1>Hello, world!</h1>

                                    <!-- JS (including Bootstrap & plugins) -->
                                    <script src="assets/js/theme.min.js"></script>
                                </body>
                                </html>
                            
                        

Changelog

1.2.0 - 10 June 2019

Updated
  • jQuery to 3.4.1
Changed
  • Primary color: _variables.scss
  • Replaced Masonry by Colcade
  • Reorganized files structure

1.1.0 - 10 April 2019

Updated
  • Bootstrap to 4.3.1
  • popper.js to 1.15.0
  • Gulp to 4.0.0

1.0.0 - Initial release