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

Building Beautiful Web Apps using Pure CSS

Tilo
September 28, 2013

Building Beautiful Web Apps using Pure CSS

Introduces the Pure CSS Framework, and dives into extending it, using preprocessors, and making unique designs on top of the framework.

This talk was originally given at Yahoo Open Hack USA 2013.

Tilo

September 28, 2013
Tweet

More Decks by Tilo

Other Decks in Technology

Transcript

  1. purecss.io github.com/yui/pure/ 30:00 Good looking hacks win. I’m here to

    help you write CSS to make your hack look sexy. Saturday, September 28, 13
  2. purecss.io github.com/yui/pure/ 30:00 What problem does Pure solve? Hacking with

    Pure CSS tips, tricks and tools Saturday, September 28, 13
  3. purecss.io github.com/yui/pure/ CSS FRAMEWORK The part of the framework you

    use The CSS you write to overwrite the framework APP.CSS Saturday, September 28, 13
  4. purecss.io github.com/yui/pure/ CSS FRAMEWORK Potentially lots of unused CSS rules

    Heavy (do you need 8000 lines of CSS?) Overwriting existing rules is annoying Hard to update Saturday, September 28, 13
  5. purecss.io github.com/yui/pure/ BASE + APP Write lots of boilerplate code

    Can’t focus on your application’s design Saturday, September 28, 13
  6. purecss.io github.com/yui/pure/ All sites share some common elements Base Grids

    Forms Menus Tables Buttons Saturday, September 28, 13
  7. purecss.io github.com/yui/pure/ PURE A minimal set of CSS styles for

    common components APP.CSS Saturday, September 28, 13
  8. purecss.io github.com/yui/pure/ Say hello to Pure Foundational CSS modules for

    every web project 4KB minified + gzipped Minimal and flat design, that you can build on Namespaced .pure-* On Yahoo CDN Saturday, September 28, 13
  9. purecss.io github.com/yui/pure/ Say hello to Pure 690+ FORKS 5900+ STARS

    4,000+ TWEETS 3,600,000+ PAGE VIEWS Saturday, September 28, 13
  10. purecss.io github.com/yui/pure/ A set of small, responsive, CSS modules that

    you can use in every web project purecss.io RECAP Saturday, September 28, 13
  11. purecss.io github.com/yui/pure/ <button  class="pure-­‐button"> <head> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure- min.css"> <style>

    .pure-button { background: #ddd; color: #111; font-weight: bold; ... } </style> </head> <body> <button  class="pure-button">My  custom  button</button> Saturday, September 28, 13
  12. purecss.io github.com/yui/pure/ You can adopt this too. Separate styles into

    a base class and presentational classes. Saturday, September 28, 13
  13. purecss.io github.com/yui/pure/ Preprocessors Don’t use them on Pure’s source files.

    Use them in your app’s CSS instead! Saturday, September 28, 13
  14. purecss.io github.com/yui/pure/ @import “pure”; @primaryColor: red; @backgroundColor: #fff; @textColor: #111;

    @buttonBgColor: #ddd; .pure-button { background: @buttonBgColor; color: @textColor; } ... app.scss Pull in Pure’s CSS file... ...Then add or modify classes Saturday, September 28, 13
  15. purecss.io github.com/yui/pure/ Skinning 1 click = a whole new skin

    No need to code yui.github.io/skinbuilder/?mode=pure Saturday, September 28, 13
  16. purecss.io github.com/yui/pure/ Pure + JS Pure works with all JS

    frameworks Use what you like Focus on your hack, not on the stack Saturday, September 28, 13
  17. purecss.io github.com/yui/pure/ RECAP Use via <link>, bower, or yo Don’t

    modify Pure source files Skin Builder Saturday, September 28, 13
  18. purecss.io github.com/yui/pure/ Thanks! TILO MITRA Twitter/Github: @tilomitra Thanks to Woot

    for the awesome rainbow unicorn drawings. http://go-ccart.deviantart.com/art/Woot-354798326 Saturday, September 28, 13