The Future of CSS Layout

The Future of
CSS Layout
October 22, 2012 by Zoe Mickley Gillenwater
Future of Web Design @zomigi
zomigi.com

What I do
Books Web
Stunning CSS3: Accessibility
A Project-based Guide to specialist at AT&T
the Latest in CSS
Visual designer
www.stunningcss3.com
CSS developer
and consultant
Flexible Web Design:
Creating Liquid and Elastic
Layouts with CSS
www.flexiblewebbook.com

2

the past
table layout

3

Problems with table layout
• Complicated/bulky markup
• Accessibility problems
• Slower browser rendering
• Rigid designs
• Spacer gifs

4

the present
float layout

5

Advantages of floats in layout
• Less HTML than tables
• More flexibility to change layout than tables
• Can change visual order to not match
HTML (somewhat)
• Other content aware of floats' presence
• Can use clear to get blocks out of the way

6

Problems with float layout
• Visual location tied to HTML order
(somewhat)
• Wrapping/float drop
• Difficulty with containment
• Difficulty with equal-height columns
• No float:center

7

?
what are the
alternatives

8

Alternative: display inline-block

    
*

* only partial support in IE 7 and 6

9

I wish my parents
would stop treating
me like I’m inline.
Can’t they see I’m a
block now?

10

Use: centered nav bar
nav ul {
margin: 0;
padding: 0;
border-bottom: 3px solid #fff;
list-style: none;
text-align: center; }
nav li {
display: inline-block;
vertical-align: bottom;
margin: 0 .2em;
padding: .3em .5em; ... }
11

Use: centered nav bar

• List horizontally centered
• Links aligned on bottom
• Links have top and bottom padding
• Links can be different heights
• List contains links (see its bottom border)
12

Alternative: display table-cell

    
*

* only in IE 8 and later

13

How table display works
• Makes boxes act like table equivalents
• Example: boxes with display:table-cell
act like <td> and sit on same line
• Good for grid-like layouts
• Disadvantage: tied to HTML order

14

Use: hybrid fixed-fluid layout
section {
display: table;
table-layout: fixed;
width: 100%; }
article {
display: table-cell;
padding: 10px;
vertical-align: top; }
article.fixed {
width:250px; }

15

Use: hybrid fixed-fluid layout

16

the future
a whole bunch of CSS3

17

CSS3 “content-flow” modules
• Multi-column Layout: flow a box’s content
into multiple columns in that box
• Regions: flow content into multiple,
separate boxes
• Exclusions and Shapes: make content
flow around and within areas in more
intricate ways than floating

18

Grid Template Layout
http://dev.w3.org/csswg/css3-layout/

X X X X 10

*

* with -ms- prefix

19

How grid template works
Define invisible grid of rows and columns
and specify which pieces of content go into
which “slot”

body {
grid: "a a a a" a
"b c c d"
}  b c d
nav { flow: a }
#main { flow: c }
aside { flow: d }
#news { flow: b }
20

Define invisible grid of rows and columns
and specify which pieces of content go into
which “slot”

body {
grid: "c d" c d
"b b"
"a a" 
}
b
nav { flow: a }
#main { flow: c }
aside { flow: d }
#news { flow: b } a
21

Use ::slot to style slots with:
• overflow • background properties
• margin properties • column properties
• padding properties • vertical-align
• border properties • writing-mode
• box-shadow • direction
• box-decoration-break

For example: body::slot(c) {
background: #7FD13B;
vertical-align: top;
}
22

Flexible Box Layout
www.w3.org/TR/css3-flexbox/

21 X 12.1 X X
†
*

*
†
with -webkit- prefix
can be switched on in version 18 nightlies
23

How flexbox works
• Make boxes automatically grow to fill
space or shrink to avoid overflow
• Give boxes proportional measurements
• Lay out boxes in any direction
• Align boxes on any side
• Place boxes out of order from HTML

24

Let’s try
flexbox
out on
this page

25

Original CSS

.feature {
float: left;
width: 30%;
margin: 0 4.5% 0 0;
padding: 130px 0 0 0;
}
26

Create a flex container
<div id="features-wrapper">
<div class="feature" id="feature-candy">
...</div>
<div class="feature" id="feature-pastry">
...</div>
<div class="feature" id="feature-dessert">
...</div>
</div>
Make sure to add the
#features-wrapper { -moz, -ms, and -webkit
prefixed values and
display: flex; properties in real life!
} 27

Specify direction of flex items
#features-wrapper {
display: flex;
flex-direction: row; default value
}

Could switch to vertical stacking in mobile/narrow-screen
media query:
#features-wrapper {
display: flex;
flex-direction: column;
}

28

Make flex items flexible
.feature {
flex: 1 1 0px;
margin-right: 40px;
padding: 130px 0 0 0; }

29

Make flex items flexible
.feature {
flex: 1 1 0px;
margin-right: 40px; flex basis
padding: 130px 0 0 0; }
flex shrink factor
Same as:
flex grow factor
.feature {
flex: 1;
margin-right: 40px;
padding: 130px 0 0 0; }

30

Add a fourth feature box
<div id="features-wrapper">
<div class="feature" id="feature-candy">
...</div>
<div class="feature" id="feature-pastry">
...</div>
<div class="feature" id="feature-dessert">
...</div>
<div class="feature" id="feature-bread">
...</div>
</div>

31

All boxes adjust in width

32

Don’t need to do this anymore
.2up .feature { width: 45%; ... }

33

Highlight a sale category
.sale {
padding: 130px 20px 20px 20px;
border-radius: 3px;
background-color: hsla(0,0%,100%,.4);
}

What percentage width would I set to make
this twice as wide as other boxes, if I weren’t
using flex?

34

Make sale box twice as wide

.sale {
flex: 2;
border-radius: 3px;
}
35

Default equal-height columns!
#features-wrapper {
display: flex;
align-items: stretch;
}

This is the default value, so we don’t need to
actually set this property, but this shows you
what it looks like.

36

Vertical centering with ease!

#features-wrapper {
display: flex;
align-items: center;
}
37

Visual order = HTML order

38

Move sale box to front of line
.sale {
order: -1;
flex: 2;
border-radius: 3px;
}

Default order value is 0 for all flex items, so
-1 moves this one before others
39

New visual order, same HTML

40

Accessibility implications
• Pro: keep content in logical order in HTML
instead of structuring HTML to achieve
visual layout
• Con: focus/tab order won’t always match
expected order, may jump around
seemingly randomly

41

Columns are too narrow

42

Create multi-line flex container
#features-wrapper {
display: flex;
flex-wrap: wrap; Allow children flex items
to wrap to multiple lines
}
.sale {
order: -1; Make box fill line
flex: 1 1 100%; Remove gap to right,
margin: 0 0 20px 0; add space below
border-radius: 3px;
} 43

Flex items can now wrap

44

Change icon position
.sale {
order: -1;
flex: 1 1 100%;
margin: 0 0 20px 0;
border-radius: 3px;
background-position: 20px 0;
}

45

use flexbox now for
progressive enhancement

47

How can I make this form:
• Display on a single line with image
• Vertically centered with image
• Span full-width of container

48

Inline-block achieves:
Display on a single line with image
Vertically centered with image
X Span full-width of container

49

Different units make life hard
Pixels
Ems
Some mystery percentage

50

Make the text input flex
#order, #order form { Make outer div and form
display: flex; into flex containers
align-items: center; } Vertically center kiddos
#order form {
Make form take up all
flex: 1; } space next to image
#order #message {
Make text input take up
flex: 1; all space in form left
min-width: 7em; after label and button
margin: 0 5px; } But don’t let it get crazy-
small

51

Use inline-block with flexbox

52

#order img, #order form {
vertical-align: middle; }
#order, #order form {
display: flex;
align-items: center; }
#order form {
flex: 1; }
#order #message {
flex: 1;
min-width: 7em;
margin: 0 5px; } 53

Full-width nav bar

nav ul { nav li {
display: table; display: table-cell;
width: 100%; text-align: center; }
margin: 0;
padding: 0;
list-style: none; }
54

Not so hot with no backgrounds
Uneven spacing

Don’t like these gaps

55

Even spacing with flexbox

nav ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none; }
56


57

nav ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
nav li {
}
58

Or use Modernizr script
http://modernizr.com
nav ul { nav li {
display: table; display: table-cell;
width: 100%; }
margin: 0; .flexbox nav li {
padding: 0; display: list-item;
list-style: none; }
}
.flexbox nav ul {
display: flex;
}
59

go forth and
practice

60

Learn more
Download slides and get links at
http://zomigi.com/blog/future-css-layout-fowd

Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
zomigi.com | stunningcss3.com | flexiblewebbook.com

Title photo by Gilderic Photography (http://www.flickr.com/photos/gilderic/6885830288/)
Rocket designed by Jason Peters from The Noun Project 61

The Future of CSS Layout

More Related Content

What's hot

Viewers also liked

Similar to The Future of CSS Layout

More from Zoe Gillenwater

Recently uploaded

The Future of CSS Layout