Grid
Responsive grids
There are two responsive grids included: default and FlexBox!
Flexbox Grid
We believe 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
Default Grid
ALERT! Default Grid is now deprecated, and will be fully removed by version 2. Use Flexbox or B3grid instead.
It goes like this:
.container
.row
.col .s12 .m12 .l12
Container is optional, as it centers the page. By not using the container class, the rows will be the full width of the window. The maximum number of columns is 12.
.s12 = 12 columns (full width) on small devices
.m6 = 6 columns (half width) on medium devices
.l4 = 4 columns (1/3 width) on large devices
Let's take a look at the grid. Re-size your window to see it in action.
Full Width: On all screen sizes.
col s12 m12 l12
Three columns: Becomes half width on medium devices, and full-width on small devices.
col s12 m6 l4
col s12 m6 l4
col s12 m6 l4
Nesting: Yes, you can nest within other layouts. Below, we have a two-column layout within another two-column layout.
col s12 m12 l6
col s12 m6
col s12 m6
col s12 m12 l6
col s12 m6
col s12 m6