Mastering C S S Layouts
D E LV E : U I C S S M A S T E RC L A S S
W E D N E S D AY , A U G U S T 5, 2009
by J I N A B O LT O N
INTERACTION DESIGNER
CRUSH + L O V E LY

Buongiorno!
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Mastering C S S
Layouts Once &
for All?
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Becoming a “master”
of C S S is more than
just memorizing
selectors.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

It’s about mastering
your workflow.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Create efficient,
maintainable,
& smart (sexy) C S S .
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

A Consistent
Workflow
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Create a development
starter toolkit.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

An organized
directory structure
for all projects.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

images/
content/
layout/
javascripts/
stylesheets/
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

img/
js/
css/
i/
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Barebones
H T M L template
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

A Simple, Usable,
& Clean C S S
Framework
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

@import 'reset.css';
@import 'foundation.css';
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Optional: Your
Chosen JavaScript
Framework
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Design from the
content out or from
outside in?
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Begin with
meaningful markup.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Write it clean;
keep it clean.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Clarity is beautiful.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<div id="product_description">...</div>
vs.
<div id="leftl07">...</div>
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Organization
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Keep your selectors
& declarations
organized.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Sele%ors
Element Types
DOM Hierarchy
Style Types
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Declarations
Alphabetical
Style Types
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Comments are
your friend.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

/* Company Name Typography CSS
Author Jina Bolton
Version v1.0 | 2008-09-25
........................................................................ */
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

/* Background 222
Text fff
Links c99
Visited Links 966
Hovered Links fcc
Headers 9cc
Sub-headers 699
........................................................................ */
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

/* =RESET
........................................................................ */
/* =TYPOGRAPHY
........................................................................ */
/* =STRUCTURE
........................................................................ */
See: http://stopdesign.com/log/2005/05/03/css-tip- ags.html
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

/* RESET
GLOBAL
TYPOGRAPHY
STRUCTURE
FORMS
TABLES
WIDGETS
........................................................................ */
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

profile.css
#pro le {
width: 600px; /* rede ned: IE-6.css */
}
IE-6.css
#pro le {
width: 620px; /* override: pro le.css */
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Balance readability
& optimization.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Debugging
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Validate your code.
W3C HTML Validator
http://validator.w3.org/
CSS Validator
http://jigsaw.w3.org/css-validator/
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Use C S S 3 to display
problem areas.
*[style] {
border: 2px dashed red !important;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Documentation
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

At least try to
document your work!
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Techniques
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

The Box Model
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Image by Andy Clarke, adapted from the original image created by Jon Hicks
http://www.hicksdesign.co.uk/boxmodel/
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Normal Flow
Elements flow naturally on the page, in the order that
they appear in the source.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Floats
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Floats were not
intended for layout.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Avoid using floats as a
fallback bug fix.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Positioning
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Relative Positioning
Moves the element by coordinates relative to where it
lives within “normal flow”.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Absolute Positioning
Removes the element from normal flow and positions
by coordinates to the nearest parent element that has
relative positioning. By default, the element will
position to the viewport if no parent exists that has
relative positioning.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Fixed Positioning
Removes the element from normal flow and positions
by coordinates to the viewport. This element does not
scroll with the rest of the page.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Static Positioning
Reverts positioning to normal flow.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Rounded Corners
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

CSS 3
The best-case scenario.
.entry-content {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

CSS + Images Techniques
Consider which of the several techniques fits best.
Do$ your d$ign have a fixed width?
Wi% that always be the c&e?
How about the height?
Could th' change & the co(e( grows shorter/longer?
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Fixed width, varied height
(short version)
A full-width, tall image for the top, left,
and right borders.
A full-width, short image for the bottom border.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Fixed width, varied height
(short version)
.module {
background: url(demo-tlr.gif ) no-repeat;
}
.module .content {
padding-bottom: 10px;
background: url(demo-btm.gif ) bottom no-repeat;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Fixed width, varied height
(long version)
A full-width, short image for the top border.
A full-width, short repeating image for the left
and right borders.
A full-width, short image for the bottom border.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Fixed width, varied height
(long version)
.module {
padding-top: 10px;
background: url(demo-tlr.gif ) no-repeat;
}
.module .content {
padding-bottom: 10px;
background: url(demo-btm.gif ) left bottom no-repeat;
}
.module .content-wrap {
background: url(demo-lr.gif ) repeat-y;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Varied width, varied height
A very wide, very tall image for the top
and left borders.
A skinny, very tall image for the top right corner
and right border.
A very wide, short image for the bottom right
corner and bottom border.
A skinny, short image for the bottom left corner.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Varied width, varied height
.module {
background: url(demo-tl.gif ) no-repeat;
}
.module-3 .content {
background: url(demo-tr.gif ) right top no-repeat;
}
.module-3 .content-wrap {
background: url(demo-br.gif ) right bottom no-repeat;
}
.module-3 .content-wrap-2 {
padding-top: 10px;
padding-bottom: 10px;
background: url(demo-bl.gif ) left bottom no-repeat;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

CSS Sprites
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

A.K.A.
“Navigation Matrix”
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<ul id="menu">
<li id="m-home"><a href="#">Home</a></li>
<li id="m-about"><a href="#">About</a></li>
<li id="m-news"><a href="#">News</a></li>
<li id="m-events"><a href="#">Events</a></li>
<li id="m-links"><a href="#">Links</a></li>
<li id="m-contacts"><a href="#">Contacts</a></li>
</ul>
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

ul#menu { list-style: none; }
ul#menu li { display: inline; }
ul#menu a {
oat: left
width: 100px; height: 50px;
text-indent: -9999em;
background: url(menu.gif );
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

ul#menu li#m-home a { background-position: 0 0; }
ul#menu li#m-about a { background-position: -100px 0; }
ul#menu li#m-news a { background-position: -200px 0; }
ul#menu li#m-events a { background-position: -300px 0; }
ul#menu li#m-links a { background-position: -400px 0; }
ul#menu li#m-contacts a { background-position: -500px 0; }
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

ul#menu li#m-home a:hover { background-position: 0 -50px; }
ul#menu li#m-about a:hover { background-position: -100px -50px; }
ul#menu li#m-news a:hover { background-position: -200px -50px; }
ul#menu li#m-events a:hover { background-position: -300px -50px; }
ul#menu li#m-links a:hover { background-position: -400px -50px; }
ul#menu li#m-contacts a:hover { background-position: -500px -50px; }
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

ul#menu li#m-home.active a{ background-position: 0 -100px; }
ul#menu li#m-about.active a { background-position: -100px -100px; }
ul#menu li#m-news.active a { background-position: -200px -100px; }
ul#menu li#m-events.active a { background-position: -300px -100px; }
ul#menu li#m-links.active a { background-position: -400px -100px; }
ul#menu li#m-contacts.active a { background-position: -500px -100px; }
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Negative Margins
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Conditional
comments vs. hacks
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Avoid hacks if possible.
Work With the Box Model (not against).
Browsers Change.
If hacks are absolutely necessary, it can be helpful to
explain what was done in your C S S comments.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Master your
text editor.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Use version control.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

http://dowebsitesneedtolookexactlythesameineverybrowser.com/
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

CSS 3
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

“C S S 3: A giant
serving of FAIL.”
— Alex Russell
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

“C S S 3: Third time lucky”
— Andy Clarke
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

CSS 1
1996
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

CSS 2
1997
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

CSS 2.1
Candidate Recommendation
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

CSS 3
?
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

CSS 3
Sele%ors
Backgrounds & Borders
Multi-column Layout
Advanced Layout
Grid Positioning
Media Queries
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Backgrounds
& Borders
Style any box’s borders and background including
attaching multiple background-images to a
single element.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Backgrounds
& Borders
Style any box’s borders and background including
attach multiple background-images to a single
element.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Backgrounds
& Borders <div class="vcard">
<div class="addr-bl">
Style any box’s borders and background including
<div class="addr-tr">
attach multiple background-images to … single
a
element. </div>
</div>
</div>
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

.vcard {
background:
Backgrounds #000
& Borders url(a-grad.gif)
repeat-x;
Style any box’s borders and background including
}
attach multiple background-images to a single
.addr-bl {
element.
background:
url(a-bl.gif)
100% 0
no-repeat;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Backgrounds
& Borders
Style any box’s borders and <div class="vcard">…</div>
background including
attach multiple background-images to a single
element.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

.vcard {
background-color: #000;
Backgrounds background-image:
url(a-grad.gif),
& Borders url(a-bl.gif),
url(a-tr.gif);
Style any box’s borders and background including
background-repeat:
attach multiple background-images to a single
repeat-x,
element. no-repeat,
no-repeat;
background-position:
0 0,
100% 0,
0 100%;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Backgrounds
& Borders
Style any box’s borders and background including
attach multiple background-images to a single
element.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<div class="vcard">…</div>
.vcard {
border-image:
url("border.png")
30 30 30 30
stretch;
border:
double green 1em;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Multi-column Layout
Making it simpler to create column layouts without
additional markup by using column widths, counts,
gaps and rules.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<div class="entry-content">
<div class="col first">
…
</div>
<div class="col">
…
</div>
</div>
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

.entry-content .col {
float: left;
width: 467px;
margin-left: 30px;
}
.entry-content .first {
margin-left: 0;
}
/* .entry-content
clear-fix rules */
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<div class="entry-content">
…
</div>
.entry-content {
column-count: 2;
column-gap: 30px;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<div class="entry-content">
…
</div>
.entry-content {
column-width: 270px;
column-gap: 30px;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Grid Positioning
Gives the ability to add invisible grid rules to create
grid layouts (like in books and newspapers), and uses
sizing and new float properties for placing content.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<div class="entry-content">
…
</div>
.entry-content {
column-count: 4;
column-gap: 30px;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

.entry-content {
grid-columns:
(30px * *)[4];
column-count: 4;
column-gap: 30px;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

.entry-content {
grid-columns:
(30px * *)[4];
grid-rows:
9em 33.3% *;
column-count: 4;
column-gap: 30px;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<div class="entry-content">
…
<img src="sushi.jpg"
class="photo"
alt="" />
…
</div>
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

.entry-content img.photo {
float: page bottom left;
float-offset: 4gr 1gr;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<div class="entry-content">
<h2>What is Sushi?</h2>
…
<img src="sushi.jpg"
class="photo"
alt="" />
</div>
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

.entry-content h2 {
float: page top left;
width: 6gr;
height: 1gr;
margin-left: -30px;
}
.entry-content img.photo {
float: page bottom left;
float-offset: 4gr 1gr;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Advanced Layout
Aims to fully separate visual layout order from a
document’s content by defining “slots” in a grid in
which content can flow or be placed, or that remain
empty — all without additional markup.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

a b c d
e f g h
i j k l
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

a a c d
e e g g
i j k l
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

@ @ . .
e @ @ h
. j j @
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Sele%ors
Refined sele%ors to target an element based on an
attribute or position in the document flow plus new
pseudo-classes and pseudo-elements.
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Sele%ors
:nth-child(N) :nth-last-child(N)
:nth-of-type(N) :nth-last-of-type(N)
:last-child :first-of-type
:last-of-type :only-child
:only-of-type :root
:empty :target
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

:nth-child(N)
matches elements on the basis of their positions
within a parent element’s list of child elements (from
beginning to end)
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<tr class="alt"></tr>
<tr></tr>
tr.alt td {
background: #ecffd9;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<tr></tr>
tr:nth-child(odd) td {
background: #ecffd9;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<tr class="high-rank">…</tr>
<tr class="high-rank">…</tr>
<tr class="high-rank">…</tr>
<tr>…</tr>
tr.high-rank td {
background: #ecffd9;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<tr>…</tr>
tr:nth-child(-n+3) td {
background: #ecffd9;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

:nth-last-child(N)
matches elements on the basis of their positions
within a parent element’s list of child elements (from
end to beginning)
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<tr>…</tr>
<tr class="low-rank">…</tr>
<tr class="low-rank">…</tr>
<tr class="low-rank">…</tr>
tr.low-rank td {
opacity: .75;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<tr>…</tr>
tr:nth-last-child(-n+2) td {
opacity: .75;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

:nth-of-type(N)
matches elements on the basis of their positions
within a parent element’s list of child elements of the
same type
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<p class="intro">…</p>
<p>…</p>
p.intro {
background: #fafcf5;
font-size: 1.3em;
color: #060;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

<p>…</p>
p:first-of-type {
background: #fafcf5;
font-size: 1.3em;
color: #030;
}
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N

Questions?
J I N A B O LT O N , interaction designer
C RU S H + L OV E LY
2 12 .4 3 1. 46 5 2
N E W YO R K + SAN FRANCISCO
C RU S H L O V E LY . C O M
slides » crushlovely.com/downloads/mcl
fo%ow me » twitter.com/jina
M A S T E R I N G C S S L AYO U T S J I N A B O LT O N