Css style

Introduction to Pure CSS: Minimal and Modular CSS Layouts

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.

The 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



The .pure-img class is used to quickly make a responsive image.

Grid Layout

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.

A simple grid in Pure CSS. IDG

Figure 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 this:


pure-u--.

The 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 and pure-u-1-2 classes on sectors in Listing 2. To set the layout on medium and larger devices, the layout uses the pure-u-md-1-3 and pure-u-md-1-2 Classes.

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.

Shapes

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


A Stacked Form This is a required field.

Notice the pure-form and pure-form-stacked classes on the form itself.

Buttons

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 color, border-radius, text-shadowand one background color of green.

the tables

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.

menus

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

It all works as you’d expect. You can find examples here. In particular, the answer lateral bar and vertical to horizontal the menus are practical.

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.