An introduction to Pure: A set of small, responsive CSS modules that you can use in every web project.

1. purecss.io github.com/yui/pure/
A set of small, responsive, CSS modules
that you can use in every web project.
purecss.io github.com/yui/pure/

2. purecss.io github.com/yui/pure/
So, CSS frameworks are really useful
purecss.io github.com/yui/pure/

3. purecss.io github.com/yui/pure/purecss.io github.com/yui/pure/

4. purecss.io github.com/yui/pure/
All sites share some common elements.
Base Grids Forms
Menus Tables Buttons

5. purecss.io github.com/yui/pure/
How are we writing the CSS?
CSS Framework Custom Styles+
Potentially *lots* of unused CSS rules
Heavy (do we need 8k lines of CSS?)
Overwriting existing rules is annoying

6. purecss.io github.com/yui/pure/
The other extreme
Custom Styles+
Have to handle browser inconsistencies
Can’t focus on your application’s design
Base

7. purecss.io github.com/yui/pure/
Instead, consider this.
Custom Styles+Pure
A minimal set of CSS styles for common components

8. purecss.io github.com/yui/pure/
Say hello to Pure
Set of small, responsive, CSS modules
Under 5KB minified + gzipped
Minimal and flat design
A foundational CSS layer for every web project

9. purecss.io github.com/yui/pure/
We open-sourced
everything.
Even the website.
github.com/yui/pure
github.com/yui/pure-site/

10. purecss.io github.com/yui/pure/
We made some
layouts to help
you get started.
purecss.io/layouts/

11. purecss.io github.com/yui/pure/
purecss.io
Tilo Mitra
Front-end Engineer, YUI Team
Yahoo!