Unpacking the Formstone Grid

May 9, 2016

Formstone makes building websites easier by distilling reusable patterns into discrete CSS and JS based components. One of the most basic components in the library is the CSS layout system, Grid.

What is the Grid?

The Formstone Grid is a CSS classing system that allows you to quickly scaffold a website's layout by breaking content into rows and cells. Grid is a mobile-first percentage based system, meaning rows and cells can be nested to quickly divide space in intuitive ways based on browser or screen size.

Getting Started

First, you'll need to include the grid system in your page. If you're using Bower for package management, this might look something like:

<link href="/components/formstone/dist/css/grid.css" rel="stylesheet">

Box-Sizing

It's worth noting that Grid includes a global border-box reset, which will have an impact on the box model calculation for every element on the page. If you're unfamiliar with how box-sizing works, you should start by reading about the benefits.

Grid Classing

Once the stylesheet is in place, you can begin splitting content into rows and cells using class names. Formstone class names are always prefixed with fs- to avoid name space collisions. All Grid styles are scoped to a fs-grid parent class, usually placed on the body tag. Cells are defined by the fs-cell class, and should always be nested inside of rows. Rows are defined by the fs-row class, and should always exists between two sets of cells to maintain consistent gutters. Here's a basic example of a simple 2 column layout:

<html>
    <head>
        ...
    </head>
    <body class="fs-grid">
        <div class="fs-row">
            <div class="fs-cell fs-md-2 fs-lg-3">
                Sidebar
            </div>
            <div class="fs-cell fs-md-6 fs-lg-9">
                Content
            </div>
        </div>
    </body>
</html>

You'll notice there are a few extra classes on each of the cells. This is how column counts are defined at specific screen sizes, and may feel familiar if you're coming from a different CSS grid system. The Grid column count classes always follow a specific pattern:

fs-[screen size]-[column count]

The second segment of the class name defines the screen size to target, while the final segment defines the column count to use at that size. Cells will always default to spanning the full column count of a row, allowing for mobile friendly fallbacks. There are three main screen size ranges, as well as two sub-ranges. Each range will have a min and max width, as well as a specific column count:

Name Screen Size Total Columns
xs < 500px 3
sm < 740px 3
md 740px to 979px 6
lg 980px to 1219px 12
xl > 1220px 12

You can think of the screen sizes as general devices classes. The sm and xs classes for smart phones, the md class for tablets, and the lg and xl classes for desktops. Obviously devices like phablets and large tablets blur these lines, but the general rule applies.

Examples

2 Column Layout

An asymmetrical 2 column layout, that stacks on small screens:

<html>
    <head>
        ...
    </head>
    <body class="fs-grid">
        <div class="fs-row">
            <div class="fs-cell fs-md-2 fs-lg-3">
                Sidebar Content
            </div>
            <div class="fs-cell fs-md-6 fs-lg-9">
                Page Content
            </div>
        </div>
    </body>
</html>

3 Column Layout

A symmetrical 3 column layout, that stacks on small screens:

<html>
    <head>
        ...
    </head>
    <body class="fs-grid">
        <div class="fs-row">
            <div class="fs-cell fs-md-2 fs-lg-4">
                Column 1
            </div>
            <div class="fs-cell fs-md-2 fs-lg-4">
                Column 2
            </div>
            <div class="fs-cell fs-md-2 fs-lg-4">
                Column 3
            </div>
        </div>
    </body>
</html>

Centering Cells

The -centered cell suffix to center a cell within a row:

<html>
    <head>
        ...
    </head>
    <body class="fs-grid">
        <div class="fs-row">
            <div class="fs-cell-centered fs-md-4 fs-lg-6">
                Content
            </div>
        </div>
    </body>
</html>

Next Steps

While this is a basic overview, there are many extra helpers that aim to expand layout options, including centering cells, using fraction-based widths, changing gutters to padding, and semantic classing using LESS mixins. You can read more about the Formstone Grid in the documentation and view more examples in full demo.

Comments