pure css by yahoo

Pure

PRESENTED BY Riccardo Cocetta < rcocetta @ yahoo-inc.com > 21 November 2013

A set of small, responsive CSS modules that you can use in every web project

Intro, what’s Pure?

2

§  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

PureCSS – Riccardo Cocetta

Agenda

3

§  A brief history of CSS §  CSS Normalization §  Responsiveness

§  Pure ›  Modules ›  Customization ›  Tools

§  Let’s play with code

Pure – Riccardo Cocetta – www.purecss.io

How did we get here?

Design vs Development

5 Pure – Riccardo Cocetta – www.purecss.io

Source: wix.com

Design vs Development

6

§  “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.


Brief history of CSS

7

When What 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

… CSS 4 Some CSS4 modules are already around


CSS Frameworks

8

§  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 ›  Different ideas ›  Different philosophy


PURE

Is a modular, lightweight CSS Framework

http://www.purecss.io

Browser Compat ib i l ty

Browser compatibility

11

§  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…


Some numbers

12

Source: w3counter.com

Sep 2013


Mobile Browsers shares

13

Source: www.netmarketshare.com - Oct 2013


How do we solve this issue? Best viewed…

14 Pure – Riccardo Cocetta – www.purecss.io

CSS Normalization

15

§  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


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.


Size Share

1366x768 19.73% 1024x768 13.75% 1280x800 7.77% 1920x1080 6.35% 1280x1024 5.91% 1440x900 5.07% 768x1024 4.98% 1600x900 4.01% 320x480 3.51% 1680x1050 2.71%

Screen Size stats

17

1366x768

1024x768

1280x800

1920x1080

1280x1024

1440x900

768x1024

1600x900 320x480 1680x1050

Top 10 Screen sizes

Source: www.w3counter.com


Responsive Design

18

§  Design a web site in order to have a good UX on different devices ›  Desktop ›  Tablet ›  Phone

§  How ? ›  Flexible Grids ›  Media Queries ›  Flexible images ›  … ›  Server side responsiveness ›  …


PURE

Pure is responsive out of the box, so elements look great on all screen sizes.


Pure Modules

Pure Modules

21

§  Pure is a modular system §  You can choose and import the modules you need

›  Base ›  Grids ›  Menus ›  Forms ›  Tables ›  Buttons

§  The whole minified Library weighs 4.4 KB

Base (1.2 KB)

Grids (0.9 KB)

Menus (1.2 KB)

Forms (1.4 KB)

Tables (0.5 KB)

Buttons (0.8 KB)


Base

22

§  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


Grids

23

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


Grids

24

A page


Grids

25

§  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


Grid’s Example

26

<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-‐1-‐2”>

<div class="pure-‐g”>

<div class=“pure-‐u-‐1-‐2”></div>

<div class=“pure-‐u-‐1-‐2”></div>

</div> </div>

</div>


Responsive Grids

27

§  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-phone (Elements hidden belox 768px) ›  Pure-hidden-tablet (elements hidden between 768px and 979px) ›  Pure-hidden-desktop (elements hidden above 979px)


Forms

28

§  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


Forms

29

§  You can specify different types of form layout

Compact Form

Stacked Form .pure-form-stacked

Aligned Form .pure-form-aligned


Form Elements Sizing

30

§  With the class pure-input-x-y it’s possible to size elements relatively to their container (just as for the grids)


Styling and other elements

31

§  Rounded elements with pure-input-rounded

§  Group elements with pure-group


Pure Menus

32

§  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"> <a href="#" class="pure-menu-heading">Site Title</a> <ul> <li class="pure-menu-selected"><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>

<div> <a href=”#">Site Title</a> <ul> <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>


Pure Vertical Menus

33

•  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>


Pure Menu - Paginator

34

§  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>


Pure Buttons

35

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>


Customize buttons

36

.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 */ }


Pure Tables

37

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>


Pure Tables

38

<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


Modules Summary

39

§  Pure is modular §  You can pick any module you want choosing from

Name URL

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 http://yui.yahooapis.com/pure/0.3.0/tables-min.css


More …

How do I get Pure?

41

§  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 ›  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/grids-

min.css&pure/0.3.0/forms-min.css


Predefined Layouts + Extensions

42

§  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


Online Tools + Contribute

43

§  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

›  Pure is an open-source project under the BSD License. We welcome issues, pull requests, and feedback

›  https://github.com/yui/pure/


Resources and references

44

Resource Reference 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 www.netmarketshare.com


What’s next?

pure css by yahoo

Technology

web site

class pure

elements hidden

pure menus

add pure

pure tables

pure button

elements