Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

6,671 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

  • These are one of the best companies for review articles. High quality with cheap rates. ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ I highly recommend it :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/39sFWPG ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×