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

Pure

 Pure

Cf33841918d90fe941f522dde5ee4ff0?s=128

Eric Ferraiuolo

November 21, 2013
Tweet

Transcript

  1. Pure @ericf Yahoo purecss.io

  2. None
  3. Pure 4.4KB

  4. CSS Only NORMALIZE.CSS

  5. <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css"> $ bower install pure OR

  6. Common & Hard PROBLEMS

  7. Base Grids Forms Menus Tables Buttons

  8. <button class="pure-button"> Buy now </button> index.html Buy now

  9. .pure-button { display: inline-block; *display: inline; zoom: 1; line-height: normal;

    white-space: nowrap; vertical-align: baseline; text-align: center; cursor: pointer; font-family: inherit; font-size: 100%; *font-size: 90%; *overflow: visible; padding: 0.5em; background-color: #E6E6E6; color: #444; color: rgba(0, 0, 0, 0.80); *color: #444; border: 1px solid #999; border: none rgba(0, 0, 0, 0); border-radius: 2px; text-decoration: none; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pure-button { color: #fff; background-color: #70bf41; } app.css pure-button.css
  10. .pure-button { color: #fff; background-color: #70bf41; } app.css Buy now

  11. Pure & Sass OR ANY PREPROCESSOR

  12. <button class="pure-button"> Buy now </button> index.html Buy now

  13. <button> Buy now </button> index.html Buy now

  14. @import "pure"; ! button { @extend .pure-button; color: #fff; background-color:

    #70bf41; } app.scss Buy now
  15. Responsive Design

  16. 2 PROBLEMS

  17. @media screen and (min-width: 48em) { ... }

  18. @media screen and (min-width: 48em) { ... } 1. CAN’T

    OVERRIDE
  19. 2. IE < 9

  20. Pure & Tooling DEVELOPER WORKFLOW

  21. REWORK

  22. REWORK REWORK PLUGINS GRUNT PLUGINS WEB UI YEOMAN

  23. var rework = require('rework'), pureGrids = require('rework-pure-grids'); ! var css

    = rework('') .use(pureGrids.units(10)) .toString(); rework-pure-grids
  24. None
  25. Let’s Discuss @ericf Yahoo purecss.io