Pure

Transcript

1. Pure @ericf Yahoo purecss.io
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
25. Let’s Discuss @ericf Yahoo purecss.io