Skip to main content

Documentation

A brief guide to get started with Boost.

Files structure

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

  • dist - production files
  • src
    • img - image assets
    • pages - html pages
    • scss - sass files
    • templates - nunjucks templates
  • gulpfile.js - all building tasks
  • package.json - npm dependencies

Development setup

Boost'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

Boost 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.

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 href="https://fonts.googleapis.com/css?family=Merriweather:400,700%7C
                                Merriweather+Sans:300,400,700" rel="stylesheet">

                                <!-- Font Awesome -->
                                <link rel="stylesheet" href="css/fontawesome-all.min.css">

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

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

                                <!-- Bootstrap JS -->
                                <script src="js/jquery.slim.min.js"></script>
                                <script src="js/popper.min.js"></script>
                                <script src="js/bootstrap.min.js"></script>
                            </body>
                        </html>

Accessibility

Boost theme is built with accessibility in mind and includes the following best practices:

  • Valid and semantic code
  • 'Skip to main content' link
  • Underlined links within paragraphs
  • High color contrast between text and background
  • Keyboard navigation
  • Ready for screen reader

Changelog

1.3.2 -18 May 2019

Updated
  • jQuery to 3.4.1
  • Popper.js to 1.15.0
  • Font Awesome to 5.8.2

1.3.1 - 27 April 2019

Added
  • min-height to cards to fix image height on IE11: _card.scss

1.3.0 - 04 April 2019

Added
  • New demo pages
  • Styles
    • Font family class (serif/sans-serif): _text.scss
    • Class for minimum height size: _sizing.scss
    • Spacing value: _variables.scss
    • Style for centered blockquote: _type.scss
    • Hover effect to linked thumbnails: _images.scss
Updated
  • Bootstrap to 4.3.1
  • Font Awesome to 5.8.1
  • Gulp to 4.0.0

1.2.0 - 04 February 2019

Updated
  • Bootstrap to 4.2.1
  • Popper.js to 1.14.7
  • Font Awesome to 5.7.0
Changed
  • Minor css changes: _alerts.scss, _variables.scss

1.1.0 - 24 October 2018

Added
  • New demo pages
  • Pagination styles: _pagination.scss
  • Table styles: _tables.scss
Updated
  • Font Awesome to 5.4.1
Changed
  • Transition properties: _cards.scss, _links.scss

1.0.0 - Initial release