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.

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