# Pure CSS — Lightweight Responsive CSS Framework by Yahoo

> A set of small responsive CSS modules that can be used in every web project. Pure is ridiculously tiny and provides a responsive grid, menus, forms, buttons, and tables out of the box.

## Install

Save as a script file and run:

# Pure CSS — Lightweight Responsive CSS Framework

## Quick Use
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css">
<div class="pure-g">
  <div class="pure-u-1-2">Half width column</div>
  <div class="pure-u-1-2">Half width column</div>
</div>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-7a6ec25a
Author: Script Depot