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

 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

How did we get here?
 Design vs Development

Source: wix.com

5 Pure – Riccardo Cocetta – www.purecss.io

 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

 Brief history of CSS
When What Notes
Since SGML (Standard General Markup
1980 Stylesheets are already among us
Language) was around
CHSS
3 Days before the announcement of
1994 (Cascading HTML StyleSheet) Draft
Netscape Navigator
Presented
After some work and the presentation of
CSS level 1
1996 other standards such as JSSS.
Recommendation presented by W3C
IE3 was released
Adds positioning, media type, font
CSS level 2
1998 properties etc .
Recommendation
Problematic adoption
Solve problems with difficult adoption and
some errata in the 2.0.
2004-2007 CSS level 2.1
Moved back and forth between Draft and
CR
CSS level 3 Different modules, introduces a lot of
1999-2012
Modules things
… CSS 4 Some CSS4 modules are already around

7 Pure – Riccardo Cocetta – www.purecss.io

 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

› Different ideas
› Different philosophy

8 Pure – Riccardo Cocetta – www.purecss.io

 PURE
Is a modular, lightweight CSS Framework

http://www.purecss.io
Brow ser C o m p a t i b i l t y
 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

 Some numbers

Sep 2013

Source: w3counter.com

12 Pure – Riccardo Cocetta – www.purecss.io

 Mobile Browsers shares

Source: www.netmarketshare.com - Oct 2013

13 Pure – Riccardo Cocetta – www.purecss.io

 How do we solve this issue? Best viewed…

14 Pure – Riccardo Cocetta – www.purecss.io

 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

 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
 Screen Size stats

Size Share
1366x768 19.73% Top 10 Screen sizes
320x480 1680x1050
1024x768 13.75% 1600x900

768x1024
1280x800 7.77% 1366x768
1920x1080 6.35% 1440x900

1280x1024 5.91% 1024x768

1440x900 5.07% 1280x1024

1280x800

768x1024 4.98%
1920x1080
1600x900 4.01%
320x480 3.51%
1680x1050 2.71%

Source: www.w3counter.com

17 Pure – Riccardo Cocetta – www.purecss.io

 Responsive Design

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

18 Pure – Riccardo Cocetta – www.purecss.io

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

http://www.purecss.io
Pure Modules
 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)

Buttons (0.8 KB)
§ The whole minified Library weighs 4.4 KB

21 Pure – Riccardo Cocetta – www.purecss.io

 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

 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

 Grids
A page

24 Pure – Riccardo Cocetta – www.purecss.io

 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

 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

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

27 Pure – Riccardo Cocetta – www.purecss.io

 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

 Forms

§ You can specify different types of form layout

Compact Form

Aligned Form
Stacked Form .pure-form-aligned
.pure-form-stacked

29 Pure – Riccardo Cocetta – www.purecss.io

 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

 Styling and other elements

§ Rounded elements with pure-input-rounded

§ Group elements with pure-group

31 Pure – Riccardo Cocetta – www.purecss.io

 Pure Menus

§ A module to create your menus with pure-menu class

§ Nicely style menus built with simple markup

<div
<div>class="pure-menu pure-menu-open pure-menu-horizontal">
<a href="#" class="pure-menu-heading">Site
href=”#">Site Title</a> Title</a>

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

 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

 Pure Menu - Paginator

§ Just add pure-paginator class

<ul class="pure-paginator">
<li><a class="pure-button prev" href="#">&#171;</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="#">&#187;</a></li>
</ul>

34 Pure – Riccardo Cocetta – www.purecss.io

 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

 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

 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

 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

 Modules Summary

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

39 Pure – Riccardo Cocetta – www.purecss.io

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

› 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

41 Pure – Riccardo Cocetta – www.purecss.io

 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

 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
› Pure is an open-source project under the BSD License. We welcome issues, pull
requests, and feedback
› https://github.com/yui/pure/

43 Pure – Riccardo Cocetta – www.purecss.io

 Resources and references

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

44 Pure – Riccardo Cocetta – www.purecss.io

What’s next?