Grid
Responsive grids
There are two responsive grids included: default and FlexBox!
Flexbox Grid
Flexbox is the future for responsive and flexible layouts, so we have integrated Flexbox Grid into the framework! If you're familiar with the Bootstrap grid, this will be easy for you to use!
Markup
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
...
</div></div></div>
NOTE: The outer container class is optional. Remove it to make the page fluid-width.
.col-xs-12 - 12 columns (full-width) on extra small device
.col-sm-6 - 6 columns (half-width) on small device
.col-md-4 - 4 columns (one-third width) on tablets
.col-lg-3 - 3 columns (one-fourth width) on desktops
B3Grid
Brutal Blocks 'n Bricks Grid
A grid for when you don't want rows!
Blocks vs. Bricks
Blocks are flex containers that can be specified by both width and height.
Bricks are inline blocks that can only be specified by width.
Structure
.blocks / .bricks - outer wrapper for blocks and / or bricks
.block - supports both widths and heights
.brick - supports only widths; can be wrapped within blocks
Widths
Can be applied to both block and brick classes.
.b20 - 20% (one fifth) width
.b25 - 25% (quarter) width
.b33 - 33% (one-third) width
.b50 - 50% (half) width
.b75 - 75% (three-fourths) width
.b100 - 100% (full) width
Heights
Applies only to the block class. Height is relative to the window size.
.bh20 - 20% (one fifth) height
.bh25 - 25% (quarter) height
.bh33 - 33% (one-third) height
.bh50 - 50% (half) height
.bh75 - 75% (three-fourths) height
.bh100 - 100% (full) height
Blocks Markup
<div class="blocks">
<div class="block b25 bh50">
... content ...
</div>
<div class="block b75 bh50">
... content ...
</div>
</div>
Bricks Markup
<div class="bricks">
<div class="brick b33">
... content ...
</div>
<div class="brick b33">
... content ...
</div>
<div class="brick b33">
... content ...
</div>
</div>
Nested Blocks Markup
Three blocks within a two-block area.
<div class="blocks">
<div class="block b50 bh50">
<div class="blocks">
<div class="block b33">
...content...
</div>
<div class="block b33">
...content...
</div>
<div class="block b33">
...content...
</div>
</div>
</div>
<div class="block b50 bh50">
... content ...
</div>
</div>
Bricks Example
.b100
Bricks Within Blocks Example
Block 1
Single Brick
.b100
Half Brick
Block 2 - Block with Bricks
Block Height with Bricks
.b100 .bh25
This block is one-fourth the height of the screen.
Center a Block or Brick
To center a brick or block, simply apply the class CENTER to a bricks / blocks wrapper.
Centered Brick
Grow Blocks
Increase the width of a block in proportion to the others. In the example below, we want to make one block 3 times wider than the rest, but keep another block set to 25% of width of the container. Class .g3 is used to grow the block width. Classes g1 - g5 are supported. Use g0 or no-grow to prevent a block from growing in proportion to the width of the contianer.