How we’ll lay outwebsites in 2016                    Peter Gasston                   @stopsatgreen          http://broken-...
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• Implemente...
Flexible Box Layoutwidth: 100px    width: 100px                     display: box       box-flex: 1                   box-fle...
Flexible Box Layout  display: box             display: boxbox-align: center       box-orient: verticalbox-pack: center    ...
Flexible Box Layout• Introductory article:  html5rocks.com/tutorials/flexbox/quick/• JavaScript polyfill:  github.com/doctyp...
Flexible Box Layout• Has problems  oli.jp/2011/css3-flexbox• Syntax is going to change dev.w3.org/csswg/css3-flexbox box-flex...
Template Layout• Provides column & row layout of  web pages• Easier to position elements out of  DOM order• Not currently ...
Template Layout                  display: ‘abc’position: aposition: b   a        b           cposition: c
Template Layoutdisplay: ‘aa’ ‘bc’   display: ‘acc’ ‘a.b’       a                                  c                     ab...
Template Layout• Currently under active  development• Former & current editors from  major browser makers• JavaScript Poly...
Grid Positioning• Can work with existing page  elements• Uses new length unit to set  dimensions & position• No current im...
Grid Positioning   Implicit Grids
Grid Positioning         Explicit Gridsgrid-columns: 25%; grid-rows: 20%; grid-columns: repeat(30% 5%);
Grid Positioning    height: 5gr;    left: 3gr;    position: absolute;    top: 2gr;    width: 4gr;
Template Layout• Doesn’t seem to be    actively developed•   No JavaScript polyfill
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?                   Textcss3.info/how-well-layout-websites-in-2016/
Thanks.     Buy my book:nostarch.com/css3.htm                   Peter Gasston                  @stopsatgreen         http:...
Upcoming SlideShare
Loading in...5
×

How we'll lay out websites in 2016

5,874

Published on

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

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,874
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
48
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

How we'll lay out websites in 2016

  1. 1. How we’ll lay outwebsites in 2016 Peter Gasston @stopsatgreen http://broken-links.com
  2. 2. How we lay out websites now• Floats• Absolute Positioning• JavaScript (Masonry.js)
  3. 3. 3 New W3C Modules• Flexible Box Layout• Template Layout• Grid Positioning
  4. 4. Flexible Box Layout• Makes child elements flexible to better fit their parent• Based on Firefox XUL UI language• Implemented in Firefox & WebKit
  5. 5. Flexible Box Layoutwidth: 100px width: 100px display: box box-flex: 1 box-flex: 1 display: box box-flex: 3 box-flex: 2
  6. 6. Flexible Box Layout display: box display: boxbox-align: center box-orient: verticalbox-pack: center 3 box-ordinal-group: 1 box-flex: 0 1 box-ordinal-group: 2 2 box-ordinal-group: 2
  7. 7. Flexible Box Layout• Introductory article: html5rocks.com/tutorials/flexbox/quick/• JavaScript polyfill: github.com/doctyper/flexie• .Net magazine (December):
  8. 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. 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. 10. Template Layout display: ‘abc’position: aposition: b a b cposition: c
  11. 11. Template Layoutdisplay: ‘aa’ ‘bc’ display: ‘acc’ ‘a.b’ a c ab c b
  12. 12. Template Layout• Currently under active development• Former & current editors from major browser makers• JavaScript Polyfill: code.google.com/p/css-template- layout/
  13. 13. Grid Positioning• Can work with existing page elements• Uses new length unit to set dimensions & position• No current implementation
  14. 14. Grid Positioning Implicit Grids
  15. 15. Grid Positioning Explicit Gridsgrid-columns: 25%; grid-rows: 20%; grid-columns: repeat(30% 5%);
  16. 16. Grid Positioning height: 5gr; left: 3gr; position: absolute; top: 2gr; width: 4gr;
  17. 17. Template Layout• Doesn’t seem to be actively developed• No JavaScript polyfill
  18. 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. 19. Why 2016? Textcss3.info/how-well-layout-websites-in-2016/
  20. 20. Thanks. Buy my book:nostarch.com/css3.htm Peter Gasston @stopsatgreen http://broken-links.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×