Documentation
If you have any questions or suggestions, feel free to drop us an email at contact@dashboardpack.com
Support Center

#### Introduction

##### ArchitectUI jQuery Bootstrap 4 HTML Version

ArchitectUI HTML is built using the latest frontend technologies.

It's powered by jQuery, Bootstrap4, Webpack and Yarn.

For stylesheets it uses SASS which allowed us to build better, more modular and scalable styles. The modular SCSS files are compiled, minified and bundled automatically using Webpack.

All styles are standardised using the Bootstrap4 code base.

The demo is built using Handlebars templating. We used it to put together or the different layout parts without repeating common HTML snippets, like header, sidebar, footer.

The .hbs files can be easily transformed in HTML files, so that you don't have to keep the Handlebars system.

Each Javascript widget is imported and initialized inside their respective file, under `src/scripts-init`. This way it's easy to exclude widgets that you're not going to use.

The .hbs templates, SCSS stylesheets and Javascript files are put together, compiled, concatenated and minified by Webpack 4. You can include/exclude new files in `webpack.config-helper.js`

If you prefer a different built tool you can replace Webpack with Gulp or Grunt.

#### Installation

1. Download and uncompress the theme package archive in your desired folder location.

2. Download and install Node.js from nodejs.org/en/download/

3. Install the latest version of `npm`. This will be useful when running all the build commands. Run the following in a command line, either your IDE's Terminal window or in a Windows Command Prompt.

           npm install --global npm@latest

4. Install the app dependencies by running the following command in the command line inside the folder root where you have unzipped the theme package archive.

           npm install

5. After npm finishes installing the modules from `package.json` you can go ahead and start the application. To do so, run the command below.

   You can also use `yarn` to install dependencies instead of `npm`.

           npm run start

   After the comand finished, you should see a Compiled successfully! message in your terminal window. Also, a web server service will be started so you can view your app in the browser: `http://localhost:8081`

6. To create a production optimised build run the command below:

           npm run build

   This created another folder in the root of your project named `build`. You'll have an option to start a local web server to view your newly created production build.

#### File Structure

Folder Path | Description
--- | ---
`src` | Holds all the project source files
├`scripts-init` | In this folder you will find all the JS scripts imports and also all the initialization snippets for jQuery widgets/plugins used through out the HTML demo.
├`pages.js` | In the HTML version demo, we used Handlebars templating for generating all the example pages. This is the file that references all the demo pages and layouts. In the template package there is also a production ready version the ArchiterctUI, with all the files generated in HTML.
├`assets` | Contains theme source SCSS stylesheets files. `base.scss` is the main stylesheet that imports all other stylesheets for components, elements, layouts and widgets.
├`DemoPages` | In this folder you can find all the examples from the demo. This is useful if you want to copy paste snippets of code from the theme demo.
├─`Applications` | Applications examples, found in the Demo navigation under "Applications" submenu.
├─`Components` | Components examples, found in the Demo navigation under "Components" submenu.
├──`Form` | Forms elements and components examples, found in the Demo navigation under "Forms" section. They are splitted between the following sub-directories`Components` and `Elements`.
├──`Charts` | Charts elements and components examples, found in the Demo navigation under "Charts" section.
├── `[...]` | Other components examples that don't have a parent folder. For example, Accordion, Calendar, Pagination, Progress Bar, etc
├─`Dashboards` | Dashboards examples, found in the Demo navigation under "Dashboards" submenu.
├─`Elements` | Elements examples, found in the Demo navigation under "Elements" submenu.
├─`Main` | This contains the main app component wrapper. All others pass through this component. It also holds the `div` that accepts layout modifiers like `fixed-sidebar`, `fixed-footer`, etc
├─`UserPages` | Pages examples, found in the Demo navigation under "Pages" submenu.
├─`Widgets` | Widgets examples, found in the Demo navigation under "Dashboard Widgets" section.
├`Layout` | This folder holds all the components that build the page layout wrapper.

#### Stylesheets

All ArchitectUI stylesheets can be found in `/src/assets/`.

From `base.scss` you can choose for what elements, components, widgets stylesheets to include in your application.

For Example, if you won't be using the `Flag Kit` component, you can remove it's associated SCSS file by commenting out the import line like in the example below:

        // Google Fonts

        @import url('https://fonts.googleapis.com/css?family=Roboto:400,500');

        // BOOTSTRAP 4 VARIABLES

        @import "components/bootstrap4/functions";
        @import "components/bootstrap4/variables";
        @import "components/bootstrap4/mixins";

        // ArchitectUI Themes Variables

        @import "themes/layout-variables";

        // FlagKit
        // @import "components/icons/flagkit/flagkit";

        // Image Crop
        @import "components/image-crop/image-crop";

        // Guided Tours
        @import "components/guided-tours/guided-tours";

        // Loading buttons
        @import "components/loading-buttons/loading-buttons";

        // Drawer
        @import "components/drawer/drawer";

        // Hamburger button
        @import "components/hamburgers/hamburgers";

        // Notifications
        @import "components/notifications/sweetalerts";
        @import "components/notifications/toastr";

        // Slick Carousel
        @import "components/slick-carousel/slick/slick";

        // Popovers & Tooltips
        @import "components/popovers-tooltips/popovers-tooltips";

        // Calendar
        @import "components/calendar/calendar";

        // Maps
        @import "components/maps/vector-maps";

        // Tree View
        @import "components/tree-view/tree-view";

All components use the same variables for spacing or styling. We'll talk about style customization in the next section: Theming & Colors.

Inside `/src/assets/`, folders are structured in a logical manner based on the element or component type, so you can easily find or remove the respective element or component. For example, all Bootstrap 4 related stylesheets can be found under `/components/bootstrap4/`.

Also, inside `/src/assets/` you'll find a folder called `demo-ui`. This contains theme demo specific SCSS and should be removed in a live application because some of the styles written there are appliable for demo purposes only.

##### Layout Stylesheets

Layout stylesheets are located under `/src/assets/layout` folder. Inside you'll find folders logically split between the layout components: Layout Header, Sidebar, Main Content Area and so on.

Let's take the Header section as an example. Inside `/layout/header/` folder you'll find two subfolders `/modifiers` and `/themes`.

The `_header-base.scss` contains some generic styling for the layout header component and all the imports from those two sub-folders.

1. `/modifiers/` - this folder contains all the modifiers for the header like `fixed-header` and also, the header components.

2. `/themes/` - based on the color choosen for the header component background, you can choose one of the two themes available:

   - `_header-light.scss` - should be used with a darker background color, this way the texts and icons will have a light color contrast
   - `_header-dark.scss` - should be used with a lighter background color, this way the texts and icons will have a dark color contrast

The `/themes/` folder can be found for the following layout components: header, sidebar and main

#### Theming & divors

ArchitectUI is built in a modalar and scalable manner. This means that you can easily modify theme variables and they will get propagated thorugh out the whole stylesheets architecture.

ArchitectUI is build around the latest version of `Bootstrap 4` (Bootstrap 4.2.1).

All generic theme variables can be found in `/src/assets/themes/_variables.scss`.

To modify, for example, the generic colors scheme for common states like success, warning, primary, danger, info and so on, you'll have to modify the `_variables.scss` file as follows:

         // divors

        $white: #fff;
        $gray-100: #f8f9fa;
        $gray-200: #e9ecef;
        $gray-300: #dee2e6;
        $gray-400: #ced4da;
        $gray-500: #adb5bd;
        $gray-600: #6c757d;
        $gray-700: #495057;
        $gray-800: #343a40;
        $gray-900: #212529;
        $black: #000;

        $grays: ();

        $grays: map-merge(
            (
                    "100": $gray-100,
                    "200": $gray-200,
                    "300": $gray-300,
                    "400": $gray-400,
                    "500": $gray-500,
                    "600": $gray-600,
                    "700": $gray-700,
                    "800": $gray-800,
                    "900": $gray-900
            ),
            $grays
        );

        //--#{$color}
        $brand: #3f6ad8;
        $blue: #78C3FB;
        $indigo: #444054;
        $purple: #794c8a;
        $pink: #f65ca2;
        $red: #d92550;
        $orange: #fd7e14;
        $yellow: #f7b924;
        $green: #3ac47d;
        $teal: #16E0BD;
        $cyan: #28b0cd;
        $blue-light: #eeeeee;

        $primary: $brand;
        $secondary: $gray-600;
        $success: $green;
        $info: $cyan;
        $warning: $yellow;
        $danger: $red;
        $light: $blue-light;
        $dark: $gray-800;
        $focus: $indigo;
        $alt: $purple;

        $theme-colors: ();

        $theme-colors: map-merge(
              (
                      "primary": $primary,
                      "secondary": $secondary,
                      "success": $success,
                      "info": $info,
                      "warning": $warning,
                      "danger": $danger,
                      "light": $light,
                      "dark": $dark,
                      "focus": $focus,
                      "alternate": $alt
              ),
              $theme-colors
        );

#### Layout Components Styles

###### Sidebar

You can modify the Sidebar component background style by adding one of the below CSS helpers to the `.app-sidebar` component. For example, if you want ot have a green style sidebar, you'll have to add `bg-success` as a CSS class to the div that has the `app-sidebar` CSS class.

1. `src/assets/layout/sidebar/themes/` - based on the color chosen for the sidebar component background, you can choose one of the two themes available:

   - `_sidebar-light.scss` - should be used with a darker background color, this way the texts and icons will have a light color contrast

     The CSS class that needs to be applied to `.app-sidebar` is `text-sidebar-light`.

   - `_sidebar-dark.scss` - should be used with a lighter background color, this way the texts and icons will have a dark color contrast

     The CSS class that needs to be applied to `.app-sidebar` is `text-sidebar-dark`.

###### Header

You can modify the Header component background style by adding one of the below CSS helpers to the `.app-header` component. For example, if you want ot have a warning state style header, you'll have to add `bg-warning` as a CSS class to the div that has the `app-header` CSS class.

1. `src/assets/layout/header/themes/` - based on the color chosen for the header component background, you can choose one of the two themes available:

   - `_header-light.scss` - should be used with a darker background color, this way the texts and icons will have a light color contrast.

     The CSS class that needs to be applied to `.app-header` is `text-header-light`.

   - `_header-dark.scss` - should be used with a lighter background color, this way the texts and icons will have a dark color contrast.

     The CSS class that needs to be applied to `.app-header` is `text-header-dark`.

###### Bootstrap 4 Variables

Architect comes with 9 different color schemes, located under `/assets/themes/`.

Stock, the default variables are loaded. To load a different color schemes for Bootstrap 4 variables, in `/assets/themes/_layout-variables.scss`, comment out the default variables `@import "default/variables";` and uncomment a different variables scheme.

###### Colors Available

Hover over the color dots below to see what CSS class you need to apply for Header and Sidebar components for each style.

Remember to use them in combination with _*-light.scss or _*-dark.scss

##### Solid Colors

##### Gradient Colors

###### Available Images

#### jQuery Components

All components used in ArchitectUI HTML version are imported and maintained in `node_modules` from `package.json` located in the project root.

For a better control, consistency, modularity and scalability, all style related resources are maintained and integrated from `/src/assets/` folder.

###### jQuery

jQuery is a fast, small, and feature-rich JavaScript library.

The source code for examples shown in demo for jQuery can be found at the following location:
``
The initialization Javascript associated with the jQuery Component can be found in the following location:
`src/app.js`
jQuery Documentation

###### Bootstrap 4

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

The source code for examples shown in demo for Bootstrap 4 can be found at the following location:
``
The stylesheet associated with the Bootstrap 4 Component can be found in the following location:
`src/assets/components/bootstrap4`
The initialization Javascript associated with the Bootstrap 4 Component can be found in the following location:
`src/app.js`
Bootstrap 4 Documentation

###### BlockUI

When activated, it will prevent user activity with the page (or part of the page) until it is deactivated.

The source code for examples shown in demo for BlockUI can be found at the following location:
`src/DemoPages/components/loading-blocks.hbs`
The initialization Javascript associated with the BlockUI Component can be found in the following location:
`src/scripts-init/blockui.js`
BlockUI Documentation

###### Full Calendar

A JavaScript event calendar. Customizable and open source.

The source code for examples shown in demo for Full Calendar can be found at the following location:
`src/DemoPages/components/calendar.hbs`
The stylesheet associated with the Full Calendar Component can be found in the following location:
`src/assets/components/calendar`
The initialization Javascript associated with the Full Calendar Component can be found in the following location:
`src/scripts-init/calendar.js`
Full Calendar Documentation

###### Slick Carousel

The last carousel you'll ever need

The source code for examples shown in demo for Slick Carousel can be found at the following location:
`src/DemoPages/components/carousel.hbs`
The stylesheet associated with the Slick Carousel Component can be found in the following location:
`src/assets/components/slick-carousel`
The initialization Javascript associated with the Slick Carousel Component can be found in the following location:
`src/scripts-init/carousel-slider.js`
Slick Carousel Documentation

###### jQuery Circle Progress

jQuery Plugin to draw animated circular progress bars

The source code for examples shown in demo for jQuery Circle Progress can be found at the following location:
`src/DemoPages/dashboard-widgets/chart-boxes.hbs`
The initialization Javascript associated with the jQuery Circle Progress Component can be found in the following location:
`src/scripts-init/circle-progress.js`
jQuery Circle Progress Documentation

###### Countup.js

Quickly create animations that display numerical data

The source code for examples shown in demo for Countup.js can be found at the following location:
`src/DemoPages/components/count-up.hbs`
The initialization Javascript associated with the Countup.js Component can be found in the following location:
`src/scripts-init/count-up.js`
Countup.js Documentation

###### Into.js

Step-by-step guide and feature introduction

The source code for examples shown in demo for Into.js can be found at the following location:
`src/DemoPages/components/guided-tours.hbs`
The stylesheet associated with the Into.js Component can be found in the following location:
`src/assets/components/guided-tours`
The initialization Javascript associated with the Into.js Component can be found in the following location:
`src/scripts-init/guided-tours.js`
Into.js Documentation

###### Grid Tables

An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.

The source code for examples shown in demo for Grid Tables can be found at the following location:
`src/DemoPages/tables/grid.hbs`
The stylesheet associated with the Grid Tables Component can be found in the following location:
`src/assets/components/tables/_tables.scss`
The initialization Javascript associated with the Grid Tables Component can be found in the following location:
`src/scripts-init/tables.js`
Grid Tables Documentation

###### Tree View

JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

The source code for examples shown in demo for Tree View can be found at the following location:
`src/DemoPages/components/tree-view.hbs`
The stylesheet associated with the Tree View Component can be found in the following location:
`src/assets/components/tree-view`
The initialization Javascript associated with the Tree View Component can be found in the following location:
`src/scripts-init/treeview.js`
Tree View Documentation

###### jQuery Cropper

A jQuery plugin wrapper for Cropper.js

The source code for examples shown in demo for jQuery Cropper can be found at the following location:
`src/DemoPages/components/image-crop.hbs`
The stylesheet associated with the jQuery Cropper Component can be found in the following location:
`src/assets/components/image-crop/`
The initialization Javascript associated with the jQuery Cropper Component can be found in the following location:
`src/scripts-init/image-crop.js`
jQuery Cropper Documentation

###### Ladda Loading Buttons

Buttons with built-in loading indicators.

The source code for examples shown in demo for Ladda Loading Buttons can be found at the following location:
`src/DemoPages/elements/buttons`
The stylesheet associated with the Ladda Loading Buttons Component can be found in the following location:
`src/assets/elements/_buttons.scss`
The initialization Javascript associated with the Ladda Loading Buttons Component can be found in the following location:
`src/scripts-init/ladda-loading.js`
Ladda Loading Buttons Documentation

###### GMaps

Use the potential of Google Maps in a simple way

The source code for examples shown in demo for GMaps can be found at the following location:
`src/DemoPages/components/maps.hbs`
The initialization Javascript associated with the GMaps Component can be found in the following location:
`src/scripts-init/maps.js`
GMaps Documentation

###### jVector Map

Many maps of the world, world regions, countries and cities are available

The source code for examples shown in demo for jVector Map can be found at the following location:
`src/DemoPages/components/maps.hbs`
The stylesheet associated with the jVector Map Component can be found in the following location:
`src/assets/components/maps/_vector-maps.scss`
The initialization Javascript associated with the jVector Map Component can be found in the following location:
`src/scripts-init/maps.js`
jVector Map Documentation

###### jQuery Bar Rating

jQuery Bar Rating Plugin - minimal, light-weight jQuery ratings.

The source code for examples shown in demo for jQuery Bar Rating can be found at the following location:
`src/DemoPages/components/ratings.hbs`
The stylesheet associated with the jQuery Bar Rating Component can be found in the following location:
`/node_modules/jquery-bar-rating/dist/themes`
The initialization Javascript associated with the jQuery Bar Rating Component can be found in the following location:
`src/scripts-init/rating.js`
jQuery Bar Rating Documentation

###### Perfect Scrollbar

Minimalistic but perfect custom scrollbar plugin.

The source code for examples shown in demo for Perfect Scrollbar can be found at the following location:
`src/DemoPages/components/scrollable-elements.hbs`
The stylesheet associated with the Perfect Scrollbar Component can be found in the following location:
`src/assets/components/perfect-scrollbar`
The initialization Javascript associated with the Perfect Scrollbar Component can be found in the following location:
`src/scripts-init/scrollbar.js`
Perfect Scrollbar Documentation

###### Sweet Alerts

A BEAUTIFUL, RESPONSIVE, CUSTOMIZABLE, ACCESSIBLE (WAI-ARIA) REPLACEMENT FOR JAVASCRIPT'S POPUP BOXES

The source code for examples shown in demo for Sweet Alerts can be found at the following location:
`src/DemoPages/components/notifications.hbs`
The stylesheet associated with the Sweet Alerts Component can be found in the following location:
`src/assets/components/notifications/_sweetalerts.scss`
The initialization Javascript associated with the Sweet Alerts Component can be found in the following location:
`src/scripts-init/sweet-alerts.js`
Sweet Alerts Documentation

###### Toastr

Simple javascript toast notifications

The source code for examples shown in demo for Toastr can be found at the following location:
`src/DemoPages/components/notifications.hbs`
The stylesheet associated with the Toastr Component can be found in the following location:
`src/assets/components/notifications/_toastr.scss`
The initialization Javascript associated with the Toastr Component can be found in the following location:
`src/scripts-init/toastr.js`
Toastr Documentation

###### Data Tables

Add advanced interaction controls to your HTML tables

The source code for examples shown in demo for Data Tables can be found at the following location:
`src/DemoPages/tables/data-tables.hbs`
The stylesheet associated with the Data Tables Component can be found in the following location:
`src/assets/components/tables/_datatables.scss`
The initialization Javascript associated with the Data Tables Component can be found in the following location:
`src/scripts-init/tables.js`
Data Tables Documentation

###### Forms

###### Datepicker

A simple jQuery datepicker plugin.

The source code for examples shown in demo for Datepicker can be found at the following location:
`src/DemoPages/forms/widgets/datepicker.hbs`
The stylesheet associated with the Datepicker Component can be found in the following location:
`src/assets/components/forms/datepicker/_datepicker.scss`
The initialization Javascript associated with the Datepicker Component can be found in the following location:
`src/scripts-init/form-components/datepicker.js`
Datepicker Documentation

###### Date Range Picker

A JavaScript component for choosing date ranges, dates and times.

The source code for examples shown in demo for Date Range Picker can be found at the following location:
`src/DemoPages/forms/widgets/datepicker.hbs`
The stylesheet associated with the Date Range Picker Component can be found in the following location:
`src/assets/components/forms/datepicker/_daterangepicker.scss`
The initialization Javascript associated with the Date Range Picker Component can be found in the following location:
`src/scripts-init/form-components/datepicker.js`
Date Range Picker Documentation

###### jQuery Validation

Form validation with jQuery

The source code for examples shown in demo for jQuery Validation can be found at the following location:
`src/DemoPages/forms/elements/validation.hbs`
The initialization Javascript associated with the jQuery Validation Component can be found in the following location:
`src/scripts-init/form-components/form-validation.js`
jQuery Validation Documentation

###### Select 2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

The source code for examples shown in demo for Select 2 can be found at the following location:
`src/DemoPages/forms/widgets/input-selects.hbs`
The stylesheet associated with the Select 2 Component can be found in the following location:
`/src/assets/components/forms/multiselect`
The initialization Javascript associated with the Select 2 Component can be found in the following location:
`src/scripts-init/form-components/input-select.js`
Select 2 Documentation

###### Bootstrap Multiselect

JQuery multiselect plugin based on Twitter Bootstrap.

The source code for examples shown in demo for Bootstrap Multiselect can be found at the following location:
`src/DemoPages/forms/widgets/input-selects.hbs`
The stylesheet associated with the Bootstrap Multiselect Component can be found in the following location:
`src/assets/components/forms/dropdown-select/_dropdown-select.scss`
The initialization Javascript associated with the Bootstrap Multiselect Component can be found in the following location:
`src/scripts-init/form-components/input-select.js`
Bootstrap Multiselect Documentation

###### ckEditor

Popular WYSIWYG editor

The source code for examples shown in demo for ckEditor can be found at the following location:
`src/DemoPages/forms/widgets/wysiwyg-editor.hbs`
ckEditor Documentation

###### Clipboard.js

A modern approach to copy text to clipboard

The source code for examples shown in demo for Clipboard.js can be found at the following location:
`src/DemoPages/forms/widgets/clipboard.hbs`
The initialization Javascript associated with the Clipboard.js Component can be found in the following location:
`src/scripts-init/form-components/clipboard.js`
Clipboard.js Documentation

###### Form Wizard

The awesome jQuery step wizard plugin with Bootstrap support

The source code for examples shown in demo for Form Wizard can be found at the following location:
`src/DemoPages/forms/elements/wizard.hbs`
The stylesheet associated with the Form Wizard Component can be found in the following location:
`src/assets/elements/_forms-wizard.scss`
The initialization Javascript associated with the Form Wizard Component can be found in the following location:
`src/scripts-init/form-components/form-wizard.js`
Form Wizard Documentation

###### Input Mask

Inputmask is a javascript library which creates an input mask.

The source code for examples shown in demo for Input Mask can be found at the following location:
`src/DemoPages/forms/widgets/input-mask.hbs`
The initialization Javascript associated with the Input Mask Component can be found in the following location:
`src/scripts-init/form-components/input-mask.js`
Input Mask Documentation

###### noUISlider

JavaScript Range Slider

The source code for examples shown in demo for noUISlider can be found at the following location:
`src/DemoPages/forms/widgets/range-slider.hbs`
The stylesheet associated with the noUISlider Component can be found in the following location:
`src/assets/components/forms/rangeslider`
The initialization Javascript associated with the noUISlider Component can be found in the following location:
`src/scripts-init/form-components/range-slider.js`
noUISlider Documentation

###### Textarea Autosize

Vertically adjust a textarea based on user input and control all presentation in CSS.

The source code for examples shown in demo for Textarea Autosize can be found at the following location:
`src/DemoPages/forms/widgets/textarea-autosize.hbs`
The initialization Javascript associated with the Textarea Autosize Component can be found in the following location:
`src/scripts-init/form-components/textarea-autosize.js`
Textarea Autosize Documentation

###### Toggle Switch

Bootstrap 4 plugin/widget that converts checkboxes into responsive toggles.

The source code for examples shown in demo for Toggle Switch can be found at the following location:
`src/DemoPages/forms/widgets/toggle-switch.hbs`
The stylesheet associated with the Toggle Switch Component can be found in the following location:
`src/assets/components/forms/toggle-switch`
The initialization Javascript associated with the Toggle Switch Component can be found in the following location:
`src/scripts-init/form-components/toggle-switch.js`
Toggle Switch Documentation

###### Charts

###### ApexCharts

Modern & Interactive Javascript Charts to create beautiful representation of your data.

The source code for examples shown in demo for ApexCharts can be found at the following location:
`src/DemoPages/charts/apexcharts.hbs`
The initialization Javascript associated with the ApexCharts Component can be found in the following location:
`src/scripts-init/charts/apex-charts.js`
ApexCharts Documentation

###### Chart.js

Simple yet flexible JavaScript charting for designers & developers.

The source code for examples shown in demo for Chart.js can be found at the following location:
`src/DemoPages/charts/chartjs.hbs`
The initialization Javascript associated with the Chart.js Component can be found in the following location:
`src/scripts-init/charts/chartjs.js`
Chart.js Documentation

###### jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

The source code for examples shown in demo for jQuery Sparklines can be found at the following location:
`src/DemoPages/charts/sparklines.hbs`
The initialization Javascript associated with the jQuery Sparklines Component can be found in the following location:
`src/scripts-init/charts/charts-sparklines.js`
jQuery Sparklines Documentation

#### Layout Modifiers

ArchitectUI has built-in CSS helper classes that modify the layout components positions.

These CSS helper classes need to be added to the element that has the `app-container` CSS class. The path to the ArchitectUI App Container Component is: `/src/DemoPages/Main/index.js`.

Check out the available modifiers list below:

###### App Container Modifiers ( `.app-container` )

CSS Helper Class | Modified Component | Description
--- | --- | ---
`fixed-header` | Header ( `.app-header` ) | Makes the Header Component positioned top fixed/sticky.
`fixed-footer` | Footer ( `.app-footer` ) | Makes the Footer Component positioned bottom fixed/sticky.
`body-tabs-shadow` | Page Section Navigation ( `.body-tabs-layout` ) | When adding the `body-tabs-shadow` CSS helper to the `app-container` element, the pages section sub-navigation menu will transform the menu active item to pills with drop shadows.
`body-tabs-line` | Page Section Navigation ( `.body-tabs-layout` ) | When adding the `body-tabs-line` CSS helper to the `app-container` element, the pages section sub-navigation menu will transform the menu active item bottom line style.
`app-theme-*` | Main Section | There are two subtile color schemes available on top of all the color themes for top-bar/header components: `app-theme-white` or `app-theme-gray`. These modify the color scheme for the main content area. Their style can be modified from `/src/assets/layout/main/themes`.

###### Header ( `.app-header` )

These CSS helper classes need to be added to the element that has the `app-header` CSS class. The path to the ArchitectUI Header Container Component is: `/src/Layout/AppHeader/index.js`.

Check out the available modifiers list below:

CSS Helper Class | Modified Component | Description
--- | --- | ---
`header-shadow` | Header ( `.app-header` ) | Adds a drop shadow for the Header Component.

###### Sidebar ( `.app-sidebar` )

These CSS helper classes need to be added to the element that has the `app-sidebar` CSS class. The path to the ArchitectUI Sidebar Container Component is: `/src/Layout/AppSidebar/index.js`.

Check out the available modifiers list below:

CSS Helper Class | Modified Component | Description
--- | --- | ---
`sidebar-shadow` | Sidebar ( `.app-sidebar` ) | Adds a drop shadow for the Sidebar Component.