Introducing Pure.css – A Lightweight Responsive Framework

June 11, 2015

Frameworks make it easy to design websites. You may already have been using popular frameworks like Bootstrap in your projects. Today I will introduce you to Pure.css (simply referred to as “Pure”), a small framework made up of CSS modules. All its modules put together weigh less than 4.0KB if served minified and gzip’d. You can save even more bytes if you decide to use only one or two of the modules.

Pure’s minimal styling ensures that you can customize the look of elements to suit your needs without much effort. You can include Pure in your projects using the following line:

<link rel="stylesheet"
      href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

Introducing the Grid System

The grid system in Pure differs considerably from that of Bootstrap and it is powerful and easy to work with once you get past the basics. There are a few things that you need to keep in mind before proceeding:

Pure has a wrapper grid class called pure-g and unit classes named pure-u-* . Make sure all your content is inside the grid units for proper rendering.
Widths are calculated based on fractions. The fractions themselves are decided by class names. For example, pure-u-2-5 has a width of 40%.
All child elements within a pure-g element must have the class name pure-u or pure-u-* .

By using additional class names like pure-u-md-2-3 you can control the width of different elements at specific breakpoints. Take a look at the following HTML:

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-5"> One </div>
  <div class="pure-u-1 pure-u-md-2-5"> Two </div>
  <div class="pure-u-1 pure-u-md-2-5"> Three </div>
</div>

The above code does the following: When the screen size is smaller than 568px, all divs will be 100% wide. When the screen size is above the medium screen category (768px) the first div is set to a width of 20% while others are 40% wide each.

The grids are based on a 5th and 24th fraction system. For example, in the class name pure-u-x-24, x can be anything between 1 and 24 inclusive. Furthermore, pure-u-1-12 and pure-u-2-24 are the same. For a more detailed discussion of the grid system, refer to the official documentation.

Pure provides vertical menus by default. Minimal styling and use of low-specificity selectors make it a lot easier to customize the menus. Here is the code to create a vertical menu:

<div class="pure-menu">
  <span class="pure-menu-heading">Brand Name</span>

  <ul class="pure-menu-list">
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Products</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Contant</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Blog</a>
    </li>
  </ul>
</div>

To change the above menu to horizontal, add the class name pure-menu-horizontal. Additionally, you can mark a menu item as selected or disabled using the class names pure-menu-selected and pure-menu-disabled, respectively.

Creating dropdown navigation requires small changes in the markup. You need to add the class name pure-menu-has-children to the appropriate menu item. To display the submenu on hover, include the class name pure-menu-allow-hover. The code snippet below should clear things up:

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">About</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
        <a href="#" class="pure-menu-link">Services</a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Designing</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Marketing</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">SEO</a>
          </li>
        </ul>
    </li>
  </ul>
</div>

You can also include this example script written in vanilla JavaScript to make the menu more accessible. It provides ARIA support, submenu arrow key navigation, and menu dismissal based on outside events.

Below is a demo of Pure’s navigation menu with a dropdown.

See the Pen Navigation Menu with Dropdown using Pure.css by SitePoint (@SitePoint) on CodePen.

Creating Forms Using Pure

To create a form with Pure you need to add the class name pure-form to the <form> element, as shown below:

<form class="pure-form">
  <fieldset>
    <legend>Pure Login Form</legend>

    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">

    <button type="submit" class="pure-button">Sign in</button>
  </fieldset>
</form>

Here’s a demo of Pure’s login form:

See the Pen Login Form with Pure.css by SitePoint (@SitePoint) on CodePen.

To create a stacked form, you can include the class name pure-form-stacked along with pure-form. You have the option to create an aligned form as well by adding the class name pure-form-aligned to your original form. The labels in an aligned form would be right aligned against the input controls. On smaller screens, however, the aligned form changes to a stacked form.

Creating Multi-Column Forms

You can use the form module along with the grid system to create multi-column forms. To do this, you need to wrap the controls in a pure grid and then specify the width of each of them using pure unit classes. The sample code below should help you understand the concept:

<form class="pure-form pure-form-stacked">
  <fieldset>
    <legend>Registration Form</legend>

    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-2-5">
        <label for="name">Name</label>
        <input id="name" type="text">
      </div>

      <div class="pure-u-1 pure-u-md-1-5">
        <label for="country">Country</label>
        <input id="country" type="text">
      </div>

      <div class="pure-u-1 pure-u-md-2-5">
        <label for="email">E-Mail</label>
        <input id="email" type="email">
      </div>
    </div>

    <button type="submit" class="pure-button">Register</button>
  </fieldset>
</form>

To group many input controls together you have to wrap them in a <fieldset> element and add the class name pure-group. You can also set the size of input controls using the class pure-input-*. For example, pure-input-1-2 sets the width of the form to 50%.

Here’s a demo of a multi-column, grid-based form:

See the Pen Multi-column Grid-based Form with Pure.css by SitePoint (@SitePoint) on CodePen.

Extending and Customizing Pure

If you are not satisfied with the grid system that Pure provides you are free to create your own. You can use the starter kit tool on the official website to create your grid system. You may define your own breakpoints and grid units and you can specify the class names to use.

Like any framework, you can add additional styling on top of minimal styling that Pure provides. For example, you can define the styling of a “success” button:

.success-button {
  background: rgb(28, 184, 65);
  color: white;
  border-radius: 0px;
}

Then all you have to do is add the .success-button class from that rule set to a button element, to go along with Pure’s existing styles:

<button class="pure-button success-button">Success</button>

If you’re familiar with CSS, then this is nothing new, but beginners can see how this and other frameworks allow you to customize the base look of existing components with new styles.

Using Pure with Other Frameworks

Pure has no issues with simultaneous use of other frameworks like Bootstrap. For example, you can use Bootstrap’s modal.css and modal.js with Pure. This provides a lightweight way to create a modal. Here is the sample code:

<button data-target="#myModal" 
        class="pure-button" data-toggle="modal">
  Launch The Modal
</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 id="myModalLabel">A Functional Bootstrap + Pure Modal</h1>
      </div>

      <div class="modal-body">
        <p>To create the modal you just need to include the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap. Pure will take care of all low level styling. The result is a fully-functional Modal using just a fraction of the CSS.</p>
     </div>

      <div class="modal-footer">
        <button type="button" class="pure-button"
                id="success-button" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Below is a demo of this modal:

See the Pen Custom Button with Pure.css and Bootstrap Modal by SitePoint (@SitePoint) on CodePen.

Conclusion

Irrespective of its small size, Pure can meet most of your UI design needs. I suggest you give it a try and see how it fares. To follow the development of the framework visit Pure on GitHub.