CSS

Everything about css in template

All css files are located in /css/ folder

Template load 5 css styles, first is icons.css , second is bootstrap.css witch contain a default bootstrap skin modified in less level

Thirds is plugins.css who contain a all plugin styles

Warning

If you not use all plugins remove it from plugins.css to improve a performance

Fourth css file is main.css Which hold a default template structure

Last file is custom.css Here you need to put all your changes

Warning

Dont change main.css file directly, because if you want to upgrade template with new version later you will lose all your changes.

Theme require a lot of css code so for easy navigation all code is commented well, here is some guide

This is major section

/* -----------------------------------------
   Major section
----------------------------------------- */

Each subsection is commented like this

/* ------------------ Sub section --------------------*/

In sub sections you will see the short comment

<!-- This is comment -->

CSS Helpers

Size helpers

Size helpers are shorthand css clasess for icons size

/* ------------------ Sizes --------------------*/
.s8 {font-size: 8px !important;}
.s10 {font-size: 10px !important;}
.s12 {font-size: 12px !important;}
.s14 {font-size: 14px !important;}
.s16 {font-size: 16px !important;}
.s20 {font-size: 20px !important;}
.s24 {font-size: 24px !important;}
.s32 {font-size: 32px !important;}
.s64 {font-size: 64px !important;}

Usage

Usage is simple just add desired class to element

Vertical align helper

Align vertical only with class, usefull for tables

/* ------------------ Vertical align --------------------*/
.vat {vertical-align: top !important;}
.vam {vertical-align: middle !important;}
.vab {vertical-align: bottom !important;}

Usage

Usage is simple just add desired class to element

Margin helper

Some time is usefull to add little margin in specific element without css modifications.

/* ------------------ Margins --------------------*/
.m0 {margin: 0 !important;}
.m5 {margin: 5px !important;}
.m10 {margin: 10px !important;}
.m15 {margin: 15px !important;}
.m20 {margin: 20px !important;}
.m25 {margin: 25px !important;}

.mt0 {margin-top: 0 !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt50 {margin-top: 50px !important;}

.mr0 {margin-right: 0 !important;}
.mr5 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}

.mb0 {margin-bottom: 0 !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb50 {margin-bottom: 50px !important;}

.ml0 {margin-left: 0 !important;}
.ml5 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}

/* Minus margins */
.mlm5 {margin-top: -5px !important;}
.mlm10 {margin-top: -10px !important;}
.mlm15 {margin-top: -15px !important;}
.mlm20 {margin-top: -20px !important;}
.mlm25 {margin-top: -25px !important;}

.mtm5 {margin-top: -5px !important;}
.mtm10 {margin-top: -10px !important;}
.mtm15 {margin-top: -15px !important;}
.mtm20 {margin-top: -20px !important;}
.mtm25 {margin-top: -25px !important;}

.mrm5 {margin-top: -5px !important;}
.mrm10 {margin-top: -10px !important;}
.mrm15 {margin-top: -15px !important;}
.mrm20 {margin-top: -20px !important;}
.mrm25 {margin-top: -25px !important;}

.mbm5 {margin-top: -5px !important;}
.mbm10 {margin-top: -10px !important;}
.mbm15 {margin-top: -15px !important;}
.mbm20 {margin-top: -20px !important;}
.mbm25 {margin-top: -25px !important;}

Usage

Usage is simple just add desired class to element

Padding helper

Some time is usefull to add little padding in specific element without css modifications.

/* ------------------ Margins --------------------*/
.p0 {padding: 0 !important;}
.p5 {padding: 5px !important;}
.p10 {padding: 10px !important;}
.p15 {padding: 15px !important;}
.p20 {padding: 20px !important;}
.p25 {padding: 25px !important;}

.pt0 {padding-top: 0 !important;}
.pt5 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}

.pr0 {padding-right: 0 !important;}
.pr5 {padding-right: 5px !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr25 {padding-right: 25px !important;}

.pb0 {padding-bottom: 0 !important;}
.pb5 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}

.pl0 {padding-left: 0 !important;}
.pl5 {padding-left: 5px !important;}
.pl10 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}
.pl25 {padding-left: 25px !important;}

Usage

Usage is simple just add desired class to element

Percent width helper

In case you need to control size but not with pixels, usefull for tables

/* ------------------ Percent widths --------------------*/
.per5 {width: 5% !important;}
.per10 {width: 10% !important;}
.per15 {width: 15% !important;}
.per20 {width: 20% !important;}
.per25 {width: 25% !important;}
.per30 {width: 30% !important;}
.per35 {width: 35% !important;}
.per40 {width: 40% !important;}
.per45 {width: 45% !important;}
.per50 {width: 50% !important;}
.per55 {width: 55% !important;}
.per60 {width: 60% !important;}
.per65 {width: 65% !important;}
.per70 {width: 70% !important;}
.per75 {width: 75% !important;}
.per80 {width: 80% !important;}
.per85 {width: 85% !important;}
.per90 {width: 90% !important;}
.per95 {width: 95% !important;}
.per100 {width: 100% !important;}

Usage

Usage is simple just add desired class to element

Borders helper

If you want to surround some element with borders

/* ------------------ Borders --------------------*/
.b {border: 1px solid @border-color !important;}
.bt {border-top: 1px solid @border-color !important;}
.br {border-right: 1px solid @border-color !important;}
.bb {border-bottom: 1px solid @border-color !important;}
.bl {border-left: 1px solid @border-color !important;}

.btlr {border-top-left-radius: @border-radius-base !important;}
.btrr {border-top-right-radius: @border-radius-base !important;}
.bblr {border-bottom-left-radius: @border-radius-base !important;}
.bbrr {border-bottom-right-radius: @border-radius-base !important;}
.brall {border-radius: @border-radius-base !important;}

.bn {border: none !important;}
.bnt {border-top: none !important;}
.bnb {border-bottom: none !important;}
.bnl {border-left: none !important;}
.bnr {border-right: none !important;}

.brad0 {border-radius: 0 !important;}
.btlr0 {border-top-left-radius: 0 !important;}
.btrr0 {border-top-right-radius: 0 !important;}
.bblr0 {border-bottom-left-radius: 0 !important;}
.bbrr0 {border-bottom-right-radius: 0 !important;}

.brad {border-radius: @border-radius-base !important;}

.bbdashed {border-bottom: 1px dashed @border-color !important;}

Usage

Usage is simple just add desired class to element

Colors

Colors is very helpfull if you want to change color in some element

/* ------------------ Colors --------------------*/
.color-red          {color: @red !important;}
.color-red-light    {color: @red-light !important;}
.color-red-dark     {color: @red-dark !important;}
.color-blue         {color: @blue !important;}
.color-blue-light   {color: @blue-light !important;}
.color-blue-dark    {color: @blue-dark !important;}
.color-green        {color: @green !important;}
.color-green-light  {color: @green-light !important;}
.color-green-dark   {color: @green-dark !important;}
.color-yellow       {color: @yellow !important;}
.color-yellow-light {color: @yellow-light !important;}
.color-yellow-dark  {color: @yellow-dark !important;}
.color-white        {color: @white !important;}
.color-dark         {color: @dark !important;}
.color-dark-light   {color: @dark-light !important;}
.color-dark-dark    {color: @dark-dark !important;}
.color-gray         {color: @gray !important;}
.color-gray-light   {color: @gray-light !important;}
.color-gray-dark    {color: @gray-dark !important;}

Usage

Usage is simple just add desired class to element

Background helper

Change background for specific element

/* ------------------ Backgrounds --------------------*/
.white-bg { color: @text-color !important; background-color: @white !important;}
.red-bg {color: @white !important; background-color: @red !important;}
.red-light-bg {color: @white !important; background-color: @red-light !important;}
.red-dark-bg {color: @white !important; background-color: @red-dark !important;}
.blue-bg {color: @white !important; background-color: @blue !important;}
.blue-light-bg {color: @white !important; background-color: @blue-light !important;}
.blue-dark-bg {color: @white !important; background-color: @blue-dark !important;}
.green-bg {color: @white !important;background-color: @green !important;}
.green-light-bg {color: @white !important;background-color: @green-light !important;}
.green-dark-bg {color: @white !important;background-color: @green-dark !important;}
.yellow-bg {color: @white !important;background-color: @yellow !important;}
.yellow-light-bg {color: @white !important;background-color: @yellow-light !important;}
.yellow-dark-bg {color: @white !important;background-color: @yellow-dark !important;}
.gray-bg {color: @text-color !important; background-color: @gray !important;}
.gray-light-bg {color: @text-color !important; background-color: @gray-light !important;}
.gray-lighter-bg {color: @text-color !important; background-color: @gray-lighter !important;}
.gray-dark-bg {color: @text-color !important; background-color: @gray-dark !important;}
.gray-darker-bg {color: @text-color !important; background-color: @gray-darker !important;}
.dark-bg {color: @white !important;background-color: @dark !important;}
.dark-light-bg {color: @white !important;background-color: @dark-light !important;}
.dark-dark-bg {color: @white !important;background-color: @dark-dark !important;}

Usage

Usage is simple just add desired class to element

Text helper

4 helpers for text

/* ------------------ Typo --------------------*/
.strong { font-weight: bold; }
.uppercase {text-transform: uppercase;}
.normal {font-weight: normal;}
.text-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Usage

Usage is simple just add desired class to element

Positions helper

Change positions

/* ------------------ Positions --------------------*/
.relative {position: relative;}
.absolute {position: absolute;}

Usage

Usage is simple just add desired class to element

Contextual colors

Change color

/* ------------------ Contextual colors --------------------*/
.text-muted { color: @text-muted; }
.text-primary {.text-emphasis-variant(@brand-primary); }
.text-success {.text-emphasis-variant(@brand-success);}
.text-info {.text-emphasis-variant(@brand-info);}
.text-warning {.text-emphasis-variant(@brand-warning);}
.text-danger {.text-emphasis-variant(@brand-danger);}
.text-yellow {.text-emphasis-variant(@yellow);}
.text-dark {.text-emphasis-variant(@dark);}

Usage

Usage is simple just add desired class to element

Opacity helper

Change opacity

/* ------------------ Opacity --------------------*/
.opacity { opacity: 1 !important;}
.opacity0 {opacity: 0 !important;}

Usage

Usage is simple just add desired class to element

Rotate helpers

rotate element

/* ------------------ Rotate helpers --------------------*/
.rotate0 { .rotate(0deg); }
.rotate15 { .rotate(15deg); }
.rotate30 { .rotate(30deg); }
.rotate45 { .rotate(45deg); }
.rotate60 { .rotate(60deg); }
.rotate75 { .rotate(75deg); }
.rotate90 { .rotate(90deg); }
.rotate105 { .rotate(105deg); }
.rotate120 { .rotate(120deg); }
.rotate135 { .rotate(135deg); }
.rotate150 { .rotate(150deg); }
.rotate165 { .rotate(165deg); }
.rotate180 { .rotate(180deg); }

.rotateM15 { .rotate(-15deg); }
.rotateM30 { .rotate(-30deg); }
.rotateM45 { .rotate(-45deg); }
.rotateM60 { .rotate(-60deg); }
.rotateM75 { .rotate(-75deg); }
.rotateM90 { .rotate(-90deg); }
.rotateM105 { .rotate(-105deg); }
.rotateM120 { .rotate(-120deg); }
.rotateM135 { .rotate(-135deg); }
.rotateM150 { .rotate(-150deg); }
.rotateM165 { .rotate(-165deg); }
.rotateM180 { .rotate(-180deg); }

Usage

Usage is simple just add desired class to element

Other helpers

Other userfull helpers

/* ------------------ Other --------------------*/
.bshadowNone {box-shadow: none !important;}
.di {display: inline !important;}
.dib {display: inline-block !important;}
.db {display: block !important;}

Usage

Usage is simple just add desired class to element

Using Less

One of the most powerfull css preprocesors

Less

If you not know how to use less, please visit official site - http://lesscss.org/

I recommend to learn it and use it, this will speed up your development process with almost 50%

How to start ?

All less files are located to /css/less/ folder

First you need to include a bootstrap.less file witch containt:

//Core bootstrap less files
@import "bootstrap/bootstrap.less";
//include some custom mixins
@import "custom-mixins.less";
//Include the custom variables
@import "custom-variables.less";
//Import custom bootstrap elements
@import "custom-elements.less";
// Utility classes
@import "bootstrap/utilities.less"; // Has to be last to override when necessar
@import "bootstrap/responsive-utilities.less";

Now you may want to modify a custom-variables.less this file change the whole look , like colors, typography and etc.

Second you need to include app.less witch contain the basic markup and styling

//Custom variables
// --------------------------------------------------
@import "bootstrap/mixins.less";
@import "custom-mixins.less";
@import "custom-variables.less";

//Include tempalte helpers
// --------------------------------------------------
@import "helpers.less";

// General markup
// --------------------------------------------------
@import "markup.less";

// UI elements
// --------------------------------------------------
@import "ui.less";

// Widgets
// --------------------------------------------------
@import "widgets.less";

//Media queries
// --------------------------------------------------
@import "responsive.less";

//Print styles
// --------------------------------------------------
@import "print.less";

Now you see the whole structure of less fles, markup.less import the general template markup like sidebars,header and etc.

//body styles
@import "markup/body.less";
//header
@import "markup/header.less";
//sidebar
@import "markup/sidebar.less";
//right sidebar
@import "markup/right-sidebar.less";
//content
@import "markup/content.less";
//page footer
@import "markup/page-footer.less";

ui.less import all ui elements

// UI.less 
// Import other styles
@import "ui/ui-page-header.less";
@import "ui/ui-progressbars.less";
@import "ui/ui-notifications.less";
@import "ui/ui-sidebar-widget.less";
@import "ui/ui-back-to-top.less";
@import "ui/ui-tooltips.less";
@import "ui/ui-portlets.less";
@import "ui/ui-sparklines.less";
@import "ui/ui-easy-pie-charts.less";
@import "ui/ui-knob.less";
@import "ui/ui-labels.less";
@import "ui/ui-buttons.less";
@import "ui/ui-dropdown-menu.less";
@import "ui/ui-tabs.less";
@import "ui/ui-accordions.less";
@import "ui/ui-modals.less";
@import "ui/ui-alerts.less";
@import "ui/ui-list-group.less";
@import "ui/ui-circfull.less";
@import "ui/ui-popover.less";
@import "ui/ui-wells.less";
@import "ui/ui-jumbotron.less";
@import "ui/ui-pills.less";
@import "ui/ui-paginations.less";
@import "ui/ui-carousel.less";
@import "ui/ui-labels-badges.less";
@import "ui/ui-forms.less";
@import "ui/ui-checkboxes-radios.less";
@import "ui/ui-tables.less";
@import "ui/ui-highlight.less";
@import "ui/ui-datatables.less";
@import "ui/ui-pricing-tables.less";
@import "ui/ui-seperators.less";
@import "ui/ui-email.less";
@import "ui/ui-gallery.less";
@import "ui/ui-timeline.less";
@import "ui/ui-profile.less";
@import "ui/ui-stats.less";
@import "ui/ui-invoice.less";
@import "ui/ui-faq.less";
@import "ui/ui-chartshortcuts.less";

widget.less import only widgets

// widgets.less 
// Import other styles
@import "widgets/w-comments.less";
@import "widgets/w-messages.less";
@import "widgets/w-sparkstats.less";
@import "widgets/w-reminder.less";
@import "widgets/w-todo.less";
@import "widgets/w-instagram.less";
@import "widgets/w-twitter.less";
@import "widgets/w-activity.less";

That is if you have questions feel free to ask it.