The first segment on Pure CSS Modules reviewed the Base, Grid, and Forms Modules, and included several code snippets and display results to illustrate the simplicity and ease of use when calling the <link> reference in your web page documents’ <head> element.

This piece will continue with a review of the three remaining modules, Buttons, Tables, and Menus, an overview of the extensible conventions available based on the Scalable and Modular Architecture for CSS (SMACSS), and finally, a review of the layouts that Pure CSS provides for quick-start design projects.

Buttons

The Pure CSS Buttons Module provides default, disabled, active, primary, and customized buttons with colors, rounded corners, different sizes, and buttons with icons. Creating a default Pure Button requires a class of pure-button added to any anchor <a> or <button> element as shown in Figure B:

Disabled buttons require a pure-button-disabled class name alongside the pure-button class name. Active buttons that appear pressed upon hover or click require the pure-button-active class name alongside the pure-button class name. An example code snippet of the active button is displayed below along with the result displayed in Figure C below with the right button actively “pressed.”

<a class="pure-button pure-button-active" href="#">An Active Pure Button</a>
<button class="pure-button pure-button-active">An Active Pure Button</button>

Figure C

Customizing buttons with background colors and rounded borders only require grouping your CSS into a class such as pure-button-foo which is then appended to the pure-button class name. The following CSS and HTML code snippets below are followed by the display result in Figure D.

        .pure-button-success,
        .pure-button-error,
        .pure-button-warning,
        .pure-button-secondary {
            color: black;
            border-radius: 8px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
        .pure-button-success {
            background: rgb(152,251,152); /* this is a pale green */
        }
        .pure-button-error {
            background: rgb(220,20,60); /* this is a crimson red */
        }
        .pure-button-warning {
            background: rgb(255,255,0); /* this is an yellow */
        }
        .pure-button-secondary {
            background: rgb(175,238,238); /* this is a pale turquoise */
        }
<button class="pure-button pure-button-success">Success Button</button>
<button class="pure-button pure-button-error">Error Button</button>
<button class="pure-button pure-button-warning">Warning Button</button>
<button class="pure-button pure-button-secondary">Secondary Button</button>

Figure D

Tables

The Pure CSS Tables Module includes the default style called from the pure-table class name, where this adds padding and borders with emphasis on the table header. Other table options include the bordered tabled called by the pure-table-bordered class name when added to any <table> element, a table with horizontal borders is created when calling the pure-table-horizontal class name to any <table> element, and a striped table is created when calling the pure-table-odd class name to every other <tr> element, making a zebra styled table, a code snippet of the table header and first three rows, and then the resulting display is shown below in Figure E.

<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
        <tr class="pure-table-odd">
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>

Figure E

Menus

The Pure CSS Menus Module includes styling vertical menus, horizontal menus, menus with headings, dropdowns to menus, menus with disabled items, and paginators. Vertical menus are the default and are called using the pure-menu class to style the menu, and the pure-menu-open class guarantees that the menu is visible.

The horizontal menu is styled by calling the pure-menu-horizontal class name and you can mark a list element using the pure-menu-selected class name to make it an active list element. The example code snippet and resulting display of the horizontal menu is displayed in Figure F below.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#">Home</a></li>
        <li class="pure-menu-selected"><a href="#">Blog</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

Figure F

To add headings to your horizontal menu, just place your heading content outside of the <ul> element, wrap it in an anchor <a> element, and add the pure-menu-heading class name as shown in the code snippet below (Figure G).

<a href="#" class="pure-menu-heading">Pure Menu Heading</a>

Figure G

To create a paginated menu add the pure-paginator class name to a <ul> element and to add controls that look like buttons add the pure-button class name.

Extend Pure CSS

Using the power SMACSS, you can build on top of Pure CSS modules using the conventions that match module rules as specified in the SMACCS style guide. And as a general rule, you want to be sure to use class names when defining a set of module rule style sets and avoid using IDs, the reason being that you will most likely want to use module rule sets for a number of elements and it is also probable that descendent or child selectors will be used to target those same elements.

Layouts

The CSS Pure Modules also has a set of layouts that allow you to jump-start web pages specifically styled for typical landing pages, photo gallery pages, email pages, and blogs. With each layout, you can view them as individual demo pages and then you are free to copy and review the source code as a starting point for your own creative use. The Landing Page layout utilizes a responsive product landing page while leveraging the Pure CSS Modules for Grids and Menus. A screen capture of the Landing Page layout demo with the inspect element open in the Chrome browser is displayed in Figure H below.

Figure H

The Photo Gallery layout uses a responsive photo gallery and it leverages the Pure CSS modules for Grids, Menus, and Forms. The Email layout uses a responsive email inbox and uses the Pure CSS Modules for Grids and Menus, and finally, the Blog layout demos a blog page with a sample list of posts and it uses the Pure CSS Modules for Grids, Menus, and Buttons.

More resources

Pure CSS Modules includes a change log found at the updates section, and the YUI Skin Builder is available for creating your own styles, schemes, items and code. The YUI Library provides a free open source library for helping to build rich, interactive web applications.