Apps

Working with Pure CSS Modules, part 1

Pure CSS modules allow web developers to quick-start projects with responsive design. Here are overviews for three of the six available modules.

Pure is a set of small, responsive CSS modules created by Yahoo! that you can be used in your web development and projects. All you need to do is call the style sheet within the <head> element of your web page document from their CDN (Content Delivery Network) source with the <link> reference displayed below:

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

This then gives you access to the Pure CSS with a minimal footprint; the entire set of modules has been clocked at 4.2KB when minified and gzipped into one compressed file. Individually the six modules are distributed and sized as listed below:

  • Base 1.2 KB
  • Grids 0.7KB
  • Forms 1.8KB
  • Buttons 0.9KB
  • Tables 0.6KB
  • Menus 1.1KB

The modules are also available individually: you can customize your implementation from two "rollups" one responsive and one non-responsive, or from the GitHub download as a zip compressed file. If you want to select just a few of the modules that option is available also, and I will review each module to give you a general idea of what is available with each selection. This piece will review the Base, Grids, and Forms modules, and part two will continue with a review of the Buttons, Tables, and Menus modules.

Pure CSS also provides the YUI Skin Builder, which you can use to create your own CSS. It's a great tool for creating your own themes using its minimalist styling (Figure B). I will review the YUI Skin Builder in detail in another blog post in the future.

Figure B

You can also pull the Pure CSS modules with combinations so that your requests will pull a single file back as the example shown below pulls from the base, grid, and forms modules:

<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.2.0/base-min.css&pure/0.2.0/grids-min.css&pure/0.2.0/forms-min.css">

Base module

The foundation of Pure CSS Base Module is built on top of Normalize.css, which targets only the styles that need normalizing to render all elements more consistently and in line with modern browser standards. The base module handles fonts in ems, headings, ordered and unordered lists, blockquote, abbreviations, addresses, and inline styles as a starting point. If you only want to use the Base Module you can pull it from within the <head> element using the <link> reference below:

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

Grids

The Pure CSS Grids Module provides a fully responsive and customizable grid with pure-g styles in a row or "grid", and grid-u-*-* styles in columns or units; each pure-g can contain many units. Each unit can have various class names that represent their widths, for instance, pure-u-1-2 has a width of 50%, and pure-u-1-4 has a width of 25%. The only limitation is that all "units" are child elements of a "grid", so if you have an element with a pure-u-* class name then it needs to be within the parent element such as pure-g or pure-g-r class name. Also, by default, Pure CSS Grids do not have any margin or padding, so if you need to add them you would need to incorporate them into the child containers. The example code snippet displayed below highlights the Grid module usage.

<div class="pure-g">
       <div class="pure-u-1-2">
       <p>1st Half</p>
    </div>
    <div class="pure-u-1-2">
       <p>2nd Half</p>
    </div>
    <div class="pure-u-1-3">
        <p>1st Third</p>
    </div>
    <div class="pure-u-1-3">
        <p>2nd Third</p>
    </div>
    <div class="pure-u-1-3">
        <p>3rd Third</p>
    </div>
    <div class="pure-u-1-4">
       <p>1st Quarter</p>
    </div>
    <div class="pure-u-1-4">
       <p>2nd Quarter</p>
    </div>
    <div class="pure-u-1-4">
       <p>3rd Quarter</p>
    </div>
    <div class="pure-u-1-4">
       <p>4th Quarter</p>
    </div>
 </div>
The code snippet above with added outline styles for illustrative purposes is displayed as shown in Figure C:

If you want to use just the Grids Module, you can pull it from within the <head> element using the <link> reference below:

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

Forms

The Pure CSS Forms Module only requires that you add the pure-form class name to any <form> element; a stacked form with input elements just below input labels is available with the pure-form-stacked class name added to any <form> element along with the pure-form class name. For aligned forms where the labels are right-aligned against the form input controls, use the pure-form-aligned class name along with the pure-form class name within your <form> elements. Several example code snippets are provided below to illustrate the Forms module usage.

A simple and compact inline form:

<form class="pure-form">
    <fieldset>
        <legend>A sample compact inline form</legend>
        <input type="email" placeholder="Email">
        <input type="password" placeholder="Password">
        <label for="remember">
            <input id="remember" type="checkbox"> Remember me
        </label>
        <button type="submit" class="pure-button notice">Sign in</button>
    </fieldset>
</form>
The code snippet above displays as shown in Figure D:

Multi-column form using Pure Grids, including the form elements within a stacked form:

<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Pure Form Grid and Stacked</legend>
        <div class="pure-g-r">
            <div class="pure-u-1-3">
                <label for="first-name">First Name</label>
                <input id="first-name" type="text">
            </div>
            <div class="pure-u-1-3">
                <label for="last-name">Last Name</label>
                <input id="last-name" type="text">
            </div>
            <div class="pure-u-1-3">
                <label for="email">E-Mail</label>
                <input id="email" type="email" required>
            </div>
            <div class="pure-u-1-3">
                <label for="city">City</label>
                <input id="city" type="text">
            </div>
            <div class="pure-u-1-3">
                <label for="state">State</label>
                <select id="state" class="pure-input-medium">
                    <option>AL</option>
                    <option>CA</option>
                    <option>IL</option>
                    <option>LA</option>
                    <option>NC</option>
                </select>
            </div>
        </div>
        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox"> I've read the terms and conditions
        </label>
        <button type="submit" class="pure-button notice">Submit</button>
    </fieldset>
</form>
The code snippet above displays as shown in Figure E:

If you only want to use the Pure CSS Forms Module you would pull it from within the <head> element using the <link> reference below:

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

In my next post on Pure CSS, I will review the Pure CSS Modules for Buttons, Tables, and Menus, in addition to a short review of options for extending the style guide based on the Scalable and Modular Architecture for CSS (SMACSS) conventions. Finally, I will also include a review some of the common layouts provided by the Pure CSS system that allow you to quick-start your next web design project.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks