future layouts

FutureLayouts

Thursday, 14 March 13

Find me...

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

Thursday, 14 March 13

In the early days

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

limited outlook✴ Limited toolset

Thursday, 14 March 13

Print means

✴ Designer has full control✴ Technologies will be supported✴ Canvases are fixed

Thursday, 14 March 13

Web means

✴ Designer has less control✴ Technologies won’t necessarily be

supported✴ Canvases are variable

Thursday, 14 March 13

Limited devices...

✴ We had desktops and laptops✴ Of around 480 x 320, 640 x 480...✴ ...or 800 x 600 if you were really

posh✴ (We’ve come a long way since

then)

Thursday, 14 March 13

...means limited outlook

✴ Designing for the page✴ Fixed, inflexible designs✴ Mobile needed a separate site?✴ WAP was a good idea?

Thursday, 14 March 13

Limited toolset

✴ We didn’t have a good toolset for layout

✴ CSS came along soon after...✴ ..but CSS support didn’t✴ So we got into HTML tables and

spacer GIFs

Thursday, 14 March 13

Consistent CSS support

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

of layout

Thursday, 14 March 13

CSS2 gave us

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

Thursday, 14 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.

Thursday, 14 March 13

What about

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

Thursday, 14 March 13

Centering stuff™

<figure> <div> <img src="../base-styles/grim-north.jpg" alt="A map of the North of England"> <figcaption>Figure 1.1: It's grim up North.</figcaption> </div></figure>

Thursday, 14 March 13

Centering stuff™

figure { text-align: center;}

figure div { display: inline-block; ...}

Thursday, 14 March 13

Same height columns

Thursday, 14 March 13

Same height columns

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

Thursday, 14 March 13

Fortunately we have

A New Hope

Thursday, 14 March 13

New tools on the horizon

✴ CSS WG + browser vendors✴ Hard at work

Thursday, 14 March 13

Media queries

Thursday, 14 March 13

Media queries

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

Thursday, 14 March 13

Media queries

media="screen and (max-width: 480px)"

@media screen and (max-width: 480px) { /* do amazing stuff for narrow screens */}

Thursday, 14 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 */}

Thursday, 14 March 13

Media queries

Thursday, 14 March 13

matchMedia

✴ matchMedia = media queries inside script

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

Thursday, 14 March 13

matchMedia example

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

Thursday, 14 March 13

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

More on Media queries

Thursday, 14 March 13

viewport/CSS device

adaptation

Thursday, 14 March 13

Mobile browsers lie

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

Thursday, 14 March 13

Mobile misbehavior

Thursday, 14 March 13

Viewport

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

Thursday, 14 March 13

Better

Thursday, 14 March 13

@viewport

✴ Because viewport is more of a style thing

✴ Specify viewport inside the @viewport rule

✴ Opera Presto, IE10, WebKit

Thursday, 14 March 13

Viewport

@viewport { width: device-width;}

Thursday, 14 March 13

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

More on viewportand @ viewport

Thursday, 14 March 13

Flexbox

Thursday, 14 March 13

Flexbox rocks

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

syntax)

Thursday, 14 March 13

An example

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

Thursday, 14 March 13

An example

section { display: flex;}

Thursday, 14 March 13

Gives you

Thursday, 14 March 13

Rows and columns

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

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

Thursday, 14 March 13

Main and cross axis

Thursday, 14 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 */

Thursday, 14 March 13

Thursday, 14 March 13

align items on cross axis

section { align-items: stretch;}

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

Thursday, 14 March 13

Thursday, 14 March 13

Ordering elements

✴ Reorder child elements easily and quickly

✴ Without screwing with the DOM

Thursday, 14 March 13

Ordinal groups

nav { order: 1;}

Thursday, 14 March 13

Gives you

Thursday, 14 March 13

Flexing our muscle

✴ The flex property✴ Set what proportion of available

space child elements occupy✴ Unit-less proportion values

Thursday, 14 March 13

Flex property

nav { flex: 1;}

article { flex: 3;}

Thursday, 14 March 13

Gives you

Thursday, 14 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 */

Thursday, 14 March 13

A case study

Thursday, 14 March 13

Placing the nav

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

nav { flex: 1 100%;}

Thursday, 14 March 13

Flexible awesome nav!

Thursday, 14 March 13

Making awesome

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

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

Thursday, 14 March 13

Making awesome

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

Thursday, 14 March 13

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

More on Flexbox

Thursday, 14 March 13

Multi-column

Thursday, 14 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

Thursday, 14 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);}

Thursday, 14 March 13

Gives you

Thursday, 14 March 13

Controlling columnbreaks

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

Thursday, 14 March 13

Gives you

Thursday, 14 March 13

Column-spanning headings

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

Thursday, 14 March 13

Gives you

Thursday, 14 March 13

Can also specifycolumn width

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

Thursday, 14 March 13

Gives you Thursday, 14 March 13

Not so great at other things

✴ No proper multi-column layouts✴ break properties are fiddly✴ Only works for simple layouts

Thursday, 14 March 13

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

More on Multi-col

Thursday, 14 March 13

Grids

Thursday, 14 March 13

CSS grid layout

✴ A proper grid system for the web✴ Completely remove content from

any layout concern✴ IE10 only at the moment✴ Spec in flux

Thursday, 14 March 13

Define your grid

body { display: grid; grid-columns: 4% 20% 20% 12% 20% 20% 4%; grid-rows: 300px 450px 450px 450px 300px;}

Thursday, 14 March 13

Define your gridcontents

header { grid-column-position: 1; grid-row-position: 1; grid-column-span: 7;}

Thursday, 14 March 13

Thursday, 14 March 13

http://24ways.org/2012/css3-grid-layout/ (out of date syntax, but gives good overview)

More on grids

Thursday, 14 March 13

Regions

Thursday, 14 March 13

CSS regions

✴ Turn containers into vessels to flow content into

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

moment

Thursday, 14 March 13

Put your content in a separate block

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

Thursday, 14 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>

Thursday, 14 March 13

Specify where toflow it into

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

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

Thursday, 14 March 13

A little something I cooked up

Thursday, 14 March 13

Exclusions and shapes

Thursday, 14 March 13

CSS exclusions

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

complex shapes✴ Chrome Canary/IE only at the

moment

Thursday, 14 March 13

Thursday, 14 March 13

Position your exclusion

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

header { position: absolute; etc. }

Thursday, 14 March 13

Then exclude it!

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

Thursday, 14 March 13

Different effects

Text

both start end

minimum maximum clear

Thursday, 14 March 13

Shape your exclusion

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

shape-inside: polygon( ... )

shape-outside: polygon( ... )

Thursday, 14 March 13

shape inside/outside

Thursday, 14 March 13

My examples...

✴ ...didn’t work✴ Apparently wrap-flow is in IE10✴ and shape-inside/outside in

Chrome Canary...

Thursday, 14 March 13

A note onCSS units

Thursday, 14 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

Thursday, 14 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

Thursday, 14 March 13

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

✴ text-size relative to viewport = accessibility problem?

vh, vw, and vmin

Thursday, 14 March 13

New responsive capabilities

Thursday, 14 March 13

Fallbacks and alternatives

Thursday, 14 March 13

✴ A lot of this stuff doesn’t degrade very gracefully

✴ Not a surprise, as layout is a pretty big deal

In truth

Thursday, 14 March 13

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

Thursday, 14 March 13

✴ Intelligent alternatives via feature detection

✴ @supports: native feature detection

✴ Modernizr is still an excellent solution

Hell no!

Thursday, 14 March 13

@supports

/* Provide basic layout, e.g. with floats */

@supports (display:flex) { /* Provide Flexbox layout for supporting browsers */}

Thursday, 14 March 13

Modernizr

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

Thursday, 14 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 ... ">

Thursday, 14 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%;}

Thursday, 14 March 13

Fallback basic layout

Thursday, 14 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"; } }

Thursday, 14 March 13

Buy my book“Subtle” advertisement

Thursday, 14 March 13

Thanks!

Thursday, 14 March 13

Find me...

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

Thursday, 14 March 13

Photo credits

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

Thursday, 14 March 13