HTML & CSS
Article

Introducing Pure.css – A Lightweight Responsive Framework

By Monty Shokeen

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

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.

  • prince.gr

    Pure is indeed lightweight and the grid system is easy to learn, as long as you keep in mind that the grid units are inline-blocks and not floated blocks as in most other systems. That means that horizontal or vertical centering is easy to achieve but there are no offsets as in other systems. Other than that, the starting CSS files are short and easy to built upon.

  • just.visitor

    I have been using Pure grid system for a while and I like it a lot :) Naming conventions and this “inline-block” joke is realy fine :) Only had an issue with css post-processor – Pure use “*” (asterisk) prefix for (IE-only ?) classes and some post-processor scripts removes them :/ Then it is count with wrong numbers and layout is broken.

  • M S i N Lund

    But Yahoo killed off yui a year ago:
    Why would anyone migrate TO this now?

    • LouisLazaris

      Why would that be a problem? You can always host the files yourself. I don’t think they’re going to kill of the CDN links anyhow.

    • Kev

      YUI !== Pure
      They are different projects. Yahoo has a number of projects that are alive and well and not YUI.

      • M S i N Lund

        Fair enough.

        It was the “yui” in their url:
        “yui.yahooapis” that fooled me.

  • Jim Cook

    I’ve used Pure in a few projects and I like it. My biggest gripe, though, is the stinkin’ name. Seriously. Try searching for something like “Pure CSS multi level dropdown”: you get tons of results for “pure” (as in not added to by JavaScript) CSS solutions. Now try “Semantic UI multi level dropdown” or “Bootstrap multi level dropdown”. See?

  • SouL Prisoner

    Don’t you need jS to make the empty spaces to enter your e-mail/user name and password??

  • Assaf Oppenheimer

    In what way is it better than bootstrap except for being smaller in size and features? Bootstrap is the standard de facto (except for Foundation maybe) and it’s great. if you are familiar with it you can easily get around other people’s code. It is not small perhaps, but it will grow with you while with a smaller framework you’ll get stuck. It has numerous utilities and compatible add ons. Great documentation. Consistent and easy to customise CSS. I don’t see why use a partial framework just because it’s partial.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.