future web layouts with chris mills
DESCRIPTION
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.TRANSCRIPT
![Page 1: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/1.jpg)
FutureLayouts
Thursday, 14 March 13
![Page 2: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/2.jpg)
Find me...
✴ [email protected]/[email protected]✴ @chrisdavidmills✴ slideshare.net/chrisdavidmills
Thursday, 14 March 13
![Page 3: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/3.jpg)
In the early days
✴ We thought the Web was print✴ Limited device landscape meant
limited outlook✴ Limited toolset
Thursday, 14 March 13
![Page 4: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/4.jpg)
Print means
✴ Designer has full control✴ Technologies will be supported✴ Canvases are fixed
Thursday, 14 March 13
![Page 5: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/5.jpg)
Web means
✴ Designer has less control✴ Technologies won’t necessarily be
supported✴ Canvases are variable
Thursday, 14 March 13
![Page 6: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/6.jpg)
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
![Page 7: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/7.jpg)
...means limited outlook
✴ Designing for the page✴ Fixed, inflexible designs✴ Mobile needed a separate site?✴ WAP was a good idea?
Thursday, 14 March 13
![Page 8: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/8.jpg)
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
![Page 9: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/9.jpg)
Consistent CSS support
✴ Was very welcome...✴ Still didn’t give us much in the way
of layout
Thursday, 14 March 13
![Page 10: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/10.jpg)
CSS2 gave us
✴ floats: limiting, and kind of abused.✴ positioning: feh.✴ margins, padding: pfffff.✴ borders.✴ meh.
Thursday, 14 March 13
![Page 11: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/11.jpg)
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
![Page 12: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/12.jpg)
What about
✴ Centering stuff? ✴ Same height columns?✴ Flexible multiple columns?✴ Complex floats?✴ Shrinkwrapping contents?✴ etc.
Thursday, 14 March 13
![Page 13: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/13.jpg)
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
![Page 14: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/14.jpg)
Centering stuff™
figure { text-align: center;}
figure div { display: inline-block; ...}
Thursday, 14 March 13
![Page 15: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/15.jpg)
Same height columns
Thursday, 14 March 13
![Page 16: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/16.jpg)
Same height columns
✴ We can fix this with faux columns✴ Or JavaScript✴ But really? Should we need to?
Thursday, 14 March 13
![Page 17: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/17.jpg)
Fortunately we have
A New Hope
Thursday, 14 March 13
![Page 18: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/18.jpg)
New tools on the horizon
✴ CSS WG + browser vendors✴ Hard at work
Thursday, 14 March 13
![Page 19: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/19.jpg)
Media queries
Thursday, 14 March 13
![Page 20: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/20.jpg)
Media queries
✴ Same content, different layouts✴ Polyfills/fixed layouts for old IE
Thursday, 14 March 13
![Page 21: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/21.jpg)
Media queries
media="screen and (max-width: 480px)"
@media screen and (max-width: 480px) { /* do amazing stuff for narrow screens */}
Thursday, 14 March 13
![Page 22: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/22.jpg)
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
![Page 23: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/23.jpg)
Media queries
Thursday, 14 March 13
![Page 24: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/24.jpg)
matchMedia
✴ matchMedia = media queries inside script
✴ For IE<10 and Opera Presto, polyfill github.com/paulirish/matchMedia.js/
Thursday, 14 March 13
![Page 25: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/25.jpg)
matchMedia example
if (window.matchMedia("(min-width: 480px)").matches) { /* Do stuff for wider screens */} else { /* Do stuff for narrow screens */}
Thursday, 14 March 13
![Page 26: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/26.jpg)
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
![Page 27: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/27.jpg)
viewport/CSS device
adaptation
Thursday, 14 March 13
![Page 28: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/28.jpg)
Mobile browsers lie
✴ About viewport width✴ Some also lie about the resolution✴ So media queries alone don’t cut it
Thursday, 14 March 13
![Page 29: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/29.jpg)
Mobile misbehavior
Thursday, 14 March 13
![Page 30: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/30.jpg)
Viewport
<meta name="viewport" content="width=device-width">
Thursday, 14 March 13
![Page 31: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/31.jpg)
Better
Thursday, 14 March 13
![Page 32: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/32.jpg)
@viewport
✴ Because viewport is more of a style thing
✴ Specify viewport inside the @viewport rule
✴ Opera Presto, IE10, WebKit
Thursday, 14 March 13
![Page 33: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/33.jpg)
Viewport
@viewport { width: device-width;}
Thursday, 14 March 13
![Page 34: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/34.jpg)
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
More on viewportand @ viewport
Thursday, 14 March 13
![Page 35: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/35.jpg)
Flexbox
Thursday, 14 March 13
![Page 36: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/36.jpg)
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
![Page 37: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/37.jpg)
An example
<section> <nav> ... </nav> <article> ... </article> <article> ... </article></section>
Thursday, 14 March 13
![Page 38: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/38.jpg)
An example
section { display: flex;}
Thursday, 14 March 13
![Page 39: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/39.jpg)
Gives you
Thursday, 14 March 13
![Page 40: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/40.jpg)
Rows and columns
section { display: flex; flex-direction: row; flex-wrap: nowrap;}
/* flex-flow is shorthand for flex-direction/ wrap */
Thursday, 14 March 13
![Page 41: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/41.jpg)
Main and cross axis
Thursday, 14 March 13
![Page 42: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/42.jpg)
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
![Page 43: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/43.jpg)
Thursday, 14 March 13
![Page 44: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/44.jpg)
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
![Page 45: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/45.jpg)
Thursday, 14 March 13
![Page 46: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/46.jpg)
Ordering elements
✴ Reorder child elements easily and quickly
✴ Without screwing with the DOM
Thursday, 14 March 13
![Page 47: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/47.jpg)
Ordinal groups
nav { order: 1;}
Thursday, 14 March 13
![Page 48: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/48.jpg)
Gives you
Thursday, 14 March 13
![Page 49: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/49.jpg)
Flexing our muscle
✴ The flex property✴ Set what proportion of available
space child elements occupy✴ Unit-less proportion values
Thursday, 14 March 13
![Page 50: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/50.jpg)
Flex property
nav { flex: 1;}
article { flex: 3;}
Thursday, 14 March 13
![Page 51: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/51.jpg)
Gives you
Thursday, 14 March 13
![Page 52: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/52.jpg)
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
![Page 53: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/53.jpg)
A case study
Thursday, 14 March 13
![Page 54: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/54.jpg)
Placing the nav
section { display: flex; flex-flow: row wrap;}
nav { flex: 1 100%;}
Thursday, 14 March 13
![Page 55: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/55.jpg)
Flexible awesome nav!
Thursday, 14 March 13
![Page 56: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/56.jpg)
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
![Page 57: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/57.jpg)
Making awesome
nav ul li { flex: auto; min-width: 5rem;}
Thursday, 14 March 13
![Page 58: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/58.jpg)
http://dev.opera.com/articles/view/flexbox-basics/
More on Flexbox
Thursday, 14 March 13
![Page 59: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/59.jpg)
Multi-column
Thursday, 14 March 13
![Page 60: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/60.jpg)
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
![Page 61: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/61.jpg)
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
![Page 62: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/62.jpg)
Gives you
Thursday, 14 March 13
![Page 63: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/63.jpg)
Controlling columnbreaks
article h2 { break-before: column; break-after: avoid-column;}
Thursday, 14 March 13
![Page 64: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/64.jpg)
Gives you
Thursday, 14 March 13
![Page 65: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/65.jpg)
Column-spanning headings
article h2 { break-after: avoid-column; column-span: all;}
Thursday, 14 March 13
![Page 66: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/66.jpg)
Gives you
Thursday, 14 March 13
![Page 67: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/67.jpg)
Can also specifycolumn width
article { column-width: 20rem; column-gap: 2rem;}
Thursday, 14 March 13
![Page 68: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/68.jpg)
Gives you Thursday, 14 March 13
![Page 69: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/69.jpg)
Not so great at other things
✴ No proper multi-column layouts✴ break properties are fiddly✴ Only works for simple layouts
Thursday, 14 March 13
![Page 70: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/70.jpg)
http://dev.opera.com/articles/view/css3-multi-column-layout/
More on Multi-col
Thursday, 14 March 13
![Page 71: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/71.jpg)
Grids
Thursday, 14 March 13
![Page 72: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/72.jpg)
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
![Page 73: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/73.jpg)
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
![Page 74: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/74.jpg)
Define your gridcontents
header { grid-column-position: 1; grid-row-position: 1; grid-column-span: 7;}
Thursday, 14 March 13
![Page 75: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/75.jpg)
Thursday, 14 March 13
![Page 76: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/76.jpg)
http://24ways.org/2012/css3-grid-layout/ (out of date syntax, but gives good overview)
More on grids
Thursday, 14 March 13
![Page 77: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/77.jpg)
Regions
Thursday, 14 March 13
![Page 78: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/78.jpg)
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
![Page 79: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/79.jpg)
Put your content in a separate block
<article class="content"> <h2>Introduction</h2> <p>Hello, dear readers...</article>
Thursday, 14 March 13
![Page 80: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/80.jpg)
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
![Page 81: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/81.jpg)
Specify where toflow it into
.content { -webkit-flow-into: article;}
.text-container, .text-overflow { -webkit-flow-from: article;}
Thursday, 14 March 13
![Page 82: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/82.jpg)
A little something I cooked up
Thursday, 14 March 13
![Page 83: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/83.jpg)
Exclusions and shapes
Thursday, 14 March 13
![Page 84: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/84.jpg)
CSS exclusions
✴ Create really complex floats✴ Flow content around (and inside)
complex shapes✴ Chrome Canary/IE only at the
moment
Thursday, 14 March 13
![Page 85: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/85.jpg)
Thursday, 14 March 13
![Page 86: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/86.jpg)
Position your exclusion
<article class="content"> <header> ... </header> ...</article>
header { position: absolute; etc. }
Thursday, 14 March 13
![Page 87: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/87.jpg)
Then exclude it!
header { position: absolute; etc. wrap-flow: both; /* Can also take values of start, end, minimum, maximum, clear */}
Thursday, 14 March 13
![Page 88: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/88.jpg)
Different effects
Text
both start end
minimum maximum clear
Thursday, 14 March 13
![Page 89: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/89.jpg)
Shape your exclusion
shape-inside: rectangle(0, 0, 100%, 100%, 25%, 25%);
shape-inside: polygon( ... )
shape-outside: polygon( ... )
Thursday, 14 March 13
![Page 90: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/90.jpg)
shape inside/outside
Thursday, 14 March 13
![Page 91: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/91.jpg)
My examples...
✴ ...didn’t work✴ Apparently wrap-flow is in IE10✴ and shape-inside/outside in
Chrome Canary...
Thursday, 14 March 13
![Page 92: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/92.jpg)
A note onCSS units
Thursday, 14 March 13
![Page 93: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/93.jpg)
✴ 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
![Page 94: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/94.jpg)
✴ 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
![Page 95: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/95.jpg)
✴ Supported in IE10, FF, Chrome, iOS, Blackberry?
✴ text-size relative to viewport = accessibility problem?
vh, vw, and vmin
Thursday, 14 March 13
![Page 96: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/96.jpg)
New responsive capabilities
Thursday, 14 March 13
![Page 97: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/97.jpg)
Fallbacks and alternatives
Thursday, 14 March 13
![Page 98: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/98.jpg)
✴ 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
![Page 99: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/99.jpg)
So do we just wait until support is everywhere and IE6-9 is destroyed?
Thursday, 14 March 13
![Page 100: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/100.jpg)
✴ Intelligent alternatives via feature detection
✴ @supports: native feature detection
✴ Modernizr is still an excellent solution
Hell no!
Thursday, 14 March 13
![Page 101: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/101.jpg)
@supports
/* Provide basic layout, e.g. with floats */
@supports (display:flex) { /* Provide Flexbox layout for supporting browsers */}
Thursday, 14 March 13
![Page 102: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/102.jpg)
Modernizr
<html lang="en-US" class="no-js"><head> <script src="modernizr.js"></script></head>
Thursday, 14 March 13
![Page 103: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/103.jpg)
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
![Page 104: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/104.jpg)
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
![Page 105: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/105.jpg)
Fallback basic layout
Thursday, 14 March 13
![Page 106: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/106.jpg)
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
![Page 107: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/107.jpg)
Buy my book“Subtle” advertisement
Thursday, 14 March 13
![Page 108: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/108.jpg)
Thanks!
Thursday, 14 March 13
![Page 109: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/109.jpg)
Find me...
✴ [email protected]/[email protected]✴ @chrisdavidmills✴ slideshare.net/chrisdavidmills
Thursday, 14 March 13
![Page 110: Future Web Layouts with Chris Mills](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c77d884a7959c6148b45a2/html5/thumbnails/110.jpg)
Photo credits
✴ Star wars adidas posters by Dorothy Tang: http://www.flickr.com/photos/adifans/4265441265/
Thursday, 14 March 13