If you’ve been working with Cascading Style Sheets (CSS) for a while, you’ve probably noticed the trend toward simpler CSS frameworks that get the job done. This article presents one of the strongest examples. Pure CSS is a modular and responsive framework that puts its own spin on CSS development, with a minimal, lightweight, yet comprehensive approach. With TailWind CSS, Pure offers an interesting overhaul of the way we style web pages. It’s popular too, with over 22,000 stars on GitHub at the time of this writing.
Mobile-first CSS development
Initially, Pure makes it clear that it’s mobile-first and comes in a small file size: 3.7KB for the entire package when compressed. The frame is designed to be flat and expandable, providing a simple range of high level tools that you can use and expand as needed. It is built above
normalize.csswhich helps smooth out any cross-browser roughness.
Using Pure is simple: you can include it yourself in the HTML page or use it from a content delivery network.
The framework consists of several modules:
We will consider each of them in turn.
The basic module
As I mentioned, Pure relies on normalize.css. It adds some useful features to this base module.
hidden The attribute is used to apply the hidden style (with the attribute
!important modifier applied by the framework), as shown in Listing 1.
Listing 1. The ‘hidden’ attribute
.pure-img class is used to quickly make a responsive image.
The grid layout is at the heart of Pure’s responsive layout. As PrimeA basic idea but stripped down to the bare essentials, Pure’s layout classes allow you to 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
Mt. Everest K2 Kangchenjunga Lhotse Makalu Cho Oyu Dhaulagiri I
Besides simple styles to color the different parts of the grid, the markup and CSS in Listing 2 creates a grid with three columns stacked by two columns for medium and large displays, and two columns stacked by a single column for anything that is smaller. You can see it live here. If you resize your browser window, you will see the layout switch to different layouts. Figure 1 shows the two layouts: the larger screen layout above and the smaller screen size below.
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 this:
allows you to set the screen size of the device where
applies. If you don’t set the display size, the column size is the default and applies from the smallest devices. This is known as a mobile-first responsive layout.
You can see it in action with the
pure-u-1-2 classes on sectors in Listing 2. To set the layout on medium and larger devices, the layout uses the
You can use column sizes to define how much of the available space the section will occupy. The number 1 means 100%, and each number after defines a fraction: 1-2 is half, 1-3 is a third, and so on. For example, in the layout of Listing 2, the class
pure-u-md-1-3 declares: when the screen size is medium, this segment will occupy one third of the available width.
You can find the set of device sizes with their width in pixels in the Responsive grids documentation in pure CSS. Pure offers both a 24-based grid and a 5-based grid.
Pure includes a handful of classes for quickly styling forms. Forms support falls into the following categories:
- Default: Horizontal form
- Stacked: Vertical shape
- Aligned: Vertical form with side-by-side labels
- Multicolumn (with pure grids): Responsive form
- Group entries: Form with sections
- Input sizing: Input size control
- Inputs required: style for required fields
- Inputs disabled: Field styles disabled
- Read-only entries: read-only style
- Rounded entries: Rounded fields
- Checkboxes and radios: Traditionally temperamental input style
Listing 3 is an example of a stacked (vertical) form.
Listing 3. Styling a Stacked Form in Pure CSS
pure-form-stacked classes on the form itself.
Pure offers easy ways to style default, disabled and active buttons. You can also customize these components with extended styles. Listing 4, taken from the Pure documentation, gives an example of how to change corners and button colors.
Listing 4. Custom Buttons
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 the class defines
background color of green.
Pure supports basic table styles. To use them, just add the
pure-table class at the table itself. Pure also has a few choices for the look of your borders and line shading on the table.
Pure includes a nice set of ready-to-use menu styles:
- vertical menu
- horizontal menu
- Selected and disabled items
- Drop-down lists
- Vertical menu with submenus
- Drop-down horizontal menu
- Vertical drop-down menu
- Responsive menus that hide
Extension of pure CSS
In addition to its solid core of features, Pure can be extended in a number of ways.
It’s quite easy to add custom classes alongside Pure CSS classes. You saw it in a small way with the styled buttons in List 4, but it’s almost as easy to add site-wide customizations.
You can use Grunt plugins to extend Pure and integrate it with existing CSS. The frame is as extensively constructed 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 basics of Pure CSS you’ve seen here and then extract what you need from a more extensive tool like Bootstrap. This gives you the smallest possible footprint with all the features and functionality you need.
Copyright © 2022 IDG Communications, Inc.