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

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

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

    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.

    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';

    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