Grid
Responsive grid framework
Flexbox grid & B3Grid (Brutal Blocks 'n Bricks)
Flexbox grid & B3Grid (Brutal Blocks 'n Bricks)
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!
<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
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 = 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
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>
Block 1
Block 2
Block 3
Brick 1
Brick 2
Brick 3
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>
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
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.
<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
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
Block 1, more content!
Block 2
one-third width
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.
.evenly - Even spacing between blocks.
.between - Even spacing between blocks, with no left or right edge spacing.
.center - Centers everything horizontally and vertically.
Centered Brick
.start - Aligns at start of container (top left).
.end - Align at end of container (bottom right).
.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.
.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.
STRETCH HEIGHT DEMO: Same as above, but now we would like to specify the block-wrap height as being 20% of the window height.
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.
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.
.col - Arranges blocks into vertical columns.
.col-rev - Column in reverse order.
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.
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.
<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
