Download - Laying out the future
Laying outThe future
Friday, 8 March 13
Find me...
✴ [email protected]/[email protected]✴ @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