Important folders in the template

  1. scripts

    Includes all the javascript files used in the template

  2. styles

    Includes all the .scss files used in the template. On every file change, changed .scss files get compiled by a gulp task and the compiled css files are then sent to the css folder

  3. css

    This folder includes all the compiled .scss files. This folder is generated by a gulp task every time the gulp serve command is executed

  4. components

    Includes external javascript and css files that were not installed using bower

  5. assets

    Includes static assets used in the template. This includes images, .json and .svg files

  6. bower_components

    Includes all the dependencies installed with bower

  7. node_modules

    Includes all node packages, components and dependencies installed with NPM


Important files in the template

  1. index.html

    Template home page

  2. scripts/app.js

    Main javascript file. Includes global template configuration

  3. scripts/functions.js

    Global functions are defined here

  4. styles/_variables.scss

    Global .scss variables are defined here

  5. styles/_mixins.scss

    .scss mixins are defined here

  6. styles/palettes/*

    Color palettes are defined in this folder

  7. styles/layouts/*.scss

    Template layouts are defined in this folder

  8. styles/helpers/*.scss

    Includes global .scss helpers

Naming conventions

File and folder name definitions and conventions used in the template

Every .html included in the template follows the {layout}/{navbarColor}/{sidebarColor}/{category}/{view} naming convention.

For example, for the tooltips.html in the default-sidebar-1 layout that uses the primary navbar with the primary sidebar, located in the following example url:

  1. .html files are located in the default-sidebar-2/primary/primary/ui/ folder
  2. .scss files are located in the styles/ui folder
  3. .js files are located in the scripts/ui folder
  4. For this example, the file locations are the following:

    1. default-sidebar-2/primary/primary/ui/tooltips.html
    2. styles/ui/tooltips.scss
    3. scripts/ui/tooltips.js