Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pure Bliss

Tilo
May 30, 2013

Pure Bliss

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

Tilo

May 30, 2013
Tweet

More Decks by Tilo

Other Decks in Technology

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