Your SlideShare is downloading. ×
0
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
How we'll lay out websites in 2016
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How we'll lay out websites in 2016

5,831

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,831
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

×