How we'll lay out websites in 2016
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

How we'll lay out websites in 2016

on

  • 6,186 views

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

Statistics

Views

Total Views
6,186
Views on SlideShare
5,164
Embed Views
1,022

Actions

Likes
7
Downloads
46
Comments
0

10 Embeds 1,022

http://www.broken-links.com 812
http://netzlogbuch.de 154
http://lanyrd.com 22
http://www.slideshare.net 16
http://feeds.feedburner.com 10
http://www.netvibes.com 3
http://translate.googleusercontent.com 2
https://twitter.com 1
http://guillaume-bartolini.com 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How we'll lay out websites in 2016 Presentation 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