WordPress Websites for Engineers: Elevate Your Brand
Pure CSS By Yahoo
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. 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. 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
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. 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. 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
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
14. How do we solve this issue? Best viewed…
14
Pure – Riccardo Cocetta – www.purecss.io
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. 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
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. PURE
Pure is responsive out of the box, so elements look great on all
screen sizes.
http://www.purecss.io
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. 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. 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
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
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. 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. 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. 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. Styling and other elements
§ Rounded elements with pure-input-rounded
§ Group elements with pure-group
31
Pure – Riccardo Cocetta – www.purecss.io
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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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