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

Introduction

ArchitectUI ReactJS Version

ArchitectUI ReactJS is built on top of create-react-app and utilizes the latest versions of the React plugins included in the package.

Thanks to create-react-app, ArchitectUI comes bundled and pre-configured with Webpack and Babel so you don't have to lose time setting those up.

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

All styles are standardised using react-strap which is a Bootstrap 4 port for ReactJS.

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:3001

  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
assets base.scss is the main stylesheet that imports all other stylesheets for components, elements, layouts and widgets. Contains The Architect Framework source SCSS stylesheets files.
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.
reducers This folder holds all the theme's demo configuration. This can be removed if you don't want to use the theme configurator accessible from the yellow right bottom cog button.

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 Sortable Tree component, you can remove it's associated SCSS file by commenting out the import line like in the example below:


    // Calendar
    @import "architect/components/calendar/calendar";
    
    // Splitters
    @import "architect/components/splitters/splitters";
    
    // Tree View
    // @import "architect/components/tree-view/tree-view";
    
    // Tables
    @import "architect/components/tables/tables";
    
    // Icons
    @import "architect/components/icons/linearicons";
    @import "architect/components/icons/p7icons";
    
    // FORMS
    
    @import "architect/components/forms/datepicker/datepicker";
    @import "architect/components/forms/rangeslider/rangeslider";
    @import "architect/components/forms/multiselect/multiselect";
    @import "architect/components/forms/wysiwyg/wysiwyg";
    @import "architect/components/forms/toggle-switch/switch";
    @import "architect/components/forms/dropzone/dropzone";
    @import "architect/components/forms/typeahead/typeahead";

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

The React Components section contains the paths of SCSS files associated with each React component that's included in ArchitectUI.

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 & Colors

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 and respectively reactstrap (which is a React port of Bootstrap 4).

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:


    
    // Colors
    
    $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.

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

Solid Colors
Gradient Colors

Sidebar Background Images

You can define an image background that works together with the sidebar background colors to create beautiful app sidebar styles.

Inside the Sidebar component with CSS class app-sidebar you'll find another element with CSS class app-sidebar-bg. You can define a background iamge for this element, which will integrate perfectly with any other sidebar styles you have deifned

You can use one of the opacity CSS helpers integrated in ArchitectUI to create perfect effects. These opacity helpers can be found in /src/assets/utils/helpers/_opacity.scss. Try using small opacity for best effects, like opacity-05 for a 5% opacity.

Available Images

React Components

All React Components from ArchitectUI 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.

ReactStrap

Easy to use React Bootstrap 4 components

Block UI

Easy way to block the user from interacting with your UI

Calendar

An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach.

Slick Slider

Carousel component built with React. It is a react port of Slick Carousel

CountUp

A configurable React component wrapper around CountUp.js

Sticky Headers

A performant and comprehensive React sticky component

Layout Splitters

React layout vertical and horizontal splitter component

Sticky Elements

Sticky library for React.

Guided Tours

Tourist Guide into your React Components

Image Cropper

A responsive image cropping tool for React

Vector Maps

An svg map component built with and for React

Google Maps

Google map library for react that allows rendering components as markers

Metis Menu

A ready / simple to use, highly customizable, updateable, ajax supported, animated and material designed menu component for React

Visibiliy Sensor

Sensor component for React that notifies you when it goes in or out of the window viewport.

Rodal Modals

A React modal with animations

Sweet Alerts Notifications

Declarative SweetAlert in React

Toastify Notifications

React notification made easy

Dynamic Pagination

React dynamic pagination component

Advanced Progress Bars

Renders a svg circle + progress, it just works

Rating

A rating react component with custom symbols.

Perfect Scrollbar

A react wrapper for perfect-scrollbar

Data Tables

Lightweight, fast and extendable datagrid built for React

Filtrable Tables

Next Generation of react-bootstrap-table

Responsive Tabs

Responsive React tabs with beautiful animations

Sortable Tree

Drag-and-drop sortable component for nested data and hierarchies

Hamburger Buttons

React component for Jonathan Suh's hamburguers: https://jonsuh.com/hamburgers

Motion Drawer

Navigation drawer built with the awesome react-motion

Timeline

Vertical timeline for React.js

Icons
Flag Icons

Beautiful flag icons for usage in React.js apps

FontAwesome

Font Awesome 5 React component

Ionicons

React Ionicon component

Charts
ChartJS 2

React wrapper for Chart.js

justGage

Justgage inspired .svg gauge for React

Liquid Gauge

React Liquid Gauge component

Sparklines

Beautiful and expressive Sparklines React component

Recharts

Redefined chart library built with React and D3

Forms
Clipboard

Copy-to-clipboard React component

Colorpicker

Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

Datepicker

A simple and reusable datepicker component for React

React Widgets

Dropdown, Combobox, Select List, Multiselect, Dropdown Select, Numberpicker

Number Input

Numeric input component for React

Range Slider

Slider UI component for React

Dropzone

Simple HTML5 drag-drop zone with React

React Select

The Select Component for React.js

Input Mask

Input masking component for React. Made with attention to UX.

Textarea Autosize

React component which automatically resizes textarea as content changes

Toggle Switch

A draggable toggle-switch component for React

Typeahead

React typeahead with Bootstrap styling

DraftJs

A Wysiwyg editor build on top of ReactJS and DraftJS

ckEditor

React component for CKEditor

Availity Forms Validations

Easy to use React validation components compatible for reactstrap.

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-sidebar Sidebar ( .app-sidebar ) Makes the Sidebar Component positioned top and left fixed/sticky.
closed-sidebar Sidebar ( .app-sidebar ) Makes the Sidebar Component initially closed, with only the icons available. If the fixed-sidebar is active the Sidebar will open as an overlay over the main content.

If the Sidebar is static and not fixed, it will push the main content area to the right, on hover.

fixed-footer Footer ( .app-footer ) Makes the Footer Component positioned bottom fixed/sticky.
body-tabs-shadow-btn Page Section Navigation ( .body-tabs-layout ) When adding the body-tabs-shadow-btn CSS helper to the app-container element, the pages section sub-navigation menu will transform the tabs menu animated lines to animated pills.
app-theme-* Main Section There are two subtitle color schemes available on top of all the color themes for sidebar/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.

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

React Routing & Navigation

ArchitectUI uses the React router for navigation: react-router-dom. The Sidebar component main naigation uses the react-metismenu component.

The Demo navigation arrays are defined under /src/Layout/AppNav/NavItems.js


    
    export const MainNav = [{
        icon: 'pe-7s-rocket',
        label: 'Dashboards',
        content: [
            {
                label: 'Commerce',
                to: '#/dashboards/commerce',
            },
            {
                label: 'Analytics',
                to: '#/dashboards/analytics',
            },
            {
                label: 'Sales',
                to: '#/dashboards/sales',
            },
            {
                label: 'CRM',
                to: '#/dashboards/crm',
            }
        ],
    },
        {
            icon: 'pe-7s-browser',
            label: 'Pages',
            content: [
                {
                    label: 'Login',
                    to: '#/pages-login',
                },
                {
                    label: 'Login Boxed',
                    to: '#/pages-login-boxed',
                },
                {
                    label: 'Register',
                    to: '#/pages-register',
                },
                {
                    label: 'Register Boxed',
                    to: '#/pages-register-boxed',
                },
                {
                    label: 'Forgot Password',
                    to: '#/pages-forgot-password',
                },
                {
                    label: 'Forgot Password Boxed',
                    to: '#/pages-forgot-password-boxed',
                },
            ],
        },
        {
            icon: 'pe-7s-plugin',
            label: 'Applications',
            content: [
                {
                    label: 'Mailbox',
                    to: '#/apps/mailbox',
                },
                {
                    label: 'Chat',
                    to: '#/apps/chat',
                },
                {
                    label: 'Split Layout',
                    to: '#/apps/split-layout',
                },
                {
                    label: 'FAQ Section',
                    to: '#/apps/faq-section',
                },
            ],
        },
    ];
    export const FormsNav = [
        {
            icon: 'pe-7s-light',
            label: 'Elements',
            content: [
                {
                    label: 'Controls',
                    to: '#/components/forms-controls',
                },
                {
                    label: 'Layouts',
                    to: '#/components/forms-layouts',
                },
                {
                    label: 'Validation',
                    to: '#/components/forms-validation',
                },
                {
                    label: 'Wizard',
                    to: '#/components/forms-wizard',
                },
                {
                    label: 'Sticky Form Headers',
                    to: '#/components/forms-sticky-headers',
                },
            ],
        },
        {
            icon: 'pe-7s-joy',
            label: 'Widgets',
            content: [
                {
                    label: 'Datepicker',
                    to: '#/components/forms-datepicker',
                },
                {
                    label: 'Range Slider',
                    to: '#/components/forms-range-slider',
                },
                {
                    label: 'Input Selects',
                    to: '#/components/forms-input-selects',
                },
                {
                    label: 'Toggle Switch',
                    to: '#/components/forms-toggle-switch',
                },
                {
                    label: 'Dropdowns',
                    to: '#/components/forms-dropdown',
                },
                {
                    label: 'WYSIWYG Editor',
                    to: '#/components/forms-wysiwyg-editor',
                },
                {
                    label: 'Input Mask',
                    to: '#/components/forms-input-mask',
                },
                {
                    label: 'Typeahead',
                    to: '#/components/forms-typeahead',
                },
                {
                    label: 'Clipboard',
                    to: '#/components/forms-clipboard',
                },
                {
                    label: 'Textarea Autosize',
                    to: '#/components/forms-textarea-autosize',
                },
                {
                    label: 'Number Spinners',
                    to: '#/components/forms-numberspinners',
                },
                {
                    label: 'Color Picker',
                    to: '#/components/forms-color-picker',
                },
                {
                    label: 'Dropzone',
                    to: '#/components/forms-dropzone',
                },
            ],
        },
    
    ];
    export const WidgetsNav = [
        {
            icon: 'pe-7s-graph2',
            label: 'Chart Boxes',
            content: [
                {
                    label: 'Variation 1',
                    to: '#/widgets/chart-boxes',
                },
                {
                    label: 'Variation 2',
                    to: '#/widgets/chart-boxes-2',
                },
                {
                    label: 'Variation 3',
                    to: '#/widgets/chart-boxes-3',
                },
            ]
        },
        {
            icon: 'pe-7s-id',
            label: 'Profile Boxes',
            to: '#/widgets/profile-boxes',
        },
        {
            icon: 'pe-7s-display1',
            label: 'Content Boxes',
            to: '#/widgets/content-boxes',
        },
    ];

The navigation array constants are imported in /src/Layout/AppNav/VerticalNavWrapper.js


    import React, {Component, Fragment} from 'react';
    import {withRouter} from 'react-router-dom';
    
    import MetisMenu from 'react-metismenu';
    
    import {MainNav, ComponentsNav, FormsNav, WidgetsNav, ChartsNav} from './NavItems';
    
    class Nav extends Component {
    
        state = {};
    
        render() {
            return (
                
                    
Menu
UI Components
Dashboard Widgets
Forms
Charts
); } isPathActive(path) { return this.props.location.pathname.startsWith(path); } } export default withRouter(Nav);

We'll take as an example AppMain component, located in /src/Layout/AppMain/index.js


    
    import React, {Fragment} from 'react';
    import {Route} from 'react-router-dom';
    
    // Demo Sections
    
    import Components from '../../DemoPages/Components/';
    import Elements from '../../DemoPages/Elements/';
    import Widgets from '../../DemoPages/Widgets/';
    
    
    const AppMain = () => {
    
        return (
            
                
                
                
    
            
        )
    };
    
    export default AppMain;