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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide