Pure Bliss

Introduction to Pure - A set of small, responsive, CSS modules
that you can use in every web project.

Transcript

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/
   

   View Slide

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

   View Slide

3. purecss.io github.com/yui/pure/
   purecss.io github.com/yui/pure/
   Some of my favorite web UIs
   are made using CSS frameworks
   

   View Slide

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

   View Slide

5. purecss.io github.com/yui/pure/
   purecss.io github.com/yui/pure/
   But let’s think about
   this a bit more...
   

   View Slide

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

   View Slide

7. 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
   

   View Slide

8. 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
   

   View Slide

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

   View Slide

10. purecss.io github.com/yui/pure/
    Custom Styles
    +
    Pure
    A minimal set of CSS styles for common components
    CSS Framework +
    Modals, Popovers, Tooltip, etc.
    

    View Slide

11. purecss.io github.com/yui/pure/
    Say hello to Pure
    Foundational CSS modules for every web project
    Under 4KB minified + gzipped
    Minimal and flat design, that you can build on
    Namespaced .pure-*
    On Yahoo! CDN
    

    View Slide

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

    View Slide

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

    View Slide

14. purecss.io github.com/yui/pure/
    purecss.io
    @tilomitra @ericf
    

    View Slide