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

Documentation

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

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

Download and uncompress the theme package archive in your desired folder location.
Download and install Node.js from nodejs.org/en/download/

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

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
                                                        
```
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
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.

/modifiers/ - this folder contains all the modifiers for the header like fixed-header and also, the header components.
/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.

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.

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.

Docs Menu

Introduction

ArchitectUI jQuery Bootstrap 4 HTML Version

Installation

File Structure

Stylesheets

Layout Stylesheets

Theming & divors

Layout Components Styles

Sidebar

Header

Bootstrap 4 Variables

Colors Available

Solid Colors

Gradient Colors

Available Images

jQuery Components

jQuery

Bootstrap 4

BlockUI

Full Calendar

Slick Carousel

jQuery Circle Progress

Countup.js

Into.js

Grid Tables

Tree View

jQuery Cropper

Ladda Loading Buttons

GMaps

jVector Map

jQuery Bar Rating

Perfect Scrollbar

Sweet Alerts

Toastr

Data Tables

Forms

Datepicker

Date Range Picker

jQuery Validation

Select 2

Bootstrap Multiselect

ckEditor

Clipboard.js

Form Wizard

Input Mask

noUISlider

Textarea Autosize

Toggle Switch

Charts

ApexCharts

Chart.js

jQuery Sparklines

Layout Modifiers

App Container Modifiers ( .app-container )

Header ( .app-header )

Sidebar ( .app-sidebar )

App Container Modifiers ( `.app-container` )

Header ( `.app-header` )

Sidebar ( `.app-sidebar` )