If you’ve been working with Cascading Style Sheets (CSS) for a while, you’ve likely noticed the trend toward simpler CSS frameworks that get the job done. This article introduces one of the stronger examples. Pure CSS is a modular, responsive framework that puts its own spin on CSS development, with an approach that is minimal, lightweight, and yet comprehensive. Along with TailWind CSS, Pure offers an interesting rethinking of how we style web pages. It’s popular, too, with more than 22,000 stars on GitHub as of this writing.
Mobile-first CSS development
At the outset, Pure makes clear that it is mobile-first and delivers itself in a tiny file size: 3.7KB for the entire package when compressed. The framework is intended to be flat and extensible, offering a simple range of top-level tools that you can use and extend if necessary. It is built on top of normalize.css, which helps with smoothing any cross-browser roughness.
Using Pure is straightforward: you can include it yourself in the HTML page or use it from a content delivery network.
The framework consists of several modules:
We’ll look at each of these in turn.
The base module
As I mentioned, Pure builds on top of normalize.css. It adds a couple of useful features to that base module.
The hidden attribute is used to apply the hidden style (with the !important modifier applied by the framework), as shown in Listing 1.
Listing 1. The ‘hidden’ attribute
<input type="text" name="token" hidden>
The .pure-img class is used to quickly make a responsive image.
The grid layout
The grid layout is the heart of Pure’s responsive layout. Like Bootstrap‘s fundamental idea but stripped to essentials, Pure’s layout classes let you do a lot with very little syntax. You can see a basic layout in Listing 2 and view it live here.
Listing 2. Styling a simple grid layout in Pure CSS
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css" /> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css"> <style> sector { min-height: 150px; min-width: 199px; } sector:nth-of-type(1) { background: IndianRed; } sector:nth-of-type(2) { background: Moccasin; } sector:nth-of-type(3n) { background: thistle; } sector:nth-of-type(4) { background: seagreen; } sector:nth-of-type(5) { background: DarkSlateBlue; } sector:nth-of-type(7) { background: darkviolet; } </style>
</head>
<body> <div class="pure-g"> <sector class="pure-u-1-2 pure-u-md-1-3">Mt. Everest</sector> <sector class="pure-u-1-2 pure-u-md-1-3">K2</sector> <sector class="pure-u-1 pure-u-md-1-3">Kangchenjunga</sector> <sector class="pure-u-1 pure-u-md-1-2">Lhotse</sector> <sector class="pure-u-1 pure-u-md-1-2">Makalu</sector> <sector class="pure-u-1 pure-u-md-1-2">Cho Oyu</sector> <sector class="pure-u-1 pure-u-md-1-2">Dhaulagiri I</sector>
</div>
</body>
</html>
Along with simple styles to color the different parts of the grid, the markup and CSS in Listing 2 create a grid with three columns stacked on two columns for medium and larger displays, and two columns stacked on a single column for everything smaller. You can view it live here. If you resize your browser window, you’ll see the layout shift to the differing layouts. Figure 1 shows the two layouts: the larger screen layout above and the smaller screen size below.
IDGFigure 1. Two views of a responsive grid layout
The first step to achieving a responsive layout is to set the pure-g class on the container. Next, define your columns with the pure-u-* notation, like so:
pure-u-<DISPLAY-SIZE>-<COLUMN-SIZE>.
The <DISPLAY-SIZE> portion lets you define the device screen size where the <COLUMN-SIZE> applies. If you don’t set the display size, the column size is the default and applies from the smallest devices on up. This is known as a mobile-first responsive layout.
You can see this in action with the pure-u-1 and pure-u-1-2 classes on the sectors in Listing 2. To define the layout on medium-size devices and larger ones, the layout uses the pure-u-md-1-3 and pure-u-md-1-2 classes.
You can use column sizes to define what proportion of the available space the section will occupy. The numeral 1 means 100%, and every number after defines a fraction: 1-2 is one half, 1-3 is one third, and so on. For example, in the layout in Listing 2, the class pure-u-md-1-3 declares: when the screen size is medium, this segment will take up one third of the available width.
You can find the set of device sizes with their pixel width in the Pure CSS responsive-grids documentation. Pure offers both a 24th-based grid and a 5th-based grid.
Forms
Pure includes a handful of classes for quickly styling forms. Form support breaks down to the following categories:
- Default: Horizontal form
- Stacked: Vertical form
- Aligned: Vertical form with side-by-side labels
- Multicolumn (with pure grids): Responsive form
- Grouped inputs: Form with sections
- Input sizing: Input size control
- Required inputs: Styling for required fields
- Disabled inputs: Disabled field styles
- Read-only inputs: Read-only styling
- Rounded inputs: Rounded fields
- Checkboxes and radios: Traditionally finicky input styling
Listing 3 is an example of a stacked (vertical) form.
Listing 3. Styling a stacked form in Pure CSS
<form class="pure-form pure-form-stacked"> <fieldset> <legend>A Stacked Form</legend> <label for="stacked-email">Email</label> <input type="email" id="stacked-email" placeholder="Email" /> <span class="pure-form-message">This is a required field.</span> <label for="stacked-password">Password</label> <input type="password" id="stacked-password" placeholder="Password" /> <label for="stacked-state">State</label> <select id="stacked-state"> <option>AL</option> <option>CA</option> <option>IL</option> </select> <label for="stacked-remember" class="pure-checkbox"> <input type="checkbox" id="stacked-remember" /> Remember me </label> <button type="submit" class="pure-button pure-button-primary">Sign in</button> </fieldset>
</form>
Notice the pure-form and pure-form-stacked classes on the form itself.
Buttons
Pure offers simple ways to style default, disabled, and active buttons. You can also customize these components with scoped styles. Listing 4, taken from the Pure documentation, gives an example of how to change the corners and colors of buttons.
Listing 4. Customized buttons
<div> <style scoped=""> .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success { background: green; } .button-error { Background: maroon; } .button-warning { background: orange; } .button-secondary { background: lightblue; } </style> <button class="button-success pure-button">Success Button</button> <button class="button-error pure-button">Error Button</button> <button class="button-warning pure-button">Warning Button</button> <button class="button-secondary pure-button">Secondary Button</button>
</div>
The main idea here is to create styles that are added to the base pure-button style. These are used to override the default styles, providing colors and rounded corners. For example, the button-success class defines color, border-radius, text-shadow, and a background color of green.
Tables
Pure supports basic table stylings. To use them, just add the pure-table class to the table itself. Pure also has a couple of choices for how your borders and row shading will look on the table.
Menus
Pure includes a nice set of menu styles out of the box:
- Vertical menu
- Horizontal menu
- Selected and disabled items
- Drop-downs
- Vertical menu with submenus
- Scrollable horizontal menu
- Scrollable vertical menu
- Responsive menus that hide
These all perform about like you’d expect. You can find examples here. In particular, the responsive sidebar and vertical-to-horizontal menus are handy.
Extending Pure CSS
In addition to its solid core of features, Pure can be extended in a variety of ways.
It is fairly easy to add custom classes alongside Pure CSS classes. You saw this in a small way with the buttons styled in Listing 4, but it is almost as easy to add site-wide customizations.
You can use Grunt plugins to extend Pure and integrate with existing CSS. The framework is also largely built as Rework plugins, so you can integrate with other Rework tools.
Finally, you can extend Pure to work with other libraries like Bootstrap. You can use the Pure CSS basics that you’ve seen here, then pull in what you need from a more expansive tool like Bootstrap. This gives you the smallest possible footprint with all the features and functionality you need.