Grid

Responsive grids

There are two responsive grids included: default and FlexBox!

Default Grid

ALERT! Default Grid is now deprecated, and will be fully removed by version 2. Use the Flexbox grid 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


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

Learn the Grid »


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

.b50
.b50
.b25
.b25
.b25
.b25
.b33
.b33
.b33
.b75
.b25
.b20
.b20
.b20
.b20
.b20

Bricks Within Blocks Example

Block 1

Single Brick
.b100

Half Brick

Block 2 - Block with Bricks

.b33
.b33
.b33
.b50
.b50

More of Block 2

.b100 .bh25
This block is one-fourth the height of the screen.

Download

Version 1.7