Helpers

Margin

The default base margin is set to 4px. Other margins are calculated as a multiple of the base margin, e.g. m-md is @base-margin*4. You can change the base margin from the helpers.less file

Negative Margins: Add a class .n for the negative value of that margin. For example .ml-sm.n would produce {margin-left: -8px}

Margin Class
.m-n {margin: 0px !important}
.m-xs {margin: 4px !important}
.m-sm {margin: 8px !important}
.m {margin: 12px !important}
.m-md {margin: 16px !important}
.m-lg {margin: 24px !important}
.m-xl {margin: 32px !important}
.m-xxl {margin: 40px !important}
 
.mb-n {margin-bottom: 0px !important}
.mb-xs {margin-bottom: 4px !important}
.mb-sm {margin-bottom: 8px !important}
.mb {margin-bottom: 12px !important}
.mb-md {margin-bottom: 16px !important}
.mb-lg {margin-bottom: 24px !important}
.mb-xl {margin-bottom: 32px !important}
.mb-xxl {margin-bottom: 40px !important}
 
.ml-n {margin-left: 0px !important}
.ml-xs {margin-left: 4px !important}
.ml-sm {margin-left: 8px !important}
.ml {margin-left: 12px !important}
.ml-md {margin-left: 16px !important}
.ml-lg {margin-left: 24px !important}
.ml-xl {margin-left: 32px !important}
.ml-xxl {margin-left: 40px !important}
 
.mr-n {margin-right: 0px !important}
.mr-xs {margin-right: 4px !important}
.mr-sm {margin-right: 8px !important}
.mr {margin-right: 12px !important}
.mr-md {margin-right: 16px !important}
.mr-lg {margin-right: 24px !important}
.mr-xl {margin-right: 32px !important}
.mr-xxl {margin-right: 40px !important}
 
.mt-n {margin-top: 0px !important}
.mt-xs {margin-top: 4px !important}
.mt-sm {margin-top: 8px !important}
.mt {margin-top: 12px !important}
.mt-md {margin-top: 16px !important}
.mt-lg {margin-top: 24px !important}
.mt-xl {margin-top: 32px !important}
.mt-xxl {margin-top: 40px !important}

Padding

The default base padding is set to 5px. Other paddings are calculated as a multiple of the base padding, e.g. p-md is @base-padding*4. You can change the base padding from the helpers.less file

Negative Paddings: Add a class .n for the negative value of that padding. For example .pl10.n would produce {padding-left: -10px}

Padding Class
.p-n {padding: 0px !important}
.p-xs {padding: 4px !important}
.p-sm {padding: 8px !important}
.p {padding: 12px !important}
.p-md {padding: 16px !important}
.p-lg {padding: 24px !important}
.p-xl {padding: 32px !important}
.p-xxl {padding: 40px !important}
 
.pb-n {padding-bottom: 0px !important}
.pb-xs {padding-bottom: 4px !important}
.pb-sm {padding-bottom: 8px !important}
.pb {padding-bottom: 12px !important}
.pb-md {padding-bottom: 16px !important}
.pb-lg {padding-bottom: 24px !important}
.pb-xl {padding-bottom: 32px !important}
.pb-xxl {padding-bottom: 40px !important}
 
.pl-n {padding-left: 0px !important}
.pl-xs {padding-left: 4px !important}
.pl-sm {padding-left: 8px !important}
.pl {padding-left: 12px !important}
.pl-md {padding-left: 16px !important}
.pl-lg {padding-left: 24px !important}
.pl-xl {padding-left: 32px !important}
.pl-xxl {padding-left: 40px !important}
 
.pr-n {padding-right: 0px !important}
.pr-xs {padding-right: 4px !important}
.pr-sm {padding-right: 8px !important}
.pr {padding-right: 12px !important}
.pr-md {padding-right: 16px !important}
.pr-lg {padding-right: 24px !important}
.pr-xl {padding-right: 32px !important}
.pr-xxl {padding-right: 40px !important}
 
.pt-n {padding-top: 0px !important}
.pt-xs {padding-top: 4px !important}
.pt-sm {padding-top: 8px !important}
.pt {padding-top: 12px !important}
.pt-md {padding-top: 16px !important}
.pt-lg {padding-top: 24px !important}
.pt-xl {padding-top: 32px !important}
.pt-xxl {padding-top: 40px !important}

Embed Responsively

The Embed Responsively class helps build responsive embed codes for embedding rich third-party media into responsive web pages. Simply wrap the media object in embed-container class.

Third Party Code Sample
Youtube <div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div
Vimeo <div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
DailyMotion <div class='embed-container'><iframe src='http://www.dailymotion.com/embed/video/xsr67x' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
Google Maps <div class='embed-container'><iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387144.0075834208!2d-73.97800349999999!3d40.7056308!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1394298866288' width='600' height='450' frameborder='0' style='border:0'></iframe></div>
Instagram <div class='embed-container'><iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div>
Vine <div class='embed-container'><iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'></iframe><script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script></div>;

Others

Class Functions Description
Vertical Alignment To vertically center a div, add position:relative to the parent and vertical-align class to the child.
Vertical Align For Tables To vertical align contents in table, add classes vat, vam and vab to td to align contents top, middle and bottom respectively. Alternatively apply the classes table-vat, table-vam and table-vab to the table to align contents to all cells in the table
Avatar Using img.avatar will style an image with december standard for Avatar
iSelect wrap select in div.iSelect for custom font-awesome icons
  • © 2016 December
  • $39K

    Expenses
  • $11K

    Net Profit
  • $29K

    Total Sales
  • Earnings this week
  • Design
    1:12PM, Thursday, November 19, 2016
    Development
    11:40AM, Sunday, November 22, 2016
    Demo Settings
    Fixed Header
    Boxed Layout
    Collapse Leftbar
    Topnav
    Sidebar