### Introduction

SPIN Admin/Dashboard Theme with a minimalist design and innovative Dark UI will let you build an amazing and powerful application with great UI. Perfectly designed for large scale applications, with detailed step by step documentation.

It is built based on the latest standards and recommendations. It is powered by Bootstrap framework 3+, which is currently one of the most popular frameworks in the world.

We keep working hard on it, releasing new versions in short production cycles. If you have any questions, please do not hesitate and just write to us: tomasz.owczarczyk@me.com

### Package

This package has 3 different versions. Descriptions of each can be found below:

HTML/JQuery/JS
  Available It is great for programming languages such as PHP, Ruby and others. Also available version Jekyll with Gulp. Jump ↓
Angular2
  Soon Written in TypeScript, with many Components and Directives that will boost your productivity.
MVC5
  Soon An adjusted version for ASP.NET MVC5+. Great for both new and existing Visual Studio Projects.
React
  Available Provides a set of flexible React Components which will add great functionality for your App. Many examples included. Jump →
Sketch Files
  Soon -
Meteor
  Soon -
Photoshop Files
  Available More than 30 views in .psd fully built on layers which will allow you to quickly make changes / adjustments / features and also build new views.
SCSS Styles
  Available Styling of the app is enhanced by the SCSS language, which makes maintenance clean and painless.

##### Structure

The application structure consists of two main directories - `/src` and `/serve`. `/src` provides all the source files, which can be editted at will. `/serve` contains the built application ready to deploy on any favourite host.

    app/
      ├── bower.json
      ├── gulpfile.js
      ├── package.json
      └── src/                     Core Pages with Includes
          ├── index.html           Start Page
          ├── assets/              SCSS / JavaScript / Images etc...
          │   ├── images/
          │   ├── javascript/
          │   ├── scss/
          │   ├── stylesheets/
          │   └── vendor/
          ├── apps/                Below are directories with the HTML files
          ├── docs/
          ├── forms/
          ├── graphs/
          ├── grids/
          ├── icon/
          ├── grids/
          ├── interface/
          ├── layouts/
          ├── pages/
          ├── panels/
          ├── sidebars/
          ├── start/
          ├── tables/
          ├── versions/
          └── widgets/

##### Main Elements

"SPIN Admin/Dashboard Theme" is a constant and consistent structure for all versions of applications that include:

1. Sidebar Menu on the left side of the screen.
2. Navbar Part of the menu which is always at the top.
3. Content The main section of the appllication displaying page contents.
   1. Sub-Navbar An optional element below the "Navbar" which contains Header and Breadcrumbs.

- Footer Credits at the bottom of the page.
General Structure of the whole App

##### Layout Structure

Page `<head>` contains Metadata, CSS files.

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <!-- Enable responsiveness on mobile devices-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

        <title>SPIN Admin/Dashboard Theme</title>

        <!--START Loader -->
        ...
        <!--END Loader-->

        <!-- CSS -->
        <!-- Bower Libraries Styles -->
        <link rel="stylesheet" href="assets/vendor/css/lib.min.css">

        <!-- SCSS Output -->
        <!-- build:css assets/stylesheets/app.min.e0bb64e7.css -->
        <link rel="stylesheet" href="assets/stylesheets/bootstrap.css">
        <link rel="stylesheet" href="assets/stylesheets/app.css">
        <link rel="stylesheet" href="assets/stylesheets/plugins.css">
        <!-- endbuild -->

        <!-- START Favicon -->
        ...
        <!-- END Favicon -->

    </head>

##### Sidebar

Which is the menu on the left side of the page.

    <!-- START Sidebars -->
    <aside class="navbar-default sidebar">
        <div class="sidebar-overlay-head">
            <img src="assets/images/spin-logo-inverted.png" alt="Logo" />
            <a href="javascript:void(0)" class="sidebar-switch action-sidebar-close">
                <i class="fa fa-times"></i>
            </a>
        </div>
        <div class="sidebar-logo">
            <img class="logo-default" src="assets/images/spin-logo-big-inverse-@2X.png" alt="Logo" width="53">
            <img class="logo-slim" src="assets/images/spin-logo-slim.png" alt="Logo">
        </div>
        <div class="sidebar-content">

            <!-- YOUR CONTENT SIDEBAR -->

        </div>
    </aside>
    <!-- END Sidebars -->

Position of Sidebar

##### Navbar

Part of the menu which is always at the top of the page.

    <!-- START Navbar -->
    <div class="navbar-inverse navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- START Logo Area -->
            <div class="navbar-header">

                <!-- YOUR LOGO OR AVATAR -->

            </div>
            <!-- END Logo Area -->
            <div class="collapse navbar-collapse" id="navbar">
                <!-- START Left Side Navbar -->
                <ul class="nav navbar-nav navbar-left clearfix yamm">

                    <!-- YOUR LEFT SIDE CONTENT -->

                </ul>
                <!-- END Left Side Navbar -->
                <!-- START Right Side Navbar -->
                <ul class="nav navbar-nav navbar-right">

                    <!-- YOUR RIGHT SIDE CONTENT -->

                </ul>
                <!-- END Right Side Navbar -->
            </div>
        </div>
        </div>
    <!-- END Navbar -->

Position of Navbar

##### Sub-Navbar

Below "Navbar" is a part which includes header and breacrumbs.

    <!-- START Sub-Navbar -->
    <div class="sub-navbar sub-navbar__header-breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 sub-navbar-column">
                    <div class="sub-navbar-header">

                        <!-- YOUR HEADER -->

                    </div>
                    <ol class="breadcrumb navbar-text navbar-right no-bg">

                        <!-- YOUR BREADCRUMB -->

                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- END Sub-Navbar -->

Position of Sub-Navbar

##### Content

The main part of the application where the page contents are displayed.

    <!-- START Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-12">

                <!-- YOUR CONTENT -->

            </div>
        </div>
    </div>
    <!-- END Content -->

Position of Content

##### Footer

Credits at the bottom of the page.

    <!-- START Footer -->
    <footer>
        <div class="container-fluid">
            <p class="text-gray-dark">

                <!-- YOUR CONTENT FOOTER -->

            </p>
        </div>
    </footer>
    <!-- END Footer -->

Position of Footer

##### Available Options

SPIN provides few options for changing the layout of your application. Those are:

Change for | Name | HTML Modifier Class | Example
--- | --- | --- | ---
Sidebar | Default | Empty | Live
Sidebar | Big Icons | `<body class="sidebar-big-icons">` | Live
Sidebar | Slim | `<body class="sidebar-slim">` | Live
Sidebar | Disabled | `<body class="sidebar-disabled">` | Live
Navbar | Default | Empty | Live
Navbar | Fixed | `<body class="navbar-fixed">` | Live
Navbar | Disabled | `<body class="navbar-disabled">` | Live
Sub-Navbar | Header | It should be the first element in the `.content` component:
    <div class="sub-navbar sub-navbar__header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header m-t-0">
                        <h3 class="m-t-0">Page Title</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
| Live
Sub-Navbar | Sub-Navbar | It should be the first element in the `.content` element:
    <div class="sub-navbar sub-navbar__header-breadcrumbs">
         <div class="container">
             <div class="row">
                 <div class="col-lg-12 sub-navbar-column">
                     <div class="sub-navbar-header">
                         <h3>Activity Team</h3>
                     </div>
                     <ol class="breadcrumb">
                         <!-- Your Bootstrap Breadcrumb Items here -->
                     </ol>
                 </div>
             </div>
         </div>
     </div>
| Live
Content | Container (Default) |
    <div class="content">
        <!-- Optional Sub Navbar here -->
        <div class="container">
            <!-- Page Content Here -->
        </div>
    </div>
| Live
Content | Container-Fluid |
    <div class="content">
        <!-- Optional Sub Navbar here -->
        <div class="container-fluid">
            <!-- Page Content Here -->
        </div>
    </div>
| Live
Footer | Default | Empty | Live
Footer | Fixed | `<body class="footer-fixed">` | Live
Footer | Disabled | `<body class="footer-disabled">` | Live
Custom | Boxed-Layout | Containers in Navbar and Footer Elements should be static by using the `.container` class. The Content Container should be set to `.container-fluid`. Finally `.boxed-layout` should be added to `<body>` element classes. | Live
Custom | Container (Static Width) | To use this layout you should place standard `.container`s in Navbar, Footer and Content Elements. In addition the sidebar should be disabled (`.sidebar-disabled` in `<body>` class), the navigation is then handled by the menu in the Navbar. | Live

### Install

You can run the package like any typical Bower/Gulp application. You have 2 main build options available - `Development` and `Distribution`, both described below.

##### Requirements

To run the package you need NodeJs >= 5.x installed on your system. Additionally you need `Bower` and `Gulp` packages globally installed, available from your command line.

##### Installation Linux/OSX

If you have NodeJs, Bower and Gulp already installed, skip to point 4

1. Install NodeJs (>= 5.x) from https://nodejs.org/
2. Install `Bower` package manager. In the terminal type `sudo npm install -g bower` hit `Enter` and enter your administrator password after.
3. Install `Gulp` build tool. Just like in the point above run `sudo npm install -g gulp` and approve the installation with the admin password.
4. Extract / Clone the source files to a directory on your target drive.
5. Run the terminal and navigate to the extracted package.
6. Run `npm install` and wait for the `NodeJs` packages to be installed.
7. Run `bower install` and wait for the `Bower` packages to be installed.

8. Run `gulp` to start a Development version. Sources can be changed in the `/src` directory, with auto reload enabled.

   Run `gulp build` to create a Distribution package located in `/dist` directory.

##### Installation Windows

Windows installation is almost identical. Just dont type `sudo` in the command line before installing `Bower` and `Gulp` as they will be installed in the current user space.

### Styles

All style changes, fixes and improvements made for SPIN can be found in the `assets/scss/app` directory. Customized styles for 3rd party plugins should be in separate plugin directories in `assets/scss/plugins` folder.

##### Using Styles

All original SCSS files used in the project, are ready for use and modification.

    src/assets/scss/
       ├── app/                    Application styles
       │      ├── helpers.scss     Various flexible utility classes
       │      ├── layout.scss      Positioning of the main layout elements
       │      ├── sidebars.scss    Left and right sidebar styling
       │      ├── variables.scss   Sizes, colors and other variables used in the app
       |      └── app.scss         Links all the above files
       ├── bootstrap/              Customized bootstrap
       │      ├── mixins.scss      Bootstrap modifed mixins
       │      ├── variables.scss   Adjusted bootstrap variables
       |      └── bootstrap.scss   Actual bootstrap customizations
       └── plugins/                Third party plugins styles
              └── (...)

Attention! Please keep in mind that the main styles of Bootstrap are overwritten in the `bootstrap/mixins.scss` and `bootstrap/bootstrap.scss`. Never change styles in the `_bower_components/` folder.

##### Change Styles

If you want to start changing styles of the application, you should start from the two main .scss files which are listed below:

The core variables are defined in:

- `src/sass/app/variables.scss` Main App Variables
- `src/sass/bootstrap/variables.scss` Bootstrap Override Variables

More specific variables can be found in the beginning of each *.scss file.

##### Adding Plugins

Below are some important information on how and where to add .scss files for plugins:

1. The plugins SCSS files should be placed in `/src/assets/scss/plugins/plugin-name/plugin-name-file.scss`
2. The compiled CSS should also be placed in `/src/assets/scss/plugins/plugin-name/plugin-name-file.css`
3. Every plugin style should be linked in the `/src/assets/scss/plugins/plugins.scss` file (both `*.scss` and `*.css` files) i.e. `@import './plugin-name/plugin-file';`

### Helpers

With the help of these helpers you can create unlimited variations of a lot of new UI in a simple way.

##### Text

name | where i can use | description
--- | --- | ---
`.text-gray-lighter` | Typography | Changes the color of in the text
`.text-gray-light` | Typography | Changes the color of in the text
`.text-gray` | Typography | Changes the color of in the text
`.text-gray-darker` | Typography | Changes the color of in the text
`.text-gray-dark` | Typography | Changes the color of in the text
`.text-muted` | Typography | Changes the color of in the text
`.text-primary` | Typography | Changes the color of in the text
`.text-info` | Typography | Changes the color of in the text
`.text-success` | Typography | Changes the color of in the text
`.text-warning` | Typography | Changes the color of in the text
`.text-danger` | Typography | Changes the color of in the text
`.text-cerulan` | Typography | Changes the color of in the text
`.text-curious-blue` | Typography | Changes the color of in the text
`.text-endaveour` | Typography | Changes the color of in the text
`.text-minsk` | Typography | Changes the color of in the text
`.text-eminence` | Typography | Changes the color of in the text
`.text-violet-eggplant` | Typography | Changes the color of in the text
`.text-mint-green` | Typography | Changes the color of in the text
`.text-aquamarine` | Typography | Changes the color of in the text
`.text-malibu` | Typography | Changes the color of in the text
`.text-dodger-blue` | Typography | Changes the color of in the text
`.text-heliotrope` | Typography | Changes the color of in the text
`.text-perfume` | Typography | Changes the color of in the text

##### Backgrounds

name | where i can use | description
--- | --- | ---
`.bg-gray-lighter` | Background | Replaces color in the Background
`.bg-gray-light` | Background | Replaces color in the Background
`.bg-gray` | Background | Replaces color in the Background
`.bg-gray-darker` | Background | Replaces color in the Background
`.bg-gray-dark` | Background | Replaces color in the Background
`.bg-muted` | Background | Replaces color in the Background
`.bg-primary` | Background | Replaces color in the Background
`.bg-info` | Background | Replaces color in the Background
`.bg-success` | Background | Replaces color in the Background
`.bg-warning` | Background | Replaces color in the Background
`.bg-danger` | Background | Replaces color in the Background
`.bg-cerulan` | Background | Replaces color in the Background
`.bg-curious-blue` | Background | Replaces color in the Background
`.bg-endaveour` | Background | Replaces color in the Background
`.bg-minsk` | Background | Replaces color in the Background
`.bg-eminence` | Background | Replaces color in the Background
`.bg-violet-eggplant` | Background | Replaces color in the Background
`.bg-mint-green` | Background | Replaces color in the Background
`.bg-aquamarine` | Background | Replaces color in the Background
`.bg-malibu` | Background | Replaces color in the Background
`.bg-dodger-blue` | Background | Replaces color in the Background
`.bg-heliotrope` | Background | Replaces color in the Background
`.bg-perfume` | Background | Replaces color in the Background

##### Borders Colors All, Top, Right, Bottom & Left

name | where i can use | description
--- | --- | ---
`.b-gray-lighter` | Border (All Sides) | Replaced color border on left side
`.b-gray-light` | Border (All Sides) | Replaced color border on left side
`.b-gray` | Border (All Sides) | Replaced color border on left side
`.b-gray-darker` | Border (All Sides) | Replaced color border on left side
`.b-gray-dark` | Border (All Sides) | Replaced color border on left side
`.b-muted` | Border (All Sides) | Replaced color border on left side
`.b-primary` | Border (All Sides) | Replaced color border on left side
`.b-info` | Border (All Sides) | Replaced color border on left side
`.b-success` | Border (All Sides) | Replaced color border on left side
`.b-warning` | Border (All Sides) | Replaced color border on left side
`.b-danger` | Border (All Sides) | Replaced color border on left side
`.b-cerulan` | Border (All Sides) | Replaced color border on left side
`.b-curious-blue` | Border (All Sides) | Replaced color border on left side
`.b-endaveour` | Border (All Sides) | Replaced color border on left side
`.b-minsk` | Border (All Sides) | Replaced color border on left side
`.b-eminence` | Border (All Sides) | Replaced color border on left side
`.b-violet-eggplant` | Border (All Sides) | Replaced color border on left side
`.b-mint-green` | Border (All Sides) | Replaced color border on left side
`.b-aquamarine` | Border (All Sides) | Replaced color border on left side
`.b-malibu` | Border (All Sides) | Replaced color border on left side
`.b-dodger-blue` | Border (All Sides) | Replaced color border on left side
`.b-heliotrope` | Border (All Sides) | Replaced color border on left side
`.b-perfume` | Border (All Sides) | Replaced color border on left side

name | where i can use | description
--- | --- | ---
`.b-t-gray-lighter` | Border (Top Side) | Replaced color border on top side
`.b-t-gray-light` | Border (Top Side) | Replaced color border on top side
`.b-t-gray` | Border (Top Side) | Replaced color border on top side
`.b-t-gray-darker` | Border (Top Side) | Replaced color border on top side
`.b-t-gray-dark` | Border (Top Side) | Replaced color border on top side
`.b-t-muted` | Border (Top Side) | Replaced color border on top side
`.b-t-primary` | Border (Top Side) | Replaced color border on top side
`.b-t-info` | Border (Top Side) | Replaced color border on top side
`.b-t-success` | Border (Top Side) | Replaced color border on top side
`.b-t-warning` | Border (Top Side) | Replaced color border on top side
`.b-t-danger` | Border (Top Side) | Replaced color border on top side
`.b-t-cerulan` | Border (Top Side) | Replaced color border on top side
`.b-t-curious-blue` | Border (Top Side) | Replaced color border on top side
`.b-t-endaveour` | Border (Top Side) | Replaced color border on top side
`.b-t-minsk` | Border (Top Side) | Replaced color border on top side
`.b-t-eminence` | Border (Top Side) | Replaced color border on top side
`.b-t-violet-eggplant` | Border (Top Side) | Replaced color border on top side
`.b-t-mint-green` | Border (Top Side) | Replaced color border on top side
`.b-t-aquamarine` | Border (Top Side) | Replaced color border on top side
`.b-t-malibu` | Border (Top Side) | Replaced color border on top side
`.b-t-dodger-blue` | Border (Top Side) | Replaced color border on top side
`.b-t-heliotrope` | Border (Top Side) | Replaced color border on top side
`.b-t-perfume` | Border (Top Side) | Replaced color border on top side

name | where i can use | description
--- | --- | ---
`.b-r-gray-lighter` | Border (Right Side) | Replaced color border on right side
`.b-r-gray-light` | Border (Right Side) | Replaced color border on right side
`.b-r-gray` | Border (Right Side) | Replaced color border on right side
`.b-r-gray-darker` | Border (Right Side) | Replaced color border on right side
`.b-r-gray-dark` | Border (Right Side) | Replaced color border on right side
`.b-r-muted` | Border (Right Side) | Replaced color border on right side
`.b-r-primary` | Border (Right Side) | Replaced color border on right side
`.b-r-info` | Border (Right Side) | Replaced color border on right side
`.b-r-success` | Border (Right Side) | Replaced color border on right side
`.b-r-warning` | Border (Right Side) | Replaced color border on right side
`.b-r-danger` | Border (Right Side) | Replaced color border on right side
`.b-r-cerulan` | Border (Right Side) | Replaced color border on right side
`.b-r-curious-blue` | Border (Right Side) | Replaced color border on right side
`.b-r-endaveour` | Border (Right Side) | Replaced color border on right side
`.b-r-minsk` | Border (Right Side) | Replaced color border on right side
`.b-r-eminence` | Border (Right Side) | Replaced color border on right side
`.b-r-violet-eggplant` | Border (Right Side) | Replaced color border on right side
`.b-r-mint-green` | Border (Right Side) | Replaced color border on right side
`.b-r-aquamarine` | Border (Right Side) | Replaced color border on right side
`.b-r-malibu` | Border (Right Side) | Replaced color border on right side
`.b-r-dodger-blue` | Border (Right Side) | Replaced color border on right side
`.b-r-heliotrope` | Border (Right Side) | Replaced color border on right side
`.b-r-perfume` | Border (Right Side) | Replaced color border on right side

name | where i can use | description
--- | --- | ---
`.b-b-gray-lighter` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-gray-light` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-gray` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-gray-darker` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-gray-dark` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-muted` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-primary` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-info` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-success` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-warning` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-danger` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-cerulan` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-curious-blue` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-endaveour` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-minsk` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-eminence` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-violet-eggplant` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-mint-green` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-aquamarine` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-malibu` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-dodger-blue` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-heliotrope` | Border (Bottom Side) | Replaced color border on bottom side
`.b-b-perfume` | Border (Bottom Side) | Replaced color border on bottom side

name | where i can use | description
--- | --- | ---
`.b-l-gray-lighter` | Border (Left Side) | Replaced color border on left side
`.b-l-gray-light` | Border (Left Side) | Replaced color border on left side
`.b-l-gray` | Border (Left Side) | Replaced color border on left side
`.b-l-gray-darker` | Border (Left Side) | Replaced color border on left side
`.b-l-gray-dark` | Border (Left Side) | Replaced color border on left side
`.b-l-muted` | Border (Left Side) | Replaced color border on left side
`.b-l-primary` | Border (Left Side) | Replaced color border on left side
`.b-l-info` | Border (Left Side) | Replaced color border on left side
`.b-l-success` | Border (Left Side) | Replaced color border on left side
`.b-l-warning` | Border (Left Side) | Replaced color border on left side
`.b-l-danger` | Border (Left Side) | Replaced color border on left side
`.b-l-cerulan` | Border (Left Side) | Replaced color border on left side
`.b-l-curious-blue` | Border (Left Side) | Replaced color border on left side
`.b-l-endaveour` | Border (Left Side) | Replaced color border on left side
`.b-l-minsk` | Border (Left Side) | Replaced color border on left side
`.b-l-eminence` | Border (Left Side) | Replaced color border on left side
`.b-l-violet-eggplant` | Border (Left Side) | Replaced color border on left side
`.b-l-mint-green` | Border (Left Side) | Replaced color border on left side
`.b-l-aquamarine` | Border (Left Side) | Replaced color border on left side
`.b-l-malibu` | Border (Left Side) | Replaced color border on left side
`.b-l-dodger-blue` | Border (Left Side) | Replaced color border on left side
`.b-l-heliotrope` | Border (Left Side) | Replaced color border on left side
`.b-l-perfume` | Border (Left Side) | Replaced color border on left side

##### Borders Sizes All, Top, Right, Bottom & Left

name | where i can use | description
--- | --- | ---
`.b-a-0` | Border (All Sides) | Without a border around the object
`.b-a-1` | Border (All Sides) | With border size 1px around the object.
`.b-a-2` | Border (All Sides) | With border size 2px around the object.
`.b-a-3` | Border (All Sides) | With border size 3px around the object.
`.b-a-4` | Border (All Sides) | With border size 4px around the object.

name | where i can use | description
--- | --- | ---
`.b-t-0` | Border (Top Side) | Without the border in the Top
`.b-t-1` | Border (Top Side) | With border 1px in the Top
`.b-t-2` | Border (Top Side) | With border 2px in the Top
`.b-t-3` | Border (Top Side) | With border 3px in the Top
`.b-t-4` | Border (Top Side) | With border 4px in the Top

name | where i can use | description
--- | --- | ---
`.b-r-0` | Border (Right Side) | Without the border in the Right
`.b-r-1` | Border (Right Side) | With border 1px in the Right
`.b-t-2` | Border (Right Side) | With border 2px in the Right
`.b-t-3` | Border (Right Side) | With border 3px in the Right
`.b-r-4` | Border (Right Side) | With border 4px in the Right

name | where i can use | description
--- | --- | ---
`.b-b-0` | Border (Bottom Side) | Without the border in the Bottom
`.b-b-1` | Border (Bottom Side) | With border 1px in the Bottom
`.b-b-2` | Border (Bottom Side) | With border 2px in the Bottom
`.b-b-3` | Border (Bottom Side) | With border 3px in the Bottom
`.b-b-4` | Border (Bottom Side) | With border 4px in the Bottom

name | where i can use | description
--- | --- | ---
`.b-l-0` | Border (Left Side) | Without the border in the Left
`.b-l-1` | Border (Left Side) | With border 1px in the Left
`.b-l-2` | Border (Left Side) | With border 2px in the Left
`.b-l-3` | Border (Left Side) | With border 3px in the LEft
`.b-l-4` | Border (Left Side) | With border 4px in the Left

##### Borders Styles

name | where i can use | description
--- | --- | ---
`.b-solid` | All | Default style border visible around the whole object
`.b-t-solid` | Top | Default style border visible only on the Top
`.b-r-solid` | Right Side | Default style border visible only on the Right Side
`.b-b-solid` | Bottom | Default style border visible only on the Bottom
`.b-l-solid` | Left Side | Default style border visible only on the Left Side

name | where i can use | description
--- | --- | ---
`.b-dashed` | All | Dashed style border visible around the whole object
`.b-t-dashed` | Top | Dashed style border visible only on the Top
`.b-r-dashed` | Right Side | Dashed style border visible only on the Right Side
`.b-b-dashed` | Bottom | Dashed style border visible only on the Bottom
`.b-l-dashed` | Left Side | Dashed style border visible only on the Left Side

name | where i can use | description
--- | --- | ---
`.b-dotted` | All | Dotted style border visible around the whole object
`.b-t-dotted` | Top | Dotted style border visible only on the Top
`.b-r-dotted` | Right Side | Dotted style border visible only on the Right Side
`.b-b-dotted` | Bottom | Dotted style border visible only on the Bottom
`.b-l-dotted` | Left Side | Dotted style border visible only on the Left Side

##### Radius Sizes All Corners, Right-Top, Right-Bottom, Left-Bottom & Left-Top

name | where i can use | description
--- | --- | ---
`.b-r-a-0` | All | Without radius on all the edges
`.b-r-a-1` | All | Rounding Radius 1px on all the edges
`.b-r-a-2` | All | Rounding Radius 2px on all the edges
`.b-r-a-3` | All | Rounding Radius 3px on all the edges
`.b-r-a-4` | All | Rounding Radius 4px on all the edges

name | where i can use | description
--- | --- | ---
`.b-t-r-0` | All | Without Radius on the Top Right Side
`.b-t-r-1` | All | Rounding Radius 1px on the Top Right Side
`.b-t-r-2` | All | Rounding Radius 2px on the Top Right Side
`.b-t-r-3` | All | Rounding Radius 3px on the Top Right Side
`.b-t-r-4` | All | Rounding Radius 4px on the Top Right Side

name | where i can use | description
--- | --- | ---
`.b-b-r-0` | All | Without Radius on the Bottom Right Side
`.b-b-r-1` | All | Rounding Radius 1px on the Bottom Right Side
`.b-b-r-2` | All | Rounding Radius 2px on the Bottom Right Side
`.b-b-r-3` | All | Rounding Radius 3px on the Bottom Right Side
`.b-b-r-4` | All | Rounding Radius 4px on the Bottom Right Side

name | where i can use | description
--- | --- | ---
`.b-b-l-0` | All | Without Radius on the Bottom Left Side
`.b-b-l-1` | All | Rounding Radius 1px on the Bottom Left Side
`.b-b-l-2` | All | Rounding Radius 2px on the Bottom Left Side
`.b-b-l-3` | All | Rounding Radius 3px on the Bottom Left Side
`.b-b-l-4` | All | Rounding Radius 4px on the Bottom Left Side

name | where i can use | description
--- | --- | ---
`.b-t-l-0` | All | Without Radius on the Top Left Side
`.b-t-l-1` | All | Rounding Radius 1px on the Top Left Side
`.b-t-l-2` | All | Rounding Radius 2px on the Top Left Side
`.b-t-l-3` | All | Rounding Radius 3px on the Top Left Side
`.b-t-l-4` | All | Rounding Radius 4px on the Top Left Side

##### Margins

name | where i can use | description
--- | --- | ---
`.m-a-0` | All | Without margins
`.m-a-1` | All | 1px margin around the object
`.m-a-2` | All | 2px margin around the object
`.m-a-1` | All | 3px margin around the object
`.m-a-1` | All | 4px margin around the object

name | where i can use | description
--- | --- | ---
`.m-t-0` | All | Without margin on Top side
`.m-t-1` | All | 1px margin on Top side
`.m-t-2` | All | 2px margin on Top side
`.m-t-3` | All | 3px margin on Top side
`.m-t-4` | All | 4px margin on Top side

name | where i can use | description
--- | --- | ---
`.m-r-0` | All | Without margin on right side
`.m-a-1` | All | 1px margin on right side
`.m-a-2` | All | 2px margin on right side
`.m-a-3` | All | 3px margin on right side
`.m-a-4` | All | 4px margin on right side

name | where i can use | description
--- | --- | ---
`.m-b-0` | All | Without margin on bottom side
`.m-b-1` | All | 1px margin on bottom side
`.m-b-2` | All | 2px margin on bottom side
`.m-b-3` | All | 3px margin on bottom side
`.m-b-4` | All | 4px margin on bottom side

name | where i can use | description
--- | --- | ---
`.m-l-0` | All | Without margin on left side
`.m-l-1` | All | 1px margin on left side
`.m-l-2` | All | 2px margin on left side
`.m-l-3` | All | 3px margin on left side
`.m-l-4` | All | 4px margin on left side

name | where i can use | description
--- | --- | ---
`.m-x-0` | All | Without margins on top & bottom sides
`.m-x-1` | All | 1px margin on top & bottom sides
`.m-x-2` | All | 2px margin on top & bottom sides
`.m-x-3` | All | 3px margin on top & bottom sides
`.m-x-4` | All | 4px margin on top & bottom sides

name | where i can use | description
--- | --- | ---
`.m-y-0` | All | Without margins on Left & Right sides
`.m-y-1` | All | 1px margin on Left & Right sides
`.m-y-2` | All | 2px margin on Left & Right sides
`.m-y-3` | All | 3px margin on Left & Right sides
`.m-y-4` | All | 4px margin on Left & Right sides

##### Paddings

name | where i can use | description
--- | --- | ---
`.p-a-0` | All | Without padding inside object
`.p-a-1` | All | 1px padding inside object
`.p-a-2` | All | 2px padding inside object
`.p-a-3` | All | 3px padding inside object
`.p-a-1` | All | 4px padding inside object

name | where i can use | description
--- | --- | ---
`.p-t-0` | All | Without padding on Top side
`.p-t-1` | All | 1px padding on Top side
`.p-t-2` | All | 2px padding on Top side
`.p-t-3` | All | 3px padding on Top side
`.p-t-4` | All | 4px padding on Top side

name | where i can use | description
--- | --- | ---
`.p-r-0` | All | Without padding on right side
`.p-r-1` | All | 1px padding on right side
`.p-r-2` | All | 2px padding on right side
`.p-r-3` | All | 3px padding on right side
`.p-r-4` | All | 4px padding on right side

name | where i can use | description
--- | --- | ---
`.p-b-0` | All | Without margin on bottom side
`.p-b-1` | All | 1px margin on bottom side
`.p-b-2` | All | 2px margin on bottom side
`.p-b-3` | All | 3px margin on bottom side
`.p-b-4` | All | 4px margin on bottom side

name | where i can use | description
--- | --- | ---
`.p-l-0` | All | Without padding on left side
`.p-l-1` | All | 1px padding on left side
`.p-l-2` | All | 2px padding on left side
`.p-l-3` | All | 3px padding on left side
`.p-l-4` | All | 4px padding on left side

name | where i can use | description
--- | --- | ---
`.p-x-0` | All | Without padding on top & bottom sides
`.p-x-1` | All | 1px padding on top & bottom sides
`.p-x-2` | All | 2px padding on top & bottom sides
`.p-x-3` | All | 3px padding on top & bottom sides
`.p-x-4` | All | 4px margin on top & bottom sides

name | where i can use | description
--- | --- | ---
`.p-y-0` | All | Without padding on Left & Right sides
`.p-y-1` | All | 1px padding on Left & Right sides
`.p-y-2` | All | 2px padding on Left & Right sides
`.p-y-3` | All | 3px padding on Left & Right sides
`.p-y-4` | All | 4px padding on Left & Right sides

##### Height & Width

name | where i can use | description
--- | --- | ---
`.h-3` | All | Height 3px
`.h-6` | All | Height 6px
`.h-9` | All | Height 9px
`.h-20` | All | Height 20px
`.h-100` | All | Height 100px

name | where i can use | description | where used in theme
--- | --- | --- | ---
`.w-0` | All | Width 0px
`.w-3` | All | Width 3px | (Profile Details/Messages)
`.w-5` | All | Width 5px |
`.w-10` | All | Width 10px | (Inbox/Table)
`.w-17` | All | Width 10px | (Global/Navbar/Avatar)
`.h-100` | All | Width 100px | (Profile Details/Messages)
`.h-210` | All | Width 210px | (Profile Details/Messages)
`.h-350` | All | Width 350px | (Global/Navbar/Notifications)
`.h-1000` | All | Width 1000px | (Profile Details/Chat)

##### Various

name | where i can use | description
--- | --- | ---
`.v-a-m` | Table | Vertical Align Middle (Table)
`.media-auto` | Media Objects | Media Auto (Disabled in Bootstrap width 1000px)
`.no-bg` | All | No Background
`.custom-scrollbar` | Adds Perfect Scrollbar to a fixed height container. | Works only on systems other than OS X or Mobile.

##### Scrolls

name | where i can use | description
--- | --- | ---
`.scroll-200` | All | 200px scroll Vertical
`.scroll-300` | All | 300px scroll Vertical
`.scroll-600` | All | 600px scroll Vertical
`.scroll-1300` | All | 1300px scroll Vertical