mbox style guide

For more style juice, visit mbox on github.

Grid System

basic container

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
<div class="container">
  <div class="row">
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
  </div>
</div>

fluid container

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
<div class="container-fluid">
  <div class="row">
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
    <div class="col-md-1 border-grey">col-md-1</div>
  </div>
</div>

Gutter width

gutter l

 
 
 
 
 
 
 
 
 
 
 
 
<div class="container">
  <div class="row gutter-l">
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
  </div>
</div>

gutter m

 
 
 
 
 
 
 
 
 
 
 
 
<div class="container">
  <div class="row gutter-m">
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
  </div>
</div>

gutter s

 
 
 
 
 
 
 
 
 
 
 
 
<div class="container">
  <div class="row gutter-s">
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
  </div>
</div>

gutter xs

 
 
 
 
 
 
 
 
 
 
 
 
<div class="container">
  <div class="row gutter-xs">
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
  </div>
</div>

no gutter

 
 
 
 
 
 
 
 
 
 
 
 
<div class="container">
  <div class="row gutter-0">
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
    <div class="col-md-1"><div class="bg-grey">&nbsp;</div></div>
  </div>
</div>