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:

  1. Add path to plugin or library you want to use after bootstrap and jquery
  2. Open HTML file that contains examples of plugin that you want to use
  3. Copy markup of specific example and paste it to your blank page
  4. Copy JS code of that particular example from the file located in global_assets/js/demo_pages/ and paste it to custom.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
  5. Open _config.scss located in global_assets/scss/ folder, change plugin variable to true and re-compile your SCSS files. If everything ran smoothly, styles of your plugin have been exported to components.min.css file.
  6. 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