Pure CSS By Yahoo

6,743 views

Published on

A talk at London Web from Riccardo Cocetta

Published in: Technology

Pure CSS By Yahoo

  1. 1. Pure A set of small, responsive CSS modules that you can use in every web project PRESENTED BY Riccardo Cocetta < rcocetta @ yahoo-inc.com > 21 November 2013
  2. 2. Intro, what’s Pure? §  Pure is an OpenSource CSS Framework, designed to be the CSS foundation for your web site or web app §  It wants to leave a Minimal Footprint ›  4.4 K if you use all the modules §  It wants to stay out of your way ›  Pure has minimal styling, and leaves that to you §  It’s made with mobile in mind ›  Pure is responsive §  It’s extensible §  Online customisation tools are available §  http://www.purecss.io 2 PureCSS – Riccardo Cocetta
  3. 3. Agenda §  A brief history of CSS §  CSS Normalization §  Responsiveness §  Pure ›  Modules ›  Customization ›  Tools §  Let’s play with code 3 Pure – Riccardo Cocetta – www.purecss.io
  4. 4. How did we get here?
  5. 5. Design vs Development Source: wix.com 5 Pure – Riccardo Cocetta – www.purecss.io
  6. 6. Design vs Development §  “In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed.” Marc Andreessen (cofounder of Netscape) §  On October 13, 1994 Marc Andreessen announced to www-talk that the first beta release of Mozilla (which later turned into Netscape Navigator) was available for testing. Among the new tags the new browser supported was center and more tags were to follow shortly. 6 Pure – Riccardo Cocetta – www.purecss.io
  7. 7. Brief history of CSS When Notes 1980 Stylesheets are already among us Since SGML (Standard General Markup Language) was around 1994 CHSS (Cascading HTML StyleSheet) Draft Presented 3 Days before the announcement of Netscape Navigator 1996 CSS level 1 Recommendation presented by W3C After some work and the presentation of other standards such as JSSS. IE3 was released 1998 CSS level 2 Recommendation Adds positioning, media type, font properties etc . Problematic adoption 2004-2007 CSS level 2.1 Solve problems with difficult adoption and some errata in the 2.0. Moved back and forth between Draft and CR 1999-2012 CSS level 3 Modules Different modules, introduces a lot of things … 7 What CSS 4 Some CSS4 modules are already around Pure – Riccardo Cocetta – www.purecss.io
  8. 8. CSS Frameworks §  In time we realised we were repeating the same patterns §  The way to avoid this was to build CSS Frameworks : ›  Libraries of CSS ›  Predefined elements ›  Predefined Layouts ›  Help you in not reinventing the wheel §  Many frameworks out there ›  ›  8 Different ideas Different philosophy Pure – Riccardo Cocetta – www.purecss.io
  9. 9. PURE Is a modular, lightweight CSS Framework http://www.purecss.io
  10. 10. Brow ser C o m p a t i b i l t y
  11. 11. Browser compatibility §  FACT: Browsers don’t render CSS in a consistent way §  For a while we just looked at the stats and made our choice ›  Until Q4 2004 Internet Explorer was still over 91% ›  Its competitors were •  Firefox ~ 3.6% •  Netscape ~ 2.5% •  Safari ~ 1.5% •  Opera ~ 0.5% §  Then something changed… 11 Pure – Riccardo Cocetta – www.purecss.io
  12. 12. Some numbers Sep 2013 Source: w3counter.com 12 Pure – Riccardo Cocetta – www.purecss.io
  13. 13. Mobile Browsers shares Source: www.netmarketshare.com - Oct 2013 13 Pure – Riccardo Cocetta – www.purecss.io
  14. 14. How do we solve this issue? Best viewed… 14 Pure – Riccardo Cocetta – www.purecss.io
  15. 15. CSS Normalization §  Removes the inconsistent styling of HTML elements provided by browsers §  Help you build your own CSS on a consistent base §  … unfortunately they don’t remove your need to check that the way your website looks across browsers is consistent 15 Pure – Riccardo Cocetta – www.purecss.io
  16. 16. PURE Builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft. http://www.purecss.io
  17. 17. Screen Size stats Size Share 1366x768 1024x768 1280x800 1920x1080 1280x1024 1440x900 768x1024 1600x900 320x480 1680x1050 19.73% 13.75% 7.77% 6.35% 5.91% 5.07% 4.98% 4.01% 3.51% 2.71% Top 10 Screen sizes 1600x900 320x480 768x1024 Pure – Riccardo Cocetta – www.purecss.io 1366x768 1440x900 1024x768 1280x1024 1920x1080 Source: www.w3counter.com 17 1680x1050 1280x800
  18. 18. Responsive Design §  Design a web site in order to have a good UX on different devices ›  Desktop ›  Tablet ›  Phone §  How ? ›  ›  Media Queries ›  Flexible images ›  … ›  Server side responsiveness ›  18 Flexible Grids … Pure – Riccardo Cocetta – www.purecss.io
  19. 19. PURE Pure is responsive out of the box, so elements look great on all screen sizes. http://www.purecss.io
  20. 20. Pure Modules
  21. 21. Pure Modules §  Pure is a modular system §  You can choose and import the modules you need ›  Base ›  Grids Base (1.2 KB) ›  Menus Grids (0.9 KB) ›  Forms Menus (1.2 KB) ›  Tables Forms (1.4 KB) ›  Buttons Tables (0.5 KB) §  The whole minified Library weighs 4.4 KB 21 Pure – Riccardo Cocetta – www.purecss.io Buttons (0.8 KB)
  22. 22. Base §  The base module of Pure is based on Normalize.css §  It defines some minimal typography: ›  Headings ›  Inline Styles ›  Lists ›  Blockquotes ›  Addresses ›  Abbr §  It does CSS Normalization 22 Pure – Riccardo Cocetta – www.purecss.io
  23. 23. Grids Pure bases its layout on grids: §  §  §  §  §  Pages can be seen as grids (pure-g) Grids contain units (pure-u) All child elements of a grid must be units Content goes inside grid units The width of the units is expressed in fractions §  Grids are flexible 23 Pure – Riccardo Cocetta – www.purecss.io
  24. 24. Grids A page 24 Pure – Riccardo Cocetta – www.purecss.io
  25. 25. Grids §  To create a grid ›  create a div ›  add the class “pure-g” ›  … all the elements inside it will now be considered as grid units §  The grid units inside the grid will have to be of class pure-u-* §  * is a fraction of the width of the grid, ›  e.g. pure-u-3-4 will have a width which is 75% that of the grid §  You can have nested grids 25 Pure – Riccardo Cocetta – www.purecss.io
  26. 26. Grid’s Example <div  class="pure-­‐g">                  <div  class="pure-­‐u-­‐1”></div>                  <div  class="pure-­‐u-­‐1-­‐4”></div>                  <div  class="pure-­‐u-­‐1-­‐3”></div>                  <div  class="pure-­‐u-­‐3-­‐4”></div>                  <div  class="pure-­‐u-­‐1-­‐3”></div>                  <div  class="pure-­‐u-­‐1-­‐2”>                            <div  class="pure-­‐g”>      <div  class=“pure-­‐u-­‐1-­‐2”></div>      <div  class=“pure-­‐u-­‐1-­‐2”></div>                            </div>                  </div>   </div>   26 Pure – Riccardo Cocetta – www.purecss.io
  27. 27. Responsive Grids §  Applying the class pure-g-r the grid becomes Responsive §  All the pure-u-* elements will behave normally for widths over 767px §  At 767px the pure-u-* elements will collapse to 100% width §  Helper classes: ›  ›  Pure-hidden-tablet (elements hidden between 768px and 979px) ›  27 Pure-hidden-phone (Elements hidden belox 768px) Pure-hidden-desktop (elements hidden above 979px) Pure – Riccardo Cocetta – www.purecss.io
  28. 28. Forms §  With the forms module you can easily create well designed form ›  Minimal and clean markup ›  Responsive ›  Different Sizes ›  Different Styles §  To style a form with Pure add the pure-form class to a form element 28 Pure – Riccardo Cocetta – www.purecss.io
  29. 29. Forms §  You can specify different types of form layout Compact Form Stacked Form .pure-form-stacked 29 Pure – Riccardo Cocetta – www.purecss.io Aligned Form .pure-form-aligned
  30. 30. Form Elements Sizing §  With the class pure-input-x-y it’s possible to size elements relatively to their container (just as for the grids) 30 Pure – Riccardo Cocetta – www.purecss.io
  31. 31. Styling and other elements §  Rounded elements with pure-input-rounded §  Group elements with pure-group 31 Pure – Riccardo Cocetta – www.purecss.io
  32. 32. Pure Menus §  A module to create your menus with pure-menu class §  Nicely style menus built with simple markup <div class="pure-menu pure-menu-open pure-menu-horizontal"> <div> <a href="#" class="pure-menu-heading">Site Title</a> href=”#">Site Title</a> <ul> <li class="pure-menu-selected"><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Flickr</a></li> <li><a href="#">Messenger</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Finance</a></li> </ul> </div> 32 Pure – Riccardo Cocetta – www.purecss.io
  33. 33. Pure Vertical Menus •  In pure menus are vertical by default •  So you just need to add pure-menu class •  Pure-menu-heading might be useful <div class="pure-menu pure-menu-open"> <a class="pure-menu-heading">Yahoo! Sites</a> <ul> <li><a href="#">Flickr</a></li> <li><a href="#">Messenger</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Finance</a></li> <li class="pure-menu-heading">More Sites!</li> <li><a href="#">Games</a></li> <li><a href="#">News</a></li> <li><a href="#">OMG!</a></li> </ul> </div> 33 Pure – Riccardo Cocetta – www.purecss.io
  34. 34. Pure Menu - Paginator §  Just add pure-paginator class <ul class="pure-paginator"> <li><a class="pure-button prev" href="#">«</a></li> <li><a class="pure-button" href="#">1</a></li> <li><a class="pure-button pure-button-active" href="#">2</a></li> <li><a class="pure-button" href="#">3</a></li> <li><a class="pure-button" href="#">4</a></li> <li><a class="pure-button" href="#">5</a></li> <li><a class="pure-button next" href="#">»</a></li> </ul> 34 Pure – Riccardo Cocetta – www.purecss.io
  35. 35. Pure Buttons In the buttons module you can find a nice set of buttons: <a class="pure-button" href="#">A Pure Button</a> <button class="pure-button">A Pure Button</button> <a class="pure-button pure-button-disabled" href="#"> A DisableButton</a> <a class="pure-button pure-button-primary" href="#"> A Primary Button</a> 35 Pure – Riccardo Cocetta – www.purecss.io
  36. 36. Customize buttons .pure-button-success, .pure-button-error, .pure-button-warning, .pure-button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .pure-button-success { background: rgb(28, 184, 65); /* this is a green */ } .pure-button-error { background: rgb(202, 60, 60); /* this is a maroon */ } .pure-button-warning { background: rgb(223, 117, 20); /* this is an orange */ } .pure-button-secondary { background: rgb(66, 184, 221); /* this is a light blue */ } 36 Pure – Riccardo Cocetta – www.purecss.io
  37. 37. Pure Tables In the tables module you can find different examples of tables <table class="pure-table"> <thead> <tr> <th>#</th> <th>Make</th> <th>Model</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Honda</td> <td>Accord</td> <td>2009</td> </tr> […] </tbody> </table> 37 Pure – Riccardo Cocetta – www.purecss.io
  38. 38. Pure Tables <table class="pure-table-bordered”> <table class="pure-table-horizontal”> <table class="pure-table-striped”> *this won’t work in IE8 or lower as it uses the CSS3 nth-child selector 38 Pure – Riccardo Cocetta – www.purecss.io
  39. 39. Modules Summary §  Pure is modular §  You can pick any module you want choosing from Name Base http://yui.yahooapis.com/pure/0.3.0/base-min.css Buttons http://yui.yahooapis.com/pure/0.3.0/buttons-min.css Forms (Responsive) http://yui.yahooapis.com/pure/0.3.0/forms-min.css Forms (Non-Responsive) http://yui.yahooapis.com/pure/0.3.0/forms-nr-min.css Grids (Responsive) http://yui.yahooapis.com/pure/0.3.0/grids-min.css Grids (Non-Responsive) http://yui.yahooapis.com/pure/0.3.0/grids-nr-min.css Menus (Responsive) http://yui.yahooapis.com/pure/0.3.0/menus-min.css Menus (Non-Responsive) http://yui.yahooapis.com/pure/0.3.0/menus-nr-min.css Tables 39 URL http://yui.yahooapis.com/pure/0.3.0/tables-min.css Pure – Riccardo Cocetta – www.purecss.io
  40. 40. More …
  41. 41. How do I get Pure? §  www.purecss.io is your first reference §  Download and link the rollup you want ›  Responsive •  http://yui.yahooapis.com/pure/0.3.0/pure-min.css ›  Non Responsive •  http://yui.yahooapis.com/pure/0.3.0/pure-nr-min.css §  Or download only the modules you need ›  ›  41 Yahoo CDN supports combo handling, so with 1 HTTP request you can get the modules you need http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/gridsmin.css&pure/0.3.0/forms-min.css Pure – Riccardo Cocetta – www.purecss.io
  42. 42. Predefined Layouts + Extensions §  Pure stays out of your way, but if you want… §  Layout examples from the Pure team for ›  Blog ›  E-Mail ›  Photo Gallery ›  Landing Page ›  Pricing table §  You can find them at http://purecss.io/layouts/ §  You can easily extend Pure with your own classes §  You can make it work with other frameworks such as Bootstrap 42 Pure – Riccardo Cocetta – www.purecss.io
  43. 43. Online Tools + Contribute §  Skin Builder ›  Online application to help you build a theme for Pure ›  Quickly put together a Skin for your web site §  Grid Builder ›  Helps you to create your Pure Grid §  Contribute on GitHub ›  ›  43 Pure is an open-source project under the BSD License. We welcome issues, pull requests, and feedback https://github.com/yui/pure/ Pure – Riccardo Cocetta – www.purecss.io
  44. 44. Resources and references Resource Pure purecss.io Pure Github github.com/yui/pure YUI yuilibrary.com Skin Builder yui.github.io/skinbuilder/?mode=pure Reference Link WebStats W3counter.com CSS History http://www.w3.org/Style/LieBos2e/history/Overview.html Mobile Stats 44 Reference www.netmarketshare.com Pure – Riccardo Cocetta – www.purecss.io
  45. 45. What’s next?

×