# Pure.css — Tiny Responsive CSS Modules by Yahoo

> A set of small, responsive CSS modules that you can use in every web project. Built with mobile in mind, Pure.css weighs only a few kilobytes and covers grids, forms, buttons, tables, and menus.

## Install

Save as a script file and run:

# Pure.css — Tiny Responsive CSS Modules by Yahoo

## Quick Use
```bash
npm install purecss
# Or via CDN:
# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" />
# Usage: <button class="pure-button pure-button-primary">Click</button>
```

## Introduction
Pure.css is a minimal CSS framework originally created by Yahoo. It provides a small set of responsive modules — grids, forms, buttons, tables, and menus — that together weigh under 4 KB gzipped. Its goal is to give developers a lightweight starting point without the overhead of a full framework.

## What Pure.css Does
- Provides a responsive 5ths and 24ths grid system built on Flexbox
- Styles form elements consistently across browsers with minimal markup
- Offers button classes with grouped, active, disabled, and primary variants
- Includes responsive table and menu modules for navigation patterns
- Ships each module independently so you can include only what you need

## Architecture Overview
Pure.css is organized as independent CSS modules compiled from a shared build system. The grid module uses percentage-based widths with Flexbox for alignment. Each module is self-contained with no inter-module dependencies, so you can load `grids-responsive-min.css` without pulling in buttons or forms. The framework uses a `pure-` class prefix to avoid naming conflicts with other CSS.

## Self-Hosting & Configuration
- Install via npm or use the CDN with individual module URLs
- Include only the modules you need (grids, forms, buttons, tables, menus) to minimize payload
- Customize breakpoints by building from source with your own media query definitions
- Layer your own styles on top — Pure.css is designed as a minimal base, not a complete design system
- Combine with Normalize.css (bundled) for consistent cross-browser defaults

## Key Features
- Extremely small — the entire framework is under 4 KB gzipped
- Modular architecture allows cherry-picking individual CSS modules
- Responsive grid supports 5ths and 24ths column units with configurable breakpoints
- No JavaScript dependency — entirely CSS-based
- Built on Normalize.css for a consistent cross-browser baseline

## Comparison with Similar Tools
- **Bootstrap** — far more comprehensive with JS components; much larger bundle
- **Bulma** — Flexbox-based with more components; larger footprint than Pure
- **Milligram** — similarly minimal; focuses on typography and spacing rather than grid modules
- **Skeleton** — another lightweight framework; less actively maintained
- **Tailwind CSS** — utility-first approach; gives more control but requires learning utility classes

## FAQ
**Q: Is Pure.css still maintained?**
A: The project receives periodic updates. Its small scope means fewer changes are needed compared to full-featured frameworks.

**Q: Can I use Pure.css with React or Vue?**
A: Yes. Apply Pure.css class names directly to your JSX or template markup. No special integration is required.

**Q: How does the grid system work?**
A: Wrap columns in a `pure-g` container and use `pure-u-*` classes for widths (e.g., `pure-u-1-2` for 50%). Add `pure-u-md-*` classes for responsive breakpoints.

**Q: Is it suitable for production applications?**
A: Pure.css works well as a lightweight base. For complex UIs, you will likely need additional custom CSS or a more feature-rich framework.

## Sources
- https://github.com/pure-css/pure
- https://purecss.io/

---
Source: https://tokrepo.com/en/workflows/7d882da7-41cf-11f1-9bc6-00163e2b0d79
Author: Script Depot