File Structure

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 5 related stylesheets can be found under /components/bootstrap5/.

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

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

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.

Icons

Charts

Forms

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 )

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:

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:

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;