A presentation for the Fronteers 2009 Conference in Amsterdam on CSS3 layout.

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

2. Stephen Hay

3. Stephen Hay
Creative Director,
Cinnamon

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

5. CSS3

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

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

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

9. Type &
Layout

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

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

12. Layout

13. hasNoLayout

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

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

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

18. Present
CSS Frameworks
Shouldn’t CSS be the framework?

19. What is grid
layout?

20. A grid is not a table

21. Photo courtesy of Kenn W. Kiser, morgueFile.com

22. Photo: beglib, morgueFile.com

23. Photo courtesy of Kenn W. Kiser, morgueFile.com

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

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

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

29. Units vs Columns

30. The three
working drafts

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

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

33. Grid Positioning: Properties
grid-columns
grid-rows

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

35. Grid Positioning

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

37. Grid Positioning: combined with multicolumn layout

38. 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

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

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

41. Grid Positioning: the gr unit

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

43. Flexible Box Module
creates an implicit grid using flexible element stacking

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

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

46. 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;
}

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

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

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

53. Template Layout Module
Explicit grids on adrenaline.

54. Basic site layouts are trivial to construct

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

56. 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; }

57. 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; }

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

59. Template Layout with Multicolumn Layout

60. Template Layout with Multicolumn Layout

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

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

63. 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

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

65. CSS3 Layout in action: Basic Structure

66. CSS3 Layout in action: Basic Grid (1)

67. CSS3 Layout in action: Setting up the grid and slots

68. CSS3 Layout in action: Placing elements in the slots

69. CSS3 Layout in action: Basic Layout in place

70. CSS3 Layout in action: Laying out page components

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

72. CSS3 Layout in action: Component structure

73. CSS3 Layout in action: nesting boxes

74. CSS3 Layout in action: Adding more elements

75. CSS3 Layout in action: Laying out the boxes with flexbox

76. CSS3 Layout in action: Template playing nice with Flexbox

77. 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!

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

79. What will the future bring?

80. I have no clue.

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

82. 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.)

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

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

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

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

87. 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

88. 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.