Your SlideShare is downloading. ×

How we'll lay out websites in 2016

5,773

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

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,773
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
48
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. How we’ll lay outwebsites 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 Layoutwidth: 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: 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. 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: aposition: b a b cposition: c
  • 11. Template Layoutdisplay: ‘aa’ ‘bc’ display: ‘acc’ ‘a.b’ a c ab 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 Gridsgrid-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? Textcss3.info/how-well-layout-websites-in-2016/
  • 20. Thanks. Buy my book:nostarch.com/css3.htm Peter Gasston @stopsatgreen http://broken-links.com

×