How we'll lay out websites in 2016

6,297 views
6,091 views

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
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,297
On SlideShare
0
From Embeds
0
Number of Embeds
1,061
Actions
Shares
0
Downloads
48
Comments
0
Likes
8
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

×