Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
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.
3. In the early days
✴ We thought the Web was print
✴ Limited device landscape meant
limited outlook
✴ Limited toolset
Thursday, 14 March 13
4. Print means
✴ Designer has full control
✴ Technologies will be supported
✴ Canvases are fixed
Thursday, 14 March 13
5. Web means
✴ Designer has less control
✴ Technologies won’t necessarily be
supported
✴ Canvases are variable
Thursday, 14 March 13
6. 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
7. ...means limited outlook
✴ Designing for the page
✴ Fixed, inflexible designs
✴ Mobile needed a separate site?
✴ WAP was a good idea?
Thursday, 14 March 13
8. 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
9. Consistent CSS support
✴ Was very welcome...
✴ Still didn’t give us much in the way
of layout
Thursday, 14 March 13
10. CSS2 gave us
✴ floats: limiting, and kind of abused.
✴ positioning: feh.
✴ margins, padding: pfffff.
✴ borders.
✴ meh.
Thursday, 14 March 13
11. 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
12. What about
✴ Centering stuff?
✴ Same height columns?
✴ Flexible multiple columns?
✴ Complex floats?
✴ Shrinkwrapping contents?
✴ etc.
Thursday, 14 March 13
20. Media queries
✴ Same content, different layouts
✴ Polyfills/fixed layouts for old IE
Thursday, 14 March 13
21. Media queries
media="screen and (max-width: 480px)"
@media screen and (max-width: 480px) {
/* do amazing stuff for
narrow screens */
}
Thursday, 14 March 13
22. 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
24. matchMedia
✴ matchMedia = media queries inside
script
✴ For IE<10 and Opera Presto, polyfill
github.com/paulirish/matchMedia.js/
Thursday, 14 March 13
32. @viewport
✴ Because viewport is more of a
style thing
✴ Specify viewport inside the
@viewport rule
✴ Opera Presto, IE10, WebKit
Thursday, 14 March 13
42. 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
44. 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
49. Flexing our muscle
✴ The flex property
✴ Set what proportion of available
space child elements occupy
✴ Unit-less proportion values
Thursday, 14 March 13
52. But there’s more
article {
flex: 3 2 400px;
}
/* flex-grow shares out positive space
flex-shrink shares out overflow reduction
flex-basis initially applied
= CAN GET BLOODY COMPLICATED */
Thursday, 14 March 13
60. 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
61. 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
72. 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
73. 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
78. 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
79. Put your content in a
separate block
<article class="content">
<h2>Introduction</h2>
<p>Hello, dear readers...
</article>
Thursday, 14 March 13
80. 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
81. Specify where to
flow it into
.content {
-webkit-flow-into: article;
}
.text-container, .text-overflow {
-webkit-flow-from: article;
}
Thursday, 14 March 13
84. CSS exclusions
✴ Create really complex floats
✴ Flow content around (and inside)
complex shapes
✴ Chrome Canary/IE only at the
moment
Thursday, 14 March 13
86. Position your exclusion
<article class="content">
<header>
...
</header>
...
</article>
header {
position: absolute;
etc.
}
Thursday, 14 March 13
87. Then exclude it!
header {
position: absolute;
etc.
wrap-flow: both;
/* Can also take values of start, end,
minimum, maximum, clear */
}
Thursday, 14 March 13
93. ✴ 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
94. ✴ 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
95. ✴ Supported in IE10, FF, Chrome, iOS,
Blackberry?
✴ text-size relative to viewport =
accessibility problem?
vh, vw, and vmin
Thursday, 14 March 13
98. ✴ 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
99. So do we just wait until support is
everywhere and IE6-9 is destroyed?
Thursday, 14 March 13
100. ✴ Intelligent alternatives via feature
detection
✴ @supports: native feature
detection
✴ Modernizr is still an excellent
solution
Hell no!
Thursday, 14 March 13
101. @supports
/* Provide basic layout, e.g. with floats */
@supports (display:flex) {
/* Provide Flexbox layout for supporting
browsers */
}
Thursday, 14 March 13