Brutalist Framework

Grid

Responsive grid framework


Flexbox grid & B3Grid (Brutal Blocks 'n Bricks)

Flexbox Grid

BF includes Flexbox Grid as part of the core! 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.

.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

Container Classes
.container - standard width
.container-fluid - full-width (100%)
.container-1200 - 1200px max width
.container-960 - 960px max width

Learn the Grid »


B3Grid

Brutal Blocks 'n Bricks Grid

A grid for when you don't want rows! B3Grid allows you to create a flex layout without being restricted by rows. This is ideal for long lists of repeating content blocks. B3Grid can be used within a Flexbox grid layout, or independently.

Blocks vs. Bricks

Blocks = flexible blocks that evenly fill up the entire width of an area.

Bricks = inline blocks that don't evenly fill up an area's width.


.block-wrap - blocks outer wrapper
.block - individual blocks

.brick-wrap - bricks outer wrapper
.brick - individual bricks

Basic Markup

Create a 3-column flex layout:

<div class="block-wrap">
  <div class="block">...</div>
  <div class="block">...</div>
  <div class="block">...</div>
</div>

Create 3 inline bricks:

<div class="brick-wrap">
  <div class="brick">...</div>
  <div class="brick">...</div>
  <div class="brick">...</div>
</div>
Blocks Example

Block 1

Block 2

Block 3

Bricks Example

Brick 1

Brick 2

Brick 3

Specify Widths

Block and brick widths are determined by the percentage width of it's container.

.b10 - 10%
.b20 - 20% (one fifth)
.b25 - 25% (one-quarter)
.b30 - 30%
.b33 - 33.33% (one-third)
.b40 - 40%
.b50 - 50% (half)
.b60 - 60%
.b66 - 66.66% (two-thirds)
.b70 - 70%
.b75 - 75% (three-quarters)
.b80 - 80%
.b90 - 90%
.b100 - 100% (full)


Create a two-column layout with a two-thirds and one-third column.

<div class="block-wrap">
  <div class="block b33">...</div>
  <div class="block b66">...</div>
</div>

Heights

Block heights are determined by the height percentage relative to the window height.

.bh20 - 20% (one fifth)
.bh25 - 25% (one-quarter)
.bh30 - 30%
.bh33 - 33% (one-third)
.bh40 - 40%
.bh50 - 50% (half)
.bh60 - 60%
.bh66 - 66% (two-thirds)
.bh70 - 70% height
.bh75 - 75% (three-quarters)
.bh80 - 80%
.bh100 - 100% (full)


General heights are determined by the height percentage relative to it's container.

.h25 - 25% (one-quarter)
.h33 - 33% (one-third)
.h50 - 50% (half)
.h66 - 66% (two-thirds)
.h75 - 75% (three-quarters)
.h100 - 100% (full)

Grid Widths Demo

.b100

.b50
.b50
.b25
.b25
.b25
.b25
.b33
.b33
.b33
.b66
.b33
.b75
.b25
.b40
.b60
.b20
.b80
.b10
.b90
.b20
.b20
.b20
.b20
.b20

Quick Widths

Quick Widths are a simple way to evenly divide up the widths of blocks or bricks. Instead of assigning a specific width to each individual block or brick, you can just apply a class to the block- or brick-wrap container.

Markup
<div class="brick-wrap thirds">
  <div class="brick">...</div>
  <div class="brick">...</div>
  <div class="brick">...</div>
</div>

Classes
.full - 100% width
.halves - 1/2 (50%) width
.thirds - 1/3 (33%) width
.quarters - 1/4 (25%) width
.fifths - 1/5 (20%) width
.sixths - 1/6 (17%) width

EXAMPLE: .brick-wrap.quarters
Brick 1
Brick 2
Brick 3
Brick 4
Brick 5
Brick 6
Brick 8
Brick 9


Nesting

Blocks and bricks can be nested within each other. In this example, we'll add 3 bricks set to a one-third width each, nested within a two-thirds width block.

<div class="block-wrap">
 <div class="block b66">
    <div class="brick-wrap">
      <div class="brick b33">...</div>
      <div class="brick b33">...</div>
      <div class="brick b33">...</div>
    </div>
 </div>
 <div class="block b33">...</div>
</div>

Output:

Block 1, two-thirds width

Brick 1
Brick 2
Brick 3

Block 1, more content!

Block 2
one-third width


Alignments

Blocks and bricks can be aligned within their wrappers in various ways. Apply these classes to the block- or brick-wrap container.

.around - Even spacing around blocks.

.b25
.b25
.b25

.evenly - Even spacing between blocks.

.b25
.b25
.b25

.between - Even spacing between blocks, with no left or right edge spacing.

.b25
.b25
.b25

.center - Centers everything horizontally and vertically.

Centered Brick

.start - Aligns at start of container (top left).

Brick
Brick
Brick
Brick

.end - Align at end of container (bottom right).

Brick
Brick
Brick
Brick

.baseline - (DEFAULT VIEW) - Aligns along baseline.
DEMO: Below, we center all blocks within the block-wrap, but override the 3rd block to be aligned on the baseline.

Block
line 2
line 3
Block
line 2
.baseline
line 2
Block
line 2
Block
line 2
line 3

.stretch - Stretches all items to be the same height and fill up the height of the container.

DEMO: Below, we have blocks with varying lengths of content, which would create unequal heights.

Block
line 2
line 3
Block
line 2
Block
Block
line 2
Block
line 2
line 3
line 4

STRETCH HEIGHT DEMO: Same as above, but now we would like to specify the block-wrap height as being 20% of the window height.

Block
line 2
line 3
Block
line 2
Block
Block
line 2
Block
line 2
line 3
line 4

Grow Blocks

Increase the width of a block in proportion to the others on the same line. In the example below, we want to make one block 3 times wider than the rest.

Class .g3 is used to grow the block width. Classes g1 - g6 are supported. Use g0 or no-grow to prevent a block from growing in proportion to the width of the contianer. NOTE: Growth classes ONLY works with blocks.

.block.g3
.block
.block
.block


Directions & Ordering

By default, B3Grid lays out block and brick elements into a horizontal row, arranged in chronological order. We can change the direction and ordering by adding these classes to the block-wrap wrapper class.

.row-rev - Row in reverse order.

Block 1
Block 2
Block 3
Block 4

.col - Arranges blocks into vertical columns.

Block 1
Block 2
Block 3
Block 4

.col-rev - Column in reverse order.

Block 1
Block 2
Block 3
Block 4

TIP for Columns:
On column blocks, apply the stretch class to the block-wrapper to make them the same width. Alternatively, specifiy a width by applying a width class to each block.

First in Order
To make a block or brick always appear at the beginning of a list of items, simply apply either of these two classes directly to a block or brick:
.first
.featured

If more than one item is placed at the beginning, they will appear in their chronological order (but placed before the remaining items).

EXAMPLE: Stretched blocks in a reversed column order with two "first-ordered" blocks.

Block 1
Block 2
Block 3
Block 4
Block 5
.featured
.first


Tiles

Tiles are a simple way to make unordered lists into evenly divided inline blocks. Simply apply class tiles to any ul tag! By default, li tile items maxes out at 50% width. Tiles self-stretch to be the same height as other tiles on the same line.

Markup
<ul class="tiles thirds">
  <li>  ...  </li>
  <li>  ...  </li>
  <li>  ...  </li>
</ul>

Quick-Width Classes
.halves - 1/2 (50%) li width
.thirds - 1/3 (33%) li width
.quarters - 1/4 (25%) li width
.fifths - 1/5 (20%) li width
.sixths - 1/6 (17%) li width

Pad Tiles
Tiles have no padding by default. Add padding to all tiles automatically by applying the class .padded to a tiles wrapper:
ul.tiles.padded

Example: Fifths
  • Tile 1
  • Tile 2
  • Tile 3
  • Tile 4
  • Tile 5
  • Tile 6
  • Tile 7
  • Tile 8
  • Tile 9
  • Tile 10
  • Tile 11
  • Tile 12
  • Tile 13
  • Tile 14
  • Tile 15

Download
version 2.2