Without grids, designing and implementing responsive layouts would not be possible. There are many grid systems available, each with their pros and cons, but for WFP UI, we have picked a very versatile, powerful, and relatively easy to use grid system, designed by Yahoo team for Pure CSS framework.

Basics

Two types of classes

Grids in WFP UI make use of only two types of classes: the grid class (wfp-grid) and unit classes (wfp-u or wfp-u-*) to form layouts.

Units are fractions

Units have various names that represent their widths; i.e.: wfp-u-1-2, wfp-u-3-4, and wfp-u-1-5 represent widths of 50% (1/2), 75% (3/4), and 20% (1/5), respectively. All widths are relative to the width of their grid container (wfp-grid).

Child elements of a grid must be units

Child elements contained within an element with a wfp-grid classname must be a grid unit with a wfp-u or wfp-u-* classname.

Content goes inside grid units

All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.

Grid units do not have gutters by default

To give you more control over your layouts, we have not applied default gutters to grid units. You can apply your own gutters via padding, for example by using wfp-box classname.

Example

<div class="wfp-grid">
  <div class="wfp-u-1-3"><p>Thirds</p></div>
  <div class="wfp-u-1-3"><p>Thirds</p></div>
  <div class="wfp-u-1-3"><p>Thirds</p></div>
</div>

Grid Units Sizes

Our grid allows you to use both a 5ths and 24ths based grid. Below you can find all the available units that can be appended to the wfp-u-* classname, where * is one the unit fractions, i.e.: to achieve a 50% width, use wfp-u-1-2.

5ths-based units

24ths-based units

Media Queries

This grid system allows you to take control over grid behaviour at certain breakpoints by including additional class names. Use the following table to see what default breakpoints are supported.

Usage

The following code sample shows how to use grids to build a responsive layout for your pages using CSS Media Queries, as well as manage content layouts based on grids.

Preview

Source

<div class="wfp-grid">
  <div class="wfp-u-1 wfp-u-md-1-3 wfp-box">
    <nav class="wfp-menu">
      <h6 class="menu--heading">Menu</h6>
      <ul class="menu--wrapper">
        <li class="menu--item"><a href="#" class="menu--link">Home</a></li>
        <li class="menu--item"><a href="#" class="menu--link">About</a></li>
        <li class="menu--item"><a href="#" class="menu--link">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class="wfp-u-1 wfp-u-md-2-3 wfp-box">
    <h3>Title</h3>
    <p>This is a sample paragraph, written to showcase how you can arrange your content. It's not very long and you didn't have to read it anyway.</p>
    <div class="wfp-grid">
      <div class="wfp-u-1 wfp-u-md-1-2 wfp-box">
        <h6>Label #1</h6>
      </div>
      <div class="wfp-u-1 wfp-u-md-1-2 wfp-box">
        <h6>Label #2</h6>
      </div>
    </div>
    <hr>
    <div class="wfp-grid">
      <div class="wfp-u-1 wfp-u-md-1-3 wfp-box">
        <h6>Label #1</h6>
      </div>
      <div class="wfp-u-1 wfp-u-md-1-3 wfp-box">
        <h6>Label #2</h6>
      </div>
      <div class="wfp-u-1 wfp-u-md-1-3 wfp-box">
        <h6>Label #3</h6>
      </div>
    </div>
  </div>
</div>

Portions of this page have been sourced from purecss.io.