The Future State of Layout

The Future State of

LayoutStephen Hay . Fronteers, Amsterdam . 20091105

Stephen Hay

Creative Director,CinnamonDesigning for the Websince 1995

Stephen HayCreative Director,Cinnamon

Designing for the Websince 1995

Stephen HayCreative Director,CinnamonDesigning for the Websince 1995

CSS3

CSS3 is

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

Decorationbackgrounds, shadows, rounded corners, (...)

Many of these things are

trend-driven,decorative propertiesNeccessary, perhaps, but not as important as...

Type &Layout

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

Why is this important?

I True separation of presentation and structureI Source order independenceI Better data portability

Layout

hasNoLayout

Past

TablesGrid-like, but not a grid in the layout sense.

Present

Floats & PositioningCounter-intuitive andnot intended for layout on today’s Web.

Past and present

Serendipitous grids“Hey, cool! Everything lines up!”

Present

CSS FrameworksShouldn’t CSS be the framework?

What is gridlayout?

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 underlyinggeometrical frameworkwhich defines the visualstructure of the canvas.

Two types of grids

Implicit gridsare created implicitly by theplacement of elements on a page.

Two types of grids

Explicit gridsare created explicitly, before theplacement of elements on a page.

Units vs Columns

The threeworking drafts

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

Grid Positioning Moduletakes a column- and row-based approach to creatingexplicit grids.

Grid Positioning: Properties

grid-columnsgrid-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 DisadvantagesSimple syntax Reliance on other modules*-syntax (multilength) Somewhat restrictivegr unit Thinking is involvedExplicit grid No new placement mechanism

One cool thing about Grid Positioning Module

The gr unitA 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 Modulecreates an implicit grid using flexible element stacking

“A CSS box modeloptimized forinterface design”A small part of XUL, ported to CSS.

Flexible Box: Properties

box-alignbox-directionbox-flexbox-flex-groupbox-linesbox-ordinal-groupbox-orientbox-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 DisadvantagesDeveloped for GUIs Implicit gridSimple syntax NestingSource order independent Lots of thinkingBrowser calculation

One cool thing about Flexible Box Module

The box-flex propertyFill 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 ModuleExplicit grids on adrenaline.

Basic site layouts are trivial to construct

Template Layout: New Stuff

I New values for the display propertyI New values for the position propertyI The ::slot() pseudo-elementI 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" / 80px200px * * ; }

#header { position: a; }#nav { position: b; }#content { position: c; }#footer { position: d; }

Template Layout: the ::slot() pseudo-element

::slot() allows youto style a slot,regardless of thecontent.body::slot(a) { background-color: silver; }

Template Layout with Multicolumn Layout

Template Layout with Multicolumn Layout

Template Layout: Pros & Cons

Advantages DisadvantagesSimple syntax Existing propertiesVisual, to-the-point Hard to implement(?)Explicit gridSource 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:

I http://transcendingcss.com/support/almcss.zipI 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 thecomponent, why notchoose the best layoutmechanism 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

I Source order is no longer an issueI You can still float and position (absolute on gr!)I There may be power in two modulesI 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.

(As long as it’s at least Template Layout. Thank you.)

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

MaintainabilityHow designers think

There are huge advantages for designers and developers

CSS is the frameworkMaintainability

How designers think

There are huge advantages for designers and developers

CSS is the frameworkMaintainabilityHow designers think

A solid layout mechanismwill change the faceof the Web.

Learn more or get involved

CSS3-layouthttp://www.w3.org/TR/css3-layout

CSS3-flexboxhttp://www.w3.org/TR/css3-flexbox

CSS3-gridhttp://www.w3.org/TR/css3-grid

CSS WG Mailing listwww-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 forallowing me to use his wonderful example.