laying out the future

Laying outThe future

Friday, 8 March 13

Find me...

✴ cmills@opera.com/cmills@w3.org✴ @chrisdavidmills✴ slideshare.net/chrisdavidmills

Friday, 8 March 13

In the early days

✴ We thought the Web was print✴ Limited device landscape meant

limited outlook✴ Limited toolset

Friday, 8 March 13

Consistent CSS support

✴ Was very welcome...✴ Still didn’t give us much in the way

of layout

Friday, 8 March 13

CSS2 gave us

✴ floats: limiting, and kind of abused.✴ positioning: feh.✴ margins, padding: pfffff.✴ borders.✴ meh.

Friday, 8 March 13

We still have problems

At this point, there was still a raft of design problems that were absurdly difficult to solve on the web.

Friday, 8 March 13

What about

✴ Centering stuff? ✴ Same height columns?✴ Flexible multiple columns?✴ Complex floats?✴ Shrinkwrapping contents?✴ etc.

Friday, 8 March 13

Same height columns

Friday, 8 March 13

Same height columns

✴ We can fix this with faux columns✴ Or JavaScript✴ But really? Should we need to?

Friday, 8 March 13

Fortunately we have

A New Hope

Friday, 8 March 13

New tools on the horizon

✴ CSS WG + browser vendors✴ Hard at work

Friday, 8 March 13

Media queries

Friday, 8 March 13

Media queries

✴ Same content, different layouts✴ Optimized UIs!✴ Polyfills/fixed layouts for old IE

Friday, 8 March 13

Media queries

/* Mobile first - make your mobile layout the default... */

@media screen and (min-width: 481px) { /* ...then do amazing stuff for wider screens */}

Friday, 8 March 13

Media queries

Friday, 8 March 13

matchMedia

✴ matchMedia = media queries inside script

✴ For IE<10 and Opera Presto, polyfill github.com/paulirish/matchMedia.js/

Friday, 8 March 13

matchMedia example

if (window.matchMedia("(min-width: 480px)").matches) { /* Do stuff for wider screens */} else { /* Do stuff for narrow screens */}

Friday, 8 March 13

http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/

More on Media queries

Friday, 8 March 13

viewport/CSS device

adaptation

Friday, 8 March 13

Mobile browsers lie

✴ About viewport width✴ Some also lie about the resolution✴ So media queries alone don’t cut it

Friday, 8 March 13

Mobile misbehavior

Friday, 8 March 13

Viewport

<meta name="viewport" content="width=device-width">

Friday, 8 March 13

Better

Friday, 8 March 13

@viewport

✴ Because viewport is more of a style thing

✴ Specify viewport inside the @viewport rule

✴ Opera Presto, IE10, WebKit

Friday, 8 March 13

Viewport

@viewport { width: device-width;}

Friday, 8 March 13

http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

More on viewportand @ viewport

Friday, 8 March 13

Flexbox

Friday, 8 March 13

Flexbox rocks

✴ Allows easy flexible layouts✴ Content reordering✴ Same height columns✴ Cure for cancer?✴ Chrome, Opera Presto, FF, IE (old

syntax)

Friday, 8 March 13

An example

<section> <nav> ... </nav> <article> ... </article> <article> ... </article></section>

Friday, 8 March 13

An example

section { display: flex;}

Friday, 8 March 13

Gives you

Friday, 8 March 13

Rows and columns

section { display: flex; flex-direction: row; flex-wrap: nowrap;}

/* flex-flow is shorthand for flex-direction/ wrap */

Friday, 8 March 13

Main and cross axis

Friday, 8 March 13

align items on main axis

section { justify-content: center;}

/* can take other values such as flex-start, flex-end, space-between and space-around */

Friday, 8 March 13

Friday, 8 March 13

align items on cross axis

section { align-items: stretch;}

/* can take other values such as flex-start, flex-end, and center; */

Friday, 8 March 13

Friday, 8 March 13

Ordering elements

✴ Reorder child elements easily and quickly

✴ Without screwing with the DOM

Friday, 8 March 13

Ordinal groups

nav { order: 1;}

Friday, 8 March 13

Gives you

Friday, 8 March 13

Flexing our muscle

✴ The flex property✴ Set what proportion of available

space child elements occupy✴ Unit-less proportion values

Friday, 8 March 13

Flex property

nav { flex: 1;}

article { flex: 3;}

Friday, 8 March 13

Gives you

Friday, 8 March 13

But there’s more

article { flex: 3 2 400px;}

/* flex-grow shares out positive spaceflex-shrink shares out overflow reductionflex-basis initially applied = CAN GET BLOODY COMPLICATED */

Friday, 8 March 13

A case study

Friday, 8 March 13

Placing the nav

section { display: flex; flex-flow: row wrap;}

nav { flex: 1 100%;}

Friday, 8 March 13

Flexible awesome nav!

Friday, 8 March 13

Making awesome

nav { display: flex; justify-content: center; }

nav ul { display: flex; flex-flow: row wrap; justify-content: center; width: 80%;}

Friday, 8 March 13

Making awesome

nav ul li { flex: auto; min-width: 5rem;}

Friday, 8 March 13

http://dev.opera.com/articles/view/flexbox-basics/

More on Flexbox

Friday, 8 March 13

Multi-column

Friday, 8 March 13

Multi-col layouts

✴ Break content into multi-col✴ Cut down on markup cruft✴ Specify column breaks, column

rules and heading span✴ Most modern browsers have this

Friday, 8 March 13

Great at some things

<article>...</article>

article { column-count: 2; column-gap: 1rem; column-rule: 2px solid rgba(0,0,255,0.25);}

Friday, 8 March 13

Gives you

Friday, 8 March 13

Controlling columnbreaks

article h2 { break-before: column; break-after: avoid-column;}

Friday, 8 March 13

Gives you

Friday, 8 March 13

Column-spanning headings

article h2 { break-after: avoid-column; column-span: all;}

Friday, 8 March 13

Gives you

Friday, 8 March 13

Can also specifycolumn width

article { column-width: 20rem; column-gap: 2rem;}

Friday, 8 March 13

Gives you Friday, 8 March 13

http://dev.opera.com/articles/view/css3-multi-column-layout/

More on Multi-col

Friday, 8 March 13

Regions

Friday, 8 March 13

CSS regions

✴ Turn containers into vessels to flow content into

✴ Flexible complex layouts✴ IE10 and Chrome Canary only at the

moment

Friday, 8 March 13

Put your content in a separate block

<article class="content"> <h2>Introduction</h2> <p>Hello, dear readers...</article>

Friday, 8 March 13

Then create your layout blocks

<div class="layout"> <div class="text-container"></div> <div class="text-container"></div> <div class="image-container"> ... </div> <div class="text-container"></div></div><div class="text-overflow"></div>

Friday, 8 March 13

Specify where toflow it into

.content { -webkit-flow-into: article;}

.text-container, .text-overflow { -webkit-flow-from: article;}

Friday, 8 March 13

A little something I cooked up

Friday, 8 March 13

Exclusions and shapes

Friday, 8 March 13

CSS exclusions

✴ Create really complex floats✴ Flow content around (and inside)

complex shapes✴ Chrome Canary/IE only at the

moment

Friday, 8 March 13

Friday, 8 March 13

Position your exclusion

<article class="content"> <header> ... </header> ...</article>

header { position: absolute; etc. }

Friday, 8 March 13

Then exclude it!

header { position: absolute; etc. wrap-flow: both; /* Can also take values of start, end, minimum, maximum, clear */}

Friday, 8 March 13

Different effects

Text

both start end

minimum maximum clear

Friday, 8 March 13

Shape your exclusion

shape-inside: rectangle(0, 0, 100%, 100%, 25%, 25%);

shape-inside: polygon( ... )

shape-outside: polygon( ... )

Friday, 8 March 13

shape inside/outside

Friday, 8 March 13

A note onCSS units

Friday, 8 March 13

✴ rem units used throughout my examples

✴ size relative to the root (html) font-size, not the parent font size.

✴ Much easier maths

rems

Friday, 8 March 13

✴ Percentage of viewport size✴ 1vw = 1% of viewport width✴ 1vh = 1% of viewport height✴ 1vmin = 1vw or 1vh, whatever is

smallest

vh, vw, and vmin

Friday, 8 March 13

✴ Supported in IE10, FF, Chrome, iOS, Blackberry?

✴ text-size relative to viewport = accessibility problem?

vh, vw, and vmin

Friday, 8 March 13

New responsive capabilities

Friday, 8 March 13

Fallbacks and alternatives

Friday, 8 March 13

So do we just wait until support is everywhere and IE6-9 is destroyed?

Friday, 8 March 13

✴ Intelligent alternatives via feature detection

✴ @supports: native feature detection

✴ Modernizr is still an excellent solution

Hell no!

Friday, 8 March 13

Modernizr

<html lang="en-US" class="no-js"><head> <script src="modernizr.js"></script></head>

Friday, 8 March 13

Modernizr

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio ... ">

Friday, 8 March 13

Modernizr CSS

.feature-no-regions .layout, .feature-no-regions .text-overflow { display: none;}

.feature-no-regions .content { float: left; width: 48%; padding: 1%;}

Friday, 8 March 13

Fallback basic layout

Friday, 8 March 13

Modernizr JS

function rotateForm() { if(Modernizr.cssanimations && Modernizr.csstransforms3d) { form.setAttribute("class","form-rotate"); form.style.left = "0rem"; } else { back.style.zIndex = "5"; } }

Friday, 8 March 13

Buy my book“Subtle” advertisement

Friday, 8 March 13

Thanks!

Friday, 8 March 13

Photo credits

✴ Star wars adidas posters by Dorothy Tang: http://www.flickr.com/photos/adifans/4265441265/

Friday, 8 March 13