Flexbox for Apps

Grid Frame

The grid frame is the base structure for creating a full application experience. .grid-frame will use the full height of browser and setup flexbox. 

<body>
  <div class="grid-frame">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
  </div>
</body>

Grid Block

.grid-block is the foundation of the grid system. It can create columns and rows. They can also have a defined size and reorderd. 

<div class="grid-block">
  <div class="grid-block"></div>
  <div class="grid-block"></div>
</div>

By default, the code above will create columns:

If you want to change the layout to be vertical instead, checkout out the vertical grid section.

Grid Content

.grid-content behaves like .grid-block But .grid-content will have left and right padding and (as the name implies) it is meant to display content.

Given the nature of flexbox, if you use any element within .grid-block without the class grid-content you can see bizarre layout. For that reason it is recommended to use .grid-content for content.

.grid-content (has padding)
.grid-block (no padding)
<div class="grid-block">
  <div class="grid-content">.grid-content (has padding)</div>
  <div class="grid-block">.grid-block (no padding)</div>
</div>

Intermixing Grid Block and Grid Content

Both classes can be intermixed (as the example above shows) to acheive the desired layout.

Column Sizing

You can add .small-x, .medium-x, .large-x to define the width of a column. Where x is a column number of 1-12 and small, medium, or large is the breakpoint. 

<div class="grid-block">
  <div class="grid-block small-3"></div>
  <div class="grid-block small-9"></div>
</div>

<div class="grid-block">
  <div class="grid-block small-5"></div>
  <div class="grid-block small-7"></div>
</div>

<div class="grid-block">
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
  <div class="grid-block small-12"></div>
</div>
3
9
5
7
1
1
1
1
1
1
1
1
1
1
1
1

Column Expanding

If you don't define a column width, it will expand to fill the remaining container width. 

<div class="grid-block">
  <div class="grid-block small-3"></div>
  <div class="grid-block"></div>
</div>
3

Column Collapsing

If you want to shrink the width of a container to match the content add the class of shrink. 

<div class="grid-block">
  <div class="grid-block shrink">Some Content</div>
  <div class="grid-block"></div>
</div>
Some Content

Vertical Grid

This is the cool part.

Vertical grids are defined be adding a vertical class to the parent .grid-block

It's difficult to see what is happening here. It just looks like a couple of rows doesn't it. However, each .grid-block under .vertical will stretch to fill the space.

Here is a better example, showing vertical grid next to a single .grid-block. 

<div class="grid-block">
  <div class="grid-block vertical">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
  </div>
  <div class="grid-block">I am the same height as the two rows</div>
</div>
I am the same height as the two rows

Vertical Column Collapsing

Like columns, the vertical columns can also be collapsed by adding the class of shrink. 

<div class="grid-block">
  <div class="grid-block vertical">
    <div class="grid-block demo-block">I expand since the other content shrinks</div>
    <div class="grid-block demo-block shrink">Box shrinks to fit content</div>
  </div>
  <div class="grid-block vertical">
    <div class="grid-block demo-block shrink">Box shrinks to fit content</div>
    <div class="grid-block demo-block">I expand since the other content shrinks</div>
  </div>
</div>
I expand since the other content shrinks
Box shrinks to fit content
Box shrinks to fit content
I expand since the other content shrinks