Building Beautiful Web Apps using Pure CSS

39416e8a4f8a9c9677a0a67da51f2207?s=47 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.

39416e8a4f8a9c9677a0a67da51f2207?s=128

Tilo

September 28, 2013
Tweet

Transcript

  1. Saturday, September 28, 13

  2. purecss.io github.com/yui/pure/ purecss.io BUILDING BEAUTIFUL WEB APPS USING PURE CSS

    Saturday, September 28, 13
  3. purecss.io github.com/yui/pure/ @tilomitra Saturday, September 28, 13

  4. 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
  5. 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
  6. purecss.io github.com/yui/pure/ purecss.io CSS frameworks can be very useful Saturday,

    September 28, 13
  7. purecss.io github.com/yui/pure/ CSS frameworks can look meh. Sites made using

    Saturday, September 28, 13
  8. purecss.io github.com/yui/pure/ CSS frameworks can look great. Sites made on

    top of Saturday, September 28, 13
  9. purecss.io github.com/yui/pure/ Saturday, September 28, 13

  10. purecss.io github.com/yui/pure/ Saturday, September 28, 13

  11. purecss.io github.com/yui/pure/ Saturday, September 28, 13

  12. purecss.io github.com/yui/pure/ Let’s consider the cons Saturday, September 28, 13

  13. purecss.io github.com/yui/pure/ CSS FRAMEWORK APP.CSS Saturday, September 28, 13

  14. purecss.io github.com/yui/pure/ CSS FRAMEWORK The part of the framework you

    use APP.CSS Saturday, September 28, 13
  15. 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
  16. 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
  17. purecss.io github.com/yui/pure/ BASE Normalize/Reset APP.CSS Saturday, September 28, 13

  18. 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
  19. purecss.io github.com/yui/pure/ All sites share some common elements Saturday, September

    28, 13
  20. purecss.io github.com/yui/pure/ All sites share some common elements Base Grids

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

    common components APP.CSS Saturday, September 28, 13
  22. 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
  23. 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
  24. purecss.io github.com/yui/pure/ purecss.io Saturday, September 28, 13

  25. 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
  26. purecss.io github.com/yui/pure/ BUILD YOUR APP USING PURE Saturday, September 28,

    13
  27. purecss.io github.com/yui/pure/ <link rel="stylesheet" href="http:// yui.yahooapis.com/pure/0.3.0/pure-min.css"> Saturday, September 28, 13

  28. purecss.io github.com/yui/pure/ $ bower install pure $ yo mobile Saturday,

    September 28, 13
  29. purecss.io github.com/yui/pure/ and that’s pretty much it... ...well, almost. Saturday,

    September 28, 13
  30. purecss.io github.com/yui/pure/ Unless you’re interested in... Customizing Pure Preprocessors Skinning

    Bleeding Edge Goodies Pure + JavaScript Saturday, September 28, 13
  31. purecss.io github.com/yui/pure/ Extending Pure <button  class="pure-­‐button  pure-­‐button-­‐primary">      

     A  Primary  Button </button> Saturday, September 28, 13
  32. purecss.io github.com/yui/pure/ <button  class="pure-­‐button  pure-­‐button-­‐primary"> Saturday, September 28, 13

  33. purecss.io github.com/yui/pure/ <button  class="pure-­‐button  pure-­‐button-­‐primary"> Base styles. Applies to all

    buttons. Saturday, September 28, 13
  34. purecss.io github.com/yui/pure/ <button  class="pure-­‐button  pure-­‐button-­‐primary"> Saturday, September 28, 13

  35. purecss.io github.com/yui/pure/ <button  class="pure-­‐button  pure-­‐button-­‐primary"> Presentational styles for a primary

    button. Saturday, September 28, 13
  36. purecss.io github.com/yui/pure/ <button  class="pure-­‐button">...</button> Saturday, September 28, 13

  37. purecss.io github.com/yui/pure/ <button  class="pure-­‐button">...</button> Add presentational styles for your own

    button. Saturday, September 28, 13
  38. 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
  39. purecss.io github.com/yui/pure/ All Pure components can be extended this way!

    Saturday, September 28, 13
  40. purecss.io github.com/yui/pure/ You can adopt this too. Separate styles into

    a base class and presentational classes. Saturday, September 28, 13
  41. 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
  42. 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
  43. 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
  44. purecss.io github.com/yui/pure/ Bleeding Edge Mobile-first Grids Responsive Menus } tilomitra.github.io/pure.html

    UI Components Typography Saturday, September 28, 13
  45. 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
  46. purecss.io github.com/yui/pure/ JS alternatives -webkit-overflow-scroll: touch; transition(...) @keyframes{...} Control CSS

    Animations and Transitions with JS Saturday, September 28, 13
  47. 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
  48. purecss.io github.com/yui/pure/ USE PURE FOR YOUR HACK Saturday, September 28,

    13
  49. purecss.io github.com/yui/pure/ I’LL BE HERE T O H E L

    P O U T Saturday, September 28, 13
  50. 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