mbox style guide

For more style juice, visit mbox on github.

Background color

<div class="row">
  <div class="col-sm-1">
    <div class="bg-red padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="bg-black padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="bg-darker-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="bg-dark-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="bg-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="bg-light-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="bg-lighter-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="bg-white border-light-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="bg-trans-white border-light-grey padding-m"></div>
  </div>
</div>

Borders

Border color

<div class="row">
  <div class="col-sm-1">
    <div class="border-red padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-black padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-darker-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-dark-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-light-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-lighter-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-white padding-m bg-light-grey"></div>
  </div>
</div>

Border position

<div class="row">
  <div class="col-sm-1">
    <div class="border-red bg-light-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-top border-red bg-light-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-right border-red bg-light-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-bottom border-red bg-light-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-left border-red bg-light-grey padding-m"></div>
  </div>
  <div class="col-sm-1">
    <div class="border-none bg-light-grey padding-m"></div>
  </div>
</div>

Clears & Floats

Class Attribute
.clearfix clears floats; useful for breaking columns at certain viewports, i.e.
.center-block display: block; margin-left: auto; margin-right: auto;
.pull-right float:right
.pull-left float:left

Display & Position

Display

Class Attribute
.display-inline or .di display:inline
.display-inlineblock or .dib display:inline-block
.display-block or .db display:block

Position

Class Attribute
.affix position: fixed
.pos-r position: relative
.pos-s position: static
.pos-a position: absolute

Margin

Construction

Side Class
all sides .margin-[0,s,m,l,xl]
one side .margin-[top,right,bottom,left]-[0,s,m,l,xl]
negative margin on all sides .neg-margin-[s,m,l,xl]
negative margin on one side .neg-margin-[top,right,bottom,left]-[s,m,l,xl]

Full list

Positive margin

Side None Small (1em) Medium (2em) Large (3em) XL (5em)
all sides .margin-0 .margin-s .margin-m .margin-l .margin-xl
top .margin-top-0 .margin-top-s .margin-top-m .margin-top-l .margin-top-xl
right .margin-right-0 .margin-right-s .margin-right-m .margin-right-l .margin-right-xl
bottom .margin-bottom-0 .margin-bottom-s .margin-bottom-m .margin-bottom-l .margin-bottom-xl
left .margin-left-0 .margin-left-s .margin-left-m .margin-left-l .margin-left-xl

Negative margin

Side None Small (-1em) Medium (-2em) Large (-3em) XL (-5em)
all sides .margin-0 .neg-margin-s .neg-margin-m .neg-margin-l .neg-margin-xl
top .margin-top-0 .neg-margin-top-s .neg-margin-top-m .neg-margin-top-l .neg-margin-top-xl
right .margin-right-0 .neg-margin-right-s .neg-margin-right-m .neg-margin-right-l .neg-margin-right-xl
bottom .margin-bottom-0 .neg-margin-bottom-s .neg-margin-bottom-m .neg-margin-bottom-l .neg-margin-bottom-xl
left .margin-left-0 .neg-margin-left-s .neg-margin-left-m .neg-margin-left-l .neg-margin-left-xl

Examples

Bottom margin

margin-bottom-0
 
margin-bottom-s
 
margin-bottom-m
 
margin-bottom-l
 
margin-bottom-xl
 
<div class="row">
  <div class="col-sm-2">
    <div class="bg-grey margin-bottom-0">margin-bottom-0</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey margin-bottom-s">margin-bottom-s</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey margin-bottom-m">margin-bottom-m</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey margin-bottom-l">margin-bottom-l</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey margin-bottom-xl">margin-bottom-xl</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
</div>

Negative bottom margin

neg-margin-bottom-0
 
neg-margin-bottom-s
 
neg-margin-bottom-m
 
neg-margin-bottom-l
 
neg-margin-bottom-xl
 
<div class="row">
  <div class="col-sm-2">
    <div class="bg-grey neg-margin-bottom-0">neg-margin-bottom-0</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey neg-margin-bottom-s">neg-margin-bottom-s</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey neg-margin-bottom-m">neg-margin-bottom-m</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey neg-margin-bottom-l">neg-margin-bottom-l</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey neg-margin-bottom-xl">neg-margin-bottom-xl</div>
    <div class="bg-light-grey">&nbsp;</div>
  </div>
</div>

Padding

Construction

Side Class
all sides .padding-[0,s,m,l,xl]
one side .padding-[top,right,bottom,left]-[0,s,m,l,xl]

Full list

Side None Small (1em) Medium (2em) Large (3em) XL (5em)
all sides .padding-0 .padding-s .padding-m .padding-l .padding-xl
top .padding-top-0 .padding-top-s .padding-top-m .padding-top-l .padding-top-xl
right .padding-right-0 .padding-right-s .padding-right-m .padding-right-l .padding-right-xl
bottom .padding-bottom-0 .padding-bottom-s .padding-bottom-m .padding-bottom-l .padding-bottom-xl
left .padding-left-0 .padding-left-s .padding-left-m .padding-left-l .padding-left-xl

Example

padding-bottom-0
padding-bottom-s
padding-bottom-m
padding-bottom-l
padding-bottom-xl
<div class="row">
  <div class="col-sm-2">
    <div class="bg-grey padding-bottom-0">padding-bottom-0</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey padding-bottom-s">padding-bottom-s</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey padding-bottom-m">padding-bottom-m</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey padding-bottom-l">padding-bottom-l</div>
  </div>
  <div class="col-sm-2">
    <div class="bg-grey padding-bottom-xl">padding-bottom-xl</div>
  </div>
</div>

Visibility

Basic Visibility

Fap messenger bag roof party, craft beer cronut literally ennui sustainable.
Wolf locavore keytar VHS craft beer tote bag, gluten-free fingerstache Echo Park lomo migas.
Hella food truck direct trade yr, Pitchfork Brooklyn before they sold out ugh dreamcatcher.
<div class="show">Fap messenger bag roof party, craft beer cronut literally ennui sustainable.</div>
<div class="hidden">Shoreditch butcher asymmetrical, squid flannel cold-pressed VHS 90's cray lumbersexual roof party tilde chillwave +1.</div>
<div class="invisible">Cliche pork belly wolf biodiesel fingerstache.</div>
<div class="text-hide">Wolf locavore keytar VHS craft beer tote bag, gluten-free fingerstache Echo Park lomo migas.</div>
<div class="sr-only">Hella food truck direct trade yr, Pitchfork Brooklyn before they sold out ugh dreamcatcher.</div>

Responsive visibility

Class Extra small devices (<768px) Small devices (>768px) Medium devices (>992px) Large devices (>1200px)
.visible-xs visible hidden hidden hidden
.visible-sm hidden visible hidden hidden
.visible-md hidden hidden visible hidden
.visible-lg hidden hidden hidden visible
.hidden-xs hidden visible visible visible
.hidden-sm visible hidden visible visible
.hidden-md visible visible hidden visible
.hidden-lg visible visible visible hidden

visible

visible-xs
visible-sm
visible-md
visible-lg
<div class="row">
  <div class="col-md-3 bg-grey">
    <div class="visible-xs">visible-xs</div>
  </div>
  <div class="col-md-3 bg-grey">
    <div class="visible-sm">visible-sm</div>
  </div>
  <div class="col-md-3 bg-grey">
    <div class="visible-md">visible-md</div>
  </div>
  <div class="col-md-3 bg-grey">
    <div class="visible-lg">visible-lg</div>
  </div>
</div>

hidden

hidden-md
<div class="row">
  <div class="col-md-3 bg-grey">
    <div class="hidden-xs">hidden-xs</div>
  </div>
  <div class="col-md-3 bg-grey">
    <div class="hidden-sm">hidden-sm</div>
  </div>
  <div class="col-md-3 bg-grey">
    <div class="hidden-md">hidden-md</div>
  </div>
  <div class="col-md-3 bg-grey">
    <div class="hidden-lg">hidden-lg</div>
  </div>
</div>