How we’ll lay out websites in 2016

Peter Gasston@stopsatgreen

http://broken-links.com

How we lay out websites now

•Floats

•Absolute Positioning

•JavaScript (Masonry.js)

3 New W3C Modules

•Flexible Box Layout

•Template Layout

•Grid Positioning

Flexible Box Layout

• Makes child elements flexible to better fit their parent

• Based on Firefox XUL UI language

• Implemented in Firefox & WebKit

Flexible Box Layout

width: 100px width: 100px

display: box

box-flex: 1 box-flex: 1

display: box

box-flex: 3 box-flex: 2

Flexible Box Layoutdisplay: box

box-orient: verticaldisplay: box

box-align: centerbox-pack: center

box-flex: 0box-ordinal-group: 1

box-ordinal-group: 2

box-ordinal-group: 2

3

1

2

• Introductory article:html5rocks.com/tutorials/flexbox/quick/

• JavaScript polyfill:github.com/doctyper/flexie

• .Net magazine (December):

Flexible Box Layout

•Has problemsoli.jp/2011/css3-flexbox

•Syntax is going to changedev.w3.org/csswg/css3-flexboxbox-flex => flex

display: box => display: flexbox

Flexible Box Layout

Template Layout

• Provides column & row layout of web pages

• Easier to position elements out of DOM order

• Not currently implemented in any browser

Template Layout

position: a

position: b

position: c

display: ‘abc’

cba

display: ‘acc’ ‘a.b’display: ‘aa’ ‘bc’

Template Layout

cb

a

b

a

c

• Currently under active development

• Former & current editors from major browser makers

• JavaScript Polyfill:code.google.com/p/css-template-layout/

Template Layout

Grid Positioning

• Can work with existing page elements

• Uses new length unit to set dimensions & position

• No current implementation

Implicit GridsGrid Positioning

grid-columns: 25%; grid-rows: 20%;

grid-columns: repeat(30% 5%);

Explicit GridsGrid Positioning

Grid Positioning

height: 5gr;left: 3gr;position: absolute;top: 2gr;width: 4gr;

•Doesn’t seem to be actively developed

•No JavaScript polyfill

Template Layout

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

Why 2016?

Text

css3.info/how-well-layout-websites-in-2016/

Thanks.

Peter Gasston@stopsatgreen

http://broken-links.com

Buy my book:nostarch.com/css3.htm