SPIN | Docs

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:

Sidebar Menu on the left side of the screen.
Navbar Part of the menu which is always at the top.
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

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

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

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

The plugins SCSS files should be placed in /src/assets/scss/plugins/plugin-name/plugin-name-file.scss
The compiled CSS should also be placed in /src/assets/scss/plugins/plugin-name/plugin-name-file.css
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

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

Introduction

Package