Starter kit overview
Overview
Each layout contains a set of blank pages called "Starter kit". This kit may be very useful for developers who works on integration. Each page includes a basic markup - navbar, sidebar, content area and a footer. The functionality is limited by default to necessary elements only - jquery and bootstrap JS libraries; bootstrap, layout, pages, helpers and core CSS files compiled from SCSS.
Screenshot

Usage
In starter kit, styles of all optional components are disabled. You can control the list of components in _config.scss
file, it also includes core layout options that allow you to configure output and particular layout. This helps you to keep your CSS light and clean.
All template pages include only those JS files that are needed on the page. So if you need, for example, some specific functinality of Datatables, just open this page and a .js file that comes after app.js
path, copy the code and paste it to your file. This helps to avoid loading of unnecessary and unused files.
Usage of a Starter kit is relatively simple:
- Add path to plugin or library you want to use after bootstrap and jquery
- Open HTML file that contains examples of plugin that you want to use
- Copy markup of specific example and paste it to your blank page
- Copy JS code of that particular example from the file located in
global_assets/js/demo_pages/
and paste it tocustom.js
file located in layout assets (or any other file where you store your JS code). Make sure you add a part to this file after plugin itself - Open
_config.scss
located inglobal_assets/scss/
folder, change plugin variable totrue
and re-compile your SCSS files. If everything ran smoothly, styles of your plugin have been exported tocomponents.min.css
file. - That's it.
Screenshot of _config.scss
file

Main files
All files include a simple demo content - card, text with headings and paragraphs, table, form and content grid samples. By default, navbar has a set of basic components - user dropdown menu, text and icon links. Sidebar has a single and multiple levels navigation with divider and section header. Starter kit of the first layout contains all available layout types and options.
Layout 1 Contains 14 files
File | Description | |
---|---|---|
Navbars | ||
navbar_fixed_main.html |
Fixed single navbar | |
navbar_fixed_secondary.html |
Sticky secondary navbar - sticks to top on scroll | |
navbar_fixed_both.html |
Fixed multiple navbars | |
Sidebars | ||
sidebar_none.html |
Layout without sidebar and horizontal navigation | |
sidebar_main.html |
Page with main sidebar only. Includes sidebar control button | |
sidebar_secondary.html |
Page with main and secondary sidebars. Includes sidebar control buttons | |
sidebar_right.html |
Page with main and right sidebars. Includes sidebar control buttons | |
sidebar_right_hidden.html |
Page with main, secondary and right sidebar that is hidden by default | |
sidebar_right_visible.html |
Page with main, secondary and right sidebar that is visible by default | |
sidebar_content_left.html |
Page with left aligned content sidebar. Includes all sidebar control buttons | |
sidebar_content_right.html |
Page with right aligned content sidebar. Includes all sidebar control buttons | |
Layout options | ||
layout_boxed.html |
Boxed page layout | |
layout_fixed.html |
Layout with fixed sidebar and navbar, with custom scrollbar | |
layout_nav_horizontal.html |
Layout with multi level horizontal navigation |
Layout 2 Contains 14 files
File | Description | |
---|---|---|
Navbars | ||
navbar_fixed_main.html |
Fixed single navbar | |
navbar_fixed_secondary.html |
Sticky secondary navbar - sticks to top on scroll | |
navbar_fixed_both.html |
Fixed multiple navbars | |
Sidebars | ||
sidebar_none.html |
Layout without sidebar and horizontal navigation | |
sidebar_main.html |
Page with main sidebar only. Includes sidebar control button | |
sidebar_secondary.html |
Page with main and secondary sidebars. Includes sidebar control buttons | |
sidebar_right.html |
Page with main and right sidebars. Includes sidebar control buttons | |
sidebar_right_hidden.html |
Page with main, secondary and right sidebar that is hidden by default | |
sidebar_right_visible.html |
Page with main, secondary and right sidebar that is visible by default | |
sidebar_content_left.html |
Page with left aligned content sidebar. Includes all sidebar control buttons | |
sidebar_content_right.html |
Page with right aligned content sidebar. Includes all sidebar control buttons | |
Layout options | ||
layout_boxed.html |
Boxed page layout | |
layout_fixed.html |
Layout with fixed sidebar and navbar, with custom scrollbar | |
layout_nav_horizontal.html |
Layout with multi level horizontal navigation |
Layout 3 Contains 13 files
File | Description | |
---|---|---|
Navbars | ||
navbar_fixed_main.html |
Fixed single navbar | |
navbar_fixed_secondary.html |
Sticky secondary navbar - sticks to top on scroll | |
navbar_fixed_both.html |
Fixed multiple navbars | |
Sidebars | ||
sidebar_none.html |
Layout without sidebar and horizontal navigation | |
sidebar_main.html |
Page with main sidebar only. Includes sidebar control button | |
sidebar_secondary.html |
Page with main and secondary sidebars. Includes sidebar control buttons | |
sidebar_right.html |
Page with main and right sidebars. Includes sidebar control buttons | |
sidebar_right_hidden.html |
Page with main, secondary and right sidebar that is hidden by default | |
sidebar_right_visible.html |
Page with main, secondary and right sidebar that is visible by default | |
sidebar_sections.html |
Page with sectioned sidebar - no background, border and shadow. Cards have default look | |
sidebar_stretched.html |
Page stretched sidebar. This sidebar type fills up all available vertical space from page header to footer | |
Layout options | ||
layout_boxed.html |
Boxed page layout | |
layout_nav_horizontal.html |
Layout with multi level horizontal navigation |
Layout 4 Contains 13 files
File | Description | |
---|---|---|
Navbars | ||
navbar_main_fixed.html |
Fixed single navbar | |
navbar_main_hideable.html |
Hideable navbar - slides in/out on scroll | |
navbar_secondary_sticky.html |
Sticky secondary navbar - sticks to top on scroll | |
navbar_both_fixed.html |
Fixed multiple navbars | |
Sidebars | ||
sidebar_none.html |
Layout without sidebar and horizontal navigation | |
sidebar_main.html |
Page with main sidebar only. Includes sidebar control button | |
sidebar_secondary.html |
Page with main and secondary sidebars. Includes sidebar control buttons | |
sidebar_right.html |
Page with main and right sidebars. Includes sidebar control buttons | |
sidebar_right_hidden.html |
Page with main, secondary and right sidebar that is hidden by default | |
sidebar_right_visible.html |
Page with main, secondary and right sidebar that is visible by default | |
sidebar_sections.html |
Page with sectioned sidebar - no background, border and shadow. Cards have default look | |
sidebar_stretched.html |
Page stretched sidebar. This sidebar type fills up all available vertical space from page header to footer | |
Layout options | ||
layout_boxed.html |
Boxed page layout |
Layout 5 Contains 13 files
File | Description | |
---|---|---|
Navbars | ||
navbar_main_fixed.html |
Fixed single navbar | |
navbar_main_hideable.html |
Hideable navbar - slides in/out on scroll | |
navbar_secondary_sticky.html |
Sticky secondary navbar - sticks to top on scroll | |
navbar_both_fixed.html |
Fixed multiple navbars | |
Sidebars | ||
sidebar_none.html |
Layout without sidebar and horizontal navigation | |
sidebar_main.html |
Page with main sidebar only. Includes sidebar control button | |
sidebar_secondary.html |
Page with main and secondary sidebars. Includes sidebar control buttons | |
sidebar_right.html |
Page with main and right sidebars. Includes sidebar control buttons | |
sidebar_right_hidden.html |
Page with main, secondary and right sidebar that is hidden by default | |
sidebar_right_visible.html |
Page with main, secondary and right sidebar that is visible by default | |
sidebar_sections.html |
Page with sectioned sidebar - no background, border and shadow. Cards have default look | |
sidebar_stretched.html |
Page stretched sidebar. This sidebar type fills up all available vertical space from page header to footer | |
Layout options | ||
layout_boxed.html |
Boxed page layout |