Pure CSS — Lightweight Responsive CSS Framework by Yahoo

Introduction

Pure is a collection of small CSS modules created by Yahoo. It provides a minimal foundation for responsive web design without the weight of full-featured frameworks, making it suitable for projects where page load performance matters.

What Pure CSS Does

• Provides a 12-column responsive grid system using pure-g and pure-u-* classes
• Ships ready-made styles for forms, buttons, menus, and tables
• Normalizes default browser styles for cross-browser consistency
• Supports stacked and horizontal form layouts with minimal markup
• Delivers all of the above in under 4 KB when minified and gzipped

Architecture Overview

Pure is built with Grunt and organized into independent CSS modules (base, grids, forms, buttons, menus, tables). Each module can be imported individually so teams only ship what they use. The grid relies on display: inline-block rather than floats, avoiding clearfix hacks.

Self-Hosting & Configuration

• Install via npm: npm install purecss
• Or pull individual modules: npm install purecss-grids
• Customize breakpoints by generating a custom build with the Grunt tooling
• Serve from your own CDN or bundle with any CSS pipeline
• No JavaScript runtime required; works with any backend or static site

Key Features

• Extremely small footprint (3.7 KB gzipped for the full bundle)
• Modular architecture lets you pick only the modules you need
• Responsive grid supports five breakpoints out of the box
• Built to layer on top of Normalize.css for consistent baselines
• Designed by Yahoo for high-traffic production sites

Comparison with Similar Tools

• Bootstrap — much larger with JS components; Pure is CSS-only and far smaller
• Tailwind CSS — utility-first approach requires build tooling; Pure works with a single CDN link
• Milligram — similarly lightweight but lacks the grid flexibility Pure offers
• Skeleton — comparable size but less actively maintained
• Bulma — more opinionated styling and larger bundle

FAQ

Q: Is Pure CSS still maintained? A: The project receives maintenance updates and the core modules remain stable for production use.

Q: Can I use Pure with React or Vue? A: Yes. Pure is plain CSS with no JavaScript, so it works with any framework or library.

Q: How does the responsive grid work? A: Add pure-g to a container and pure-u-* classes to children. Media query helpers like pure-u-md-1-3 control column widths at different breakpoints.

Q: Does Pure include a CSS reset? A: Pure builds on top of Normalize.css, which fixes cross-browser inconsistencies without a full reset.

Sources

• https://github.com/pure-css/pure
• https://purecss.io/