Speaker: Chris Mills

We’ve been publishing documents, pages, apps, books and cat pictures on the Web for around 20 years now, so it is very surprising that we’ve never really had much in the way of easily manipulable, proper tools for creating web layouts. For years we relied on spacer gifs and horrible abuses of table markup, because nothing else had anything approaching cross browser support. Yes, we’ve had CSS for a long time, but 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 proper layout tools for the web emerge and get support in browsers.

In this talk Chris Mills will take you through what’s available in the CSS3/4 layout specs, what can be used now in production projects, and what’s coming up on the horizon, including media queries, flexible box, multi-column layout, grids, regions, and more. Your cat pictures will never have looked better.

Notes:

Works for Opera and the W3C as an evangelist.

Historic layouts:

• We thought the web was print (designer had full control, fixed canvas)
• Web devices and screen size was limited
• Fixed inflexible designs
• Spaces GIFs!
• Early (and modern) CSS didn’t give us that much layout help (think columns, vertical centering)

CSS Working Group is working hard  to help out.

• Media Queries
• Use mobile first (assuming the mobile is slower – no network speed media query)
• matchMedia – media query inside JS! Serve different script blocks (ie 9- does not support)
• Viewport – mobile browsers lie! Use meta “viewport” to get real size
• Flexbox!

Flexbox details

• Syntax problems across browsers, but it can be dealt with…
• -webkit-flex-flow: row; // default layout in columns
• -webkit-justify-content: center; // space between (equal ws between elements)
• -webkit-align-iteme: center; // don’t match size, add vertical center
• -webkit-order: 1; // changes column order
• -webkit-flex: 1; // equal space for each column (this is proportional 2:1 …)

Multi-col

• Useful for text, but not much else

CSS Grid Layout (only IE10)

• Simple syntax, not much support

Regions (limited support)

• Divs moved into other div regions (squirt)
• Content can flow across different containers

CSS Exclusions (No real support)

• Really complicated floats
• Can use SVG to create really odd flows

CSS Units

• Check out rem font sizing: http://snook.ca/archives/html_and_css/font-size-with-rem
• vh.vw – size to % of viewport. Can change text size on viewport change