#### Keen - The Ultimate Multi-Demo Bootstrap Admin Theme

#### The most complete UI/UX template solution for today's web projects of any size

## Global SASS

The Global SASS contains Keen's code framework and base components. The global scope is available for all demos.

### Global SASS Mixins

When you customize or code in Keen's SASS environment you can use Keen's globally available base mixins. All available mixins can be found here: `[root]/theme/default/src/theme/framework/components/base/_mixins.scss`

### Global SASS Functions

You can use Keen's globally available SASS functions in your custom codes. All available functions can be found here: `[root]/theme/default/src/theme/framework/lib/_functions.scss`

Keen uses nested map list to structure the config options with special custom function `kt-get()` to access the nested config structure. You can access to an option by using `kt-get()` function as shown below:

    transition: kt-get($kt-aside-config, base, minimize, transition);

### Global SASS Config

The demo's `style.scss` includes the entire framework stylesheets and compiles with its own layout and global settings that allows overriding Keen frameworks base global settings. Thus each demo can customize and change the look and feel of the the entire theme components by overriding global config `[root]/theme/default/src/theme/framework/_config.scss` in the demo's config `[root]/theme/default/src/theme/demo/[demo_id]/sass/_config.scss`.

    //
    // Global Framework Config
    //

    // Framework functions
    @import "../../../../../framework/lib/functions";

    // Framework mixins
    @import "../../../../../framework/lib/mixins";
    @import "../../../../../framework/components/vendors/perfect-scrollbar/mixins";
    @import "../../../../../framework/components/foundation/burger-icon/mixins";
    @import "../../../../../framework/components/foundation/menu/menu-horizontal-mixins";
    @import "../../../../../framework/components/foundation/menu/menu-vertical-mixins";
    @import "../../../../../framework/components/foundation/offcanvas/mixins";
    @import "../../../../../framework/components/foundation/indicator/spinner/mixins";

    // Theme mixins
    @import "components/base/mixins";

    // Layout Breakpoints(bootstrap responsive breakpoints)
    // Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries.
    $kt-media-breakpoints: (
        // Extra small screen / phone
        xs: 0,

        // Small screen / phone
        sm: 576px,

        // Medium screen / tablet
        md: 768px,

        // Large screen / desktop
        lg: 1024px, //1024px,

        // Extra large screen / wide desktop
        xl: 1399px
    ) !default;

    // Global rounded border mode
    $kt-rounded: true !default;

    // Border Radius
    $kt-border-radius: 4px !default;

    // Core icon codes(lineawesome icons: https://icons8.com/line-awesome)
    $kt-action-icons: (
        close: '\f191',
        down: '\f110',
        up: '\f113',
        left: '\f111',
        right: '\f112',
        plus: '\f2c2',
        minus: '\f28e'
    ) !default;

    // Elevate shadow
    $kt-elevate-shadow: 0px 0px 13px 0px rgba(82,63,105,0.05);
    $kt-elevate-shadow-2: 0px 0px 13px 0px rgba(82,63,105,0.1);

    // Dropdown shadow
    $kt-dropdown-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15);

    // Custom scrollbar color
    $kt-scroll-color: darken(#ebedf2, 6%);

    // Transition
    $kt-transition: all 0.3s !default;

    // Modal Z-index
    $kt-modal-zindex: 1050 !default;

    // dropdown Z-index
    $kt-dropdown-zindex: 95 !default;

    // State Colors
    // Brand colors
    $kt-brand-color: #536be2 !default;
    $kt-brand-inverse-color: #ffffff !default;

    // State colors
    $kt-state-colors: (
        // Keen states
        brand: (
            base: $kt-brand-color,
            inverse: $kt-brand-inverse-color
        ),
        metal: (
            base: #d3dae6,
            inverse: #586272
        ),
        light: (
            base: #ffffff,
            inverse: #282a3c
        ),
        dark: (
            base: lighten(#4c467a, 12%),
            inverse: #ffffff
        ),
        accent: (
            base: #00c5dc,
            inverse: #ffffff
        ),
        focus: (
            base: #9816f4,
            inverse: #ffffff
        ),

        // Bootstrap states
        primary: (
            base: #5867dd,
            inverse: #ffffff
        ),
        success: (
            base: #1dc9b7,
            inverse: #ffffff
        ),
        info: (
            base: #5578eb,
            inverse: #ffffff
        ),
        warning: (
            base: #ffb822,
            inverse: #111111
        ),
        danger: (
            base: #fd397a,
            inverse: #ffffff
        )
    )!default;

    // Base colors
    $kt-base-colors: (
        label: (
            1: #c5cbe3,
            2: #a1a8c3,
            3: #646c9a,
            4: #3d4465
        ),
        shape: (
            1: #f0f3ff,
            2: #e8ecfa,
            3: #93a2dd,
            4: #646c9a
        ),
        grey: (
            1: #f7f8fa, //#f4f5f8
            2: #ebedf2,
            3: darken(#ebedf2, 3%),
            4: darken(#ebedf2, 6%)
        )
    ) !default;

    // Root Font Settings
    $kt-font-families: (
        regular: 'Poppins',
        heading: 'Poppins'
    ) !default;

    // Root Font Settings
    $kt-font-size: (
        size: (
            desktop: 13px,
            tablet: 12px,
            mobile: 12px
        ),
        weight: 300
    ) !default;

    // General Link Settings
    $kt-font-color: (
        text: #646c9a,
        link: (
            default: kt-state-color(brand),
            hover: darken(kt-state-color(brand), 6%)
        )
    ) !default;

    // Portlet settings
    $kt-portlet: (
        min-height: (
            default: (
                desktop: 60px,
                mobile: 50px
            ),
            lg: (
                desktop: 80px,
                mobile: 60px
            ),
            xl: (
                desktop: 100px,
                mobile: 80px
            )
        ),
        space: (
            desktop: 25px,
            mobile: 15px
        ),
        bottom-space: (
            desktop: 20px,
            mobile: 10px
        ),
        border-color: kt-base-color(grey, 2),
        bg-color: #ffffff,
        shadow: 0px 0px 30px 0px rgba(82,63,105,0.05)
    );

Variable | Description
--- | ---
`$kt-media-breakpoints` | Layout Breakpoints(bootstrap responsive breakpoints). Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries
Config
    $kt-media-breakpoints: (
        // Extra small screen / phone
        xs: 0,

        // Small screen / phone
        sm: 576px,

        // Medium screen / tablet
        md: 768px,

        // Large screen / desktop
        lg: 1024px, //1024px,

        // Extra large screen / wide desktop
        xl: 1399px
    ) !default;
`$kt-rounded` | Set global rounded border mode enable/disable.
Config
    $kt-rounded: true !default;
`$kt-border-radius` | Set global border radius size.
Config
    $kt-border-radius: 4px !default;
`$kt-action-icons` | Core icon codes(lineawesome icons: https://icons8.com/line-awesome)
Config
    $kt-action-icons: (
        close: '\f191',
        down: '\f110',
        up: '\f113',
        left: '\f111',
        right: '\f112',
        plus: '\f2c2',
        minus: '\f28e'
    ) !default;
`$kt-elevate-shadow` | Elevate shadow CSS values
Config
    $kt-elevate-shadow: 0px 0px 13px 0px rgba(82,63,105,0.05);
    $kt-elevate-shadow-2: 0px 0px 13px 0px rgba(82,63,105,0.1);
`$kt-dropdown-shadow` | Dropdown shadow CSS values
Config
    $kt-dropdown-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15);
`$kt-scroll-color` | Custom scrollbar color
Config
    $kt-scroll-color: darken(#ebedf2, 6%);
`$kt-transition` | Set global transition.
Config
    $kt-transition: all 0.3s !default;
`$kt-modal-zindex` | Set global modal z-index.
Config
    $kt-modal-zindex: 1050 !default;
`$kt-dropdown-zindex` | Set global dropdown z-index.
Config
    $kt-dropdown-zindex: 95 !default;
`$kt-brand-color` | Set global brand color.
Config
    $kt-brand-color: #536be2 !default;
`$kt-brand-inverse-color` | Set global brand inverse color.
Config
    $kt-brand-inverse-color: #ffffff !default;
`$kt-state-colors` | State colors of Keen and Bootstrap.
Config
    $kt-state-colors: (
        // Keen states
        brand: (
            base: $kt-brand-color,
            inverse: $kt-brand-inverse-color
        ),
        metal: (
            base: #d3dae6,
            inverse: #586272
        ),
        light: (
            base: #ffffff,
            inverse: #282a3c
        ),
        dark: (
            base: lighten(#4c467a, 12%),
            inverse: #ffffff
        ),
        accent: (
            base: #00c5dc,
            inverse: #ffffff
        ),
        focus: (
            base: #9816f4,
            inverse: #ffffff
        ),

        // Bootstrap states
        primary: (
            base: #5867dd,
            inverse: #ffffff
        ),
        success: (
            base: #1dc9b7,
            inverse: #ffffff
        ),
        info: (
            base: #5578eb,
            inverse: #ffffff
        ),
        warning: (
            base: #ffb822,
            inverse: #111111
        ),
        danger: (
            base: #fd397a,
            inverse: #ffffff
        )
    )!default;
`$kt-base-colors` | Base colors.
Config
    $kt-base-colors: (
        label: (
            1: #c5cbe3,
            2: #a1a8c3,
            3: #646c9a,
            4: #3d4465
        ),
        shape: (
            1: #f0f3ff,
            2: #e8ecfa,
            3: #93a2dd,
            4: #646c9a
        ),
        grey: (
            1: #f7f8fa, //#f4f5f8
            2: #ebedf2,
            3: darken(#ebedf2, 3%),
            4: darken(#ebedf2, 6%)
        )
    ) !default;
`$kt-font-families` | Root font family list.
Config
    $kt-font-families: (
        regular: 'Poppins',
        heading: 'Poppins'
    ) !default;
`$kt-font-size` | Root font settings.
Config
    $kt-font-size: (
        size: (
            desktop: 13px,
            tablet: 12px,
            mobile: 12px
        ),
        weight: 300
    ) !default;
`$kt-font-color` | General link font settings.
Config
    $kt-font-color: (
        text: #646c9a,
        link: (
            default: kt-state-color(brand),
            hover: darken(kt-state-color(brand), 6%)
        )
    ) !default;
`$kt-portlet` | Portlet settings.
Config
    $kt-portlet: (
        min-height: (
            default: (
                desktop: 60px,
                mobile: 50px
            ),
            lg: (
                desktop: 80px,
                mobile: 60px
            ),
            xl: (
                desktop: 100px,
                mobile: 80px
            )
        ),
        space: (
            desktop: 25px,
            mobile: 15px
        ),
        bottom-space: (
            desktop: 20px,
            mobile: 10px
        ),
        border-color: kt-base-color(grey, 2),
        bg-color: #ffffff,
        shadow: 0px 0px 30px 0px rgba(82,63,105,0.05)
    );

### Keen’s Key Features

Keen empowers your project with virtually limitless array of options
to create endless unique projects.

- Based On Bootstrap 4.x
- Multi-Demo Concept
- Enterprise Ready Architect
- Integrated Build Tools: Gulp, NPM, Yarn, SASS
- Full RTL Support
- Included Classic(without build tool) Version
- Enterprise Ready Core Framework
- Full SASS Support
- Re-Usable Component System
- And many more...

> We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.

> Sean, Keenthemes Co-Author