The Future State of
Layout
Stephen Hay . Fronteers, Amsterdam . 20091105

Stephen Hay

Stephen Hay
Creative Director,
Cinnamon

Stephen Hay
Creative Director,
Cinnamon
Designing for the Web
since 1995

CSS3

CSS3 is
Awesome.
media queries, more selectors, font stuff, (...)!

Decoration
backgrounds, shadows, rounded corners, (...)

Many of these things are
trend-driven,
decorative properties
Neccessary, perhaps, but not as important as...

Type &
Layout

Most frustration in web design &
development stems from the lack of a
decent layout mechanism.

Why is this important?
True separation of presentation and structure
Source order independence
Better data portability

Layout

hasNoLayout

Past
Tables
Grid-like, but not a grid in the layout sense.

Present
Floats & Positioning
Counter-intuitive and
not intended for layout on today’s Web.

Past and present
Serendipitous grids
“Hey, cool! Everything lines up!”

Present
CSS Frameworks
Shouldn’t CSS be the framework?

What is grid
layout?

A grid is not a table

Photo courtesy of Kenn W. Kiser, morgueFile.com

Photo: beglib, morgueFile.com

Photo courtesy of Kenn W. Kiser, morgueFile.com

A grid is the underlying
geometrical framework
which defines the visual
structure of the canvas.

Two types of grids
Implicit grids
are created implicitly by the
placement of elements on a page.

Two types of grids
Explicit grids
are created explicitly, before the
placement of elements on a page.

Units vs Columns

The three
working drafts

CSS3-Grid (Microsoft)
CSS3-Flexbox (Mozilla)
CSS3-Layout (W3C)

Grid Positioning Module
takes a column- and row-based approach to creating
explicit grids.

Grid Positioning: Properties
grid-columns
grid-rows

Grid Positioning: Syntax
div {
grid-columns: 69px (12px 69px)[11];
grid-rows: 170px *;
}

Grid Positioning

Grid Positioning: combined with multicolumn layout
div {
grid-columns: 69px (12px 69px)[11];
grid-rows: 170px *;
columns: 3;
column-gap: 12px;
}

Grid Positioning: combined with multicolumn layout

Grid Positioning: Pros & Cons
Advantages Disadvantages
Simple syntax Reliance on other modules
*-syntax (multilength) Somewhat restrictive
gr unit Thinking is involved
Explicit grid No new placement mechanism

One cool thing about Grid Positioning Module
The gr unit
A measurement unit to match your grid units!
(Well, not exactly.)

Grid Positioning: the gr unit
blockquote.pullquote {
float: top left column;
float-offset: 1gr 4gr;
width: 7gr;
}

Grid Positioning: the gr unit

Cool! Can I try it out?
Nope.
No known implementation at this time.

Flexible Box Module
creates an implicit grid using flexible element stacking

“A CSS box model
optimized for
interface design”
A small part of XUL, ported to CSS.

Flexible Box: Properties
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack

Flexible Box: Syntax
<div id="parent">
<p id="child1">First child</p>
<p id="child2">Second child</p>
<p id="child3">Third child</p>
</div>
#parent {
display: box;
box-orient: horizontal;
#child3 {
box-flex: 1;
}

Flexible Box: Pros & Cons
Advantages Disadvantages
Developed for GUIs Implicit grid
Simple syntax Nesting
Source order independent Lots of thinking
Browser calculation

One cool thing about Flexible Box Module
The box-flex property
Fill available space, or don’t! Your choice!

Cool! Can I try it out?
Yes!
In Firefox (use the -moz- prefix.)
Works now and well (but in no other browsers)

Template Layout Module
Explicit grids on adrenaline.

Basic site layouts are trivial to construct

Template Layout: New Stuff
New values for the display property
New values for the position property
The ::slot() pseudo-element
The gr unit

Template Layout: Syntax
<div id="header">Header</div>
<div id="content">Content</div>
<div id="nav">Navigation</div>
<div id="footer">Footer</div>
body {
display: "a a a"
"b c c"
"d d d"; }
#header { position: a; }
#nav { position: b; }
#content { position: c; }
#footer { position: d; }

Template Layout: Syntax
<div id="header">Header</div>
<div id="content">Content</div>
<div id="nav">Navigation</div>
<div id="footer">Footer</div>
body {
display: "a a a" / 150px
"b c @" / *
"d d d" / 80px
200px * * ; }
#header { position: a; }
#nav { position: b; }
#content { position: c; }
#footer { position: d; }

Template Layout: the ::slot() pseudo-element
::slot() allows you
to style a slot,
regardless of the
content.
body::slot(a) { background-color: silver; }

Template Layout with Multicolumn Layout

Template Layout with Multicolumn Layout

Template Layout: Pros & Cons
Advantages Disadvantages
Simple syntax Existing properties
Visual, to-the-point Hard to implement(?)
Explicit grid
Source order independent

One cool thing about Template Layout Module
Speed and ease of use

Cool! Can I try it out?
Yes!
Alexis Deveria’s jQuery implementation:
http://code.google.com/p/css-template-layout/
Older implementations:
http://transcendingcss.com/support/almcss.zip
http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

CSS3 Layout in action: Khoi Vinh’s Yeeaahh! Layout

CSS3 Layout in action: Basic Structure

CSS3 Layout in action: Basic Grid (1)

CSS3 Layout in action: Setting up the grid and slots

CSS3 Layout in action: Placing elements in the slots

CSS3 Layout in action: Basic Layout in place

CSS3 Layout in action: Laying out page components

You can nest templates,
and depending on the
component, why not
choose the best layout
mechanism for the job?

CSS3 Layout in action: Component structure

CSS3 Layout in action: nesting boxes

CSS3 Layout in action: Adding more elements

CSS3 Layout in action: Laying out the boxes with flexbox

CSS3 Layout in action: Template playing nice with Flexbox

Remember these important points
Source order is no longer an issue
You can still float and position (absolute on gr!)
There may be power in two modules
Use media queries for alternative layouts!

Media queries and CSS3 Layout
div { display: "a a a"
"b c c"
"d d d"; }
becomes
div { display: "a"
"c"
"b"
"d"; }

What will the future bring?

I have no clue.

Give us some layout,
dammit!
We’re at the point that we don’t care which module it is.

Give us some layout,
dammit!
We’re at the point that we don’t care which module it is.
(As long as it’s at least Template Layout. Thank you.)

There are huge advantages for designers and developers
CSS is the framework

There are huge advantages for designers and developers
CSS is the framework
Maintainability

There are huge advantages for designers and developers
CSS is the framework
Maintainability
How designers think

A solid layout mechanism
will change the face
of the Web.

Learn more or get involved
CSS3-layout
http://www.w3.org/TR/css3-layout
CSS3-flexbox
http://www.w3.org/TR/css3-flexbox
CSS3-grid
http://www.w3.org/TR/css3-grid
CSS WG Mailing list
www-style@w3.org

Thank you!
This presentation is available at:
the-haystack.com/presentations/fronteers09/
twitter.com/stephenhay
Special thanks to Bert Bos for his input, and to Khoi Vinh for
allowing me to use his wonderful example.