how we'll lay out websites in 2016
DESCRIPTION
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/18999428TRANSCRIPT
![Page 1: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/1.jpg)
How we’ll lay out websites in 2016
Peter Gasston@stopsatgreen
http://broken-links.com
![Page 2: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/2.jpg)
How we lay out websites now
•Floats
•Absolute Positioning
•JavaScript (Masonry.js)
![Page 3: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/3.jpg)
3 New W3C Modules
•Flexible Box Layout
•Template Layout
•Grid Positioning
![Page 4: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/4.jpg)
Flexible Box Layout
• Makes child elements flexible to better fit their parent
• Based on Firefox XUL UI language
• Implemented in Firefox & WebKit
![Page 5: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/5.jpg)
Flexible Box Layout
width: 100px width: 100px
display: box
box-flex: 1 box-flex: 1
display: box
box-flex: 3 box-flex: 2
![Page 6: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/6.jpg)
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
![Page 7: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/7.jpg)
• Introductory article:html5rocks.com/tutorials/flexbox/quick/
• JavaScript polyfill:github.com/doctyper/flexie
• .Net magazine (December):
Flexible Box Layout
![Page 8: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/8.jpg)
•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
![Page 9: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/9.jpg)
Template Layout
• Provides column & row layout of web pages
• Easier to position elements out of DOM order
• Not currently implemented in any browser
![Page 10: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/10.jpg)
Template Layout
position: a
position: b
position: c
display: ‘abc’
cba
![Page 11: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/11.jpg)
display: ‘acc’ ‘a.b’display: ‘aa’ ‘bc’
Template Layout
cb
a
b
a
c
![Page 12: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/12.jpg)
• Currently under active development
• Former & current editors from major browser makers
• JavaScript Polyfill:code.google.com/p/css-template-layout/
Template Layout
![Page 13: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/13.jpg)
Grid Positioning
• Can work with existing page elements
• Uses new length unit to set dimensions & position
• No current implementation
![Page 14: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/14.jpg)
Implicit GridsGrid Positioning
![Page 15: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/15.jpg)
grid-columns: 25%; grid-rows: 20%;
grid-columns: repeat(30% 5%);
Explicit GridsGrid Positioning
![Page 16: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/16.jpg)
Grid Positioning
height: 5gr;left: 3gr;position: absolute;top: 2gr;width: 4gr;
![Page 17: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/17.jpg)
•Doesn’t seem to be actively developed
•No JavaScript polyfill
Template Layout
![Page 18: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/18.jpg)
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
![Page 19: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/19.jpg)
Why 2016?
Text
css3.info/how-well-layout-websites-in-2016/
![Page 20: How we'll lay out websites in 2016](https://reader031.vdocuments.us/reader031/viewer/2022020217/549c8385b479599b318b4762/html5/thumbnails/20.jpg)
Thanks.
Peter Gasston@stopsatgreen
http://broken-links.com
Buy my book:nostarch.com/css3.htm