
Navigation
Theme components
Form components
Apps
Documentation
Folders
Important folders in the template
scripts
Includes all the javascript files used in the template
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
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
components
Includes external javascript and css files that were not installed using bower
assets
Includes static assets used in the template. This includes images, .json
and .svg
files
bower_components
Includes all the dependencies installed with bower
node_modules
Includes all node packages, components and dependencies installed with NPM
Files
Important files in the template
index.html
Template home page
scripts/app.js
Main javascript file. Includes global template configuration
scripts/functions.js
Global functions are defined here
styles/_variables.scss
Global .scss
variables are defined here
styles/_mixins.scss
.scss
mixins are defined here
styles/palettes/*
Color palettes are defined in this folder
styles/layouts/*.scss
Template layouts are defined in this folder
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:
http://peak-ui.batchthemes.com/default-sidebar-2/primary/primary/ui/tooltips.html
:
.html
files are located in the default-sidebar-2/primary/primary/ui/
folder.scss
files are located in the styles/ui
folder.js
files are located in the scripts/ui
folderFor this example, the file locations are the following:
default-sidebar-2/primary/primary/ui/tooltips.html
styles/ui/tooltips.scss
scripts/ui/tooltips.js