Pure CSS By Yahoo

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

Design vs Development

Source: wix.com
5


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


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


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


Some numbers
Sep 2013

Source: w3counter.com

12


Mobile Browsers shares

Source: www.netmarketshare.com - Oct 2013

13


How do we solve this issue? Best viewed…

14


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


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


1366x768

1440x900

1024x768
1280x1024
1920x1080

Source: www.w3counter.com
17

1680x1050

1280x800

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
Pure is responsive out of the box, so elements look great on all
screen sizes.


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


Buttons (0.8 KB)

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


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


Grids
A page

24


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


Grid’s Example
<div
class="pure-‐g">

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

<div
class="pure-‐u-‐1-‐4”></div>

<div

<div

<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


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)


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


Forms
§  You can specify different types of form layout

Compact Form

Stacked Form
.pure-form-stacked

29


Aligned Form
.pure-form-aligned

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


Styling and other elements
§  Rounded elements with pure-input-rounded

§  Group elements with pure-group

31


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 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 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 next" href="#">»</a></li>
</ul>
34


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


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


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


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


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


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/


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 CSS By Yahoo

More Related Content

Similar to Pure CSS By Yahoo (20)

More from Nathan O'Hanlon (6)

Recently uploaded (20)

Pure CSS By Yahoo