A look at future CSS3 layout standards. A lightning talk given at London Web Standards in January 2011. The video of the talk is available here: http://vimeo.com/18999428

1. How we’ll lay out
websites in 2016
Peter Gasston
@stopsatgreen
http://broken-links.com

2. How we lay out
websites now
• Floats
• Absolute Positioning
• JavaScript (Masonry.js)

3. 3 New W3C Modules
• Flexible Box Layout
• Template Layout
• Grid Positioning

4. Flexible Box Layout
• Makes child elements flexible to
better fit their parent
• Based on Firefox XUL UI language
• Implemented in Firefox & WebKit

5. Flexible Box Layout
width: 100px width: 100px
display: box
box-flex: 1 box-flex: 1
display: box
box-flex: 3 box-flex: 2

6. Flexible Box Layout
display: box display: box
box-align: center box-orient: vertical
box-pack: center
3 box-ordinal-group: 1
box-flex: 0
1 box-ordinal-group: 2
2 box-ordinal-group: 2

7. Flexible Box Layout
• Introductory article:
html5rocks.com/tutorials/flexbox/quick/
• JavaScript polyfill:
github.com/doctyper/flexie
• .Net magazine (December):

8. Flexible Box Layout
• Has problems
oli.jp/2011/css3-flexbox
• Syntax is going to change
dev.w3.org/csswg/css3-flexbox
box-flex => flex
display: box => display: flexbox

9. Template Layout
• Provides column & row layout of
web pages
• Easier to position elements out of
DOM order
• Not currently implemented in any
browser

10. Template Layout
display: ‘abc’
position: a
position: b a b c
position: c

11. Template Layout
display: ‘aa’ ‘bc’ display: ‘acc’ ‘a.b’
a
c
a
b c
b

12. Template Layout
• Currently under active
development
• Former & current editors from
major browser makers
• JavaScript Polyfill:
code.google.com/p/css-template-
layout/

13. Grid Positioning
• Can work with existing page
elements
• Uses new length unit to set
dimensions & position
• No current implementation

14. Grid Positioning
Implicit Grids

15. Grid Positioning
Explicit Grids
grid-columns: 25%; grid-rows: 20%;
grid-columns: repeat(30% 5%);

16. Grid Positioning
height: 5gr;
left: 3gr;
position: absolute;
top: 2gr;
width: 4gr;

17. Template Layout
• Doesn’t seem to be
actively developed
• No JavaScript polyfill

18. Summary
• Layout will be the next big
thing in CSS3
• But you won’t be using
these properties on your
sites in the near future

19. Why 2016?
Text
css3.info/how-well-layout-websites-in-2016/

20. Thanks.
Buy my book:
nostarch.com/css3.htm
Peter Gasston
@stopsatgreen
http://broken-links.com