Getting started

Find out what's included in your theme and how to customize & compile source files. Plus examples and code snippets for components, utilities and plugins.

Introduction

Hi, I hope you find this theme useful! it has been crafted on top of the Bootstrap 4 framework; these docs by no means replace the official ones, but provide a clear view of all the extended styles and new components that this theme provides on top of the framework.

This introduction includes the information to understand how it is organized, make changes to the source code, compile and extend it to fit your needs.

Thanks, and enjoy!

What's included

Inside the theme folder you’ll find the following directories and files, organizing resources and providing both compiled and minified distribution files, as well as the source files. 

theme/
  ├── gulpfile.js
  ├── package.json
  ├── README.md
  ├── images/
  ├── fonts/
  ├── scss/
  │   ├── bootstrap/
  │   ├── vendor/
  │   ├── custom/
  │   └── variables.scss
  │   └── theme.scss
  ├── js/
  │   ├── bootstrap/
  │   └── vendor/
  │   └── custom/
  │   └── theme.js
  └── dist/
      ├── theme.min.css
      ├── theme.min.css.map
      ├── ecommerce.min.css
      ├── ecommerce.min.css.map
      └── theme.min.js

Gulpfile.js

The theme includes a custom Gulp file, which can be used to quickly re-compile and minify the theme’s SCSS and JS files and also to optimize images. You’ll need to install both Node and Gulp before using our included gulpfile.js.

Once node is installed, run the following command to install Gulp. 

$ npm install gulp -g

After installing gulp, make sure you’ve installed the rest of the theme’s dependencies: 

$ npm install

Now you're ready to to modify your source files and run gulp to generate new local dist/ files automatically. We've also included a gulp watch command so it keeps track of changes and compile the files on the fly.

Theme source code

The scss/ and js/ directories contain the source code for the CSS and JS. Within these folders you'll find the next subdirectories:

  • bootstrap/, which contains Bootstrap (v4.0.0-alpha.6)
  • custom/, which contains all the styles and components made specifically for this theme.
  • vendor/, contains all the external plugins and their styles that are used in this theme.

The dist/ folder includes everything above built into a single CSS and JS file already compressed and minified.

For the styles, scss/theme.scss is the entry point for scss files. To make changes, simply modify your local custom files or edit the imports listed here.

Basic template

The basic template is a guideline for how to structure your pages when building new ones using this theme. Included below are all the necessary bits for using the theme’s CSS and JS. 


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Bootstrap theme</title>

    <!-- Bootstrap CSS file -->
    <link rel="stylesheet" type="text/css" href="scss/bootstrap/bootstrap.css" />
    <!-- Theme CSS file -->
    <link rel="stylesheet" type="text/css" href="dist/theme.min.css" />
  </head>
  <body>
    <h1>Hello world!</h1>

    <!-- include jQuery and Tether (both required for Bootstrap 4) and the theme JS file -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="dist/theme.min.js"></script>
  </body>
</html>