Explore the Future of the Web

Implementing Layouts using CSS3

Chris Mills

It is very surprising that — in the 20 years we've been publishing documents on the Web — we've never really had much in the way of easily manipulable, proper tools for creating web layouts. Even with CSS having very good cross browser support in recent years, positioning doesn't have all the answers, and using floats for multiple columns is a hack. In 2012/2013, we are just starting to see decent layout tools for the web emerge and get support in browsers.

In this workshop, Chris Mills will look at historical layout methods, discuss their limitations, and then dive into the modern layout mechanisms available as part of CSS3, working through building up some useful examples with:

  • Media queries, viewport and matchMedia
  • Multi column layout
  • Flexbox
  • Grids
  • Regions
  • New CSS units such as rem, vw, vh and dppx
  • Fixing layouts with JavaScript
  • Providing support for older browsers using Polyfills, conditional comments, modernizr and @supports

– – – – – – – –

Explore the future at WebVisions NYC, Portland, Barcelona and Chicago.