Slide 1
Slide 1 text
Friday, 14 February 14
Slide 2
Slide 2 text
Awwwards, Paris, February 2014
Rachel Andrew
@rachelandrew
The New CSS
Layout
Friday, 14 February 14
Slide 3
Slide 3 text
We need designed for purpose layout tools!
Floats, positioning, display: table,
display: inline-block
CSS for Layout
Friday, 14 February 14
Slide 4
Slide 4 text
Our existing layout methods make
creating complex in-browser application
layouts difficult
Layout for
applications
Friday, 14 February 14
Slide 5
Slide 5 text
W3C Candidate Recommendation, 12th April 2011
http://www.w3.org/TR/css3-multicol/
Multi-column
Layout
Friday, 14 February 14
Slide 6
Slide 6 text
http://www.flickr.com/photos/62693815@N03/6277209256/
Friday, 14 February 14
Slide 7
Slide 7 text
We specify our
columns on the
container element.
.col-wrapper {
background-color: rgb(234,237,228);
color: rgb(68,68,68);
padding: 20px;
border-radius: 5px;
}
Multi-col
Friday, 14 February 14
Slide 8
Slide 8 text
Specifying the width
and allowing the
browser to calculate
number of columns.
.col-wrapper {
background-color: rgb(234,237,228);
color: rgb(68,68,68);
padding: 20px;
border-radius: 5px;
column-width: 220px;
}
Multi-col
Friday, 14 February 14
Slide 9
Slide 9 text
Specifying the
number of columns
means the browser
calculates the width.
.col-wrapper {
background-color: rgb(234,237,228);
color: rgb(68,68,68);
padding: 20px;
border-radius: 5px;
column-count: 4;
}
Multi-col
Friday, 14 February 14
Slide 10
Slide 10 text
The column-gap
property controls the
width of the gutters
between our
columns.
.col-wrapper {
background-color: rgb(234,237,228);
color: rgb(68,68,68);
padding: 20px;
border-radius: 5px;
column-width: 220px;
column-gap: 1.5em;
}
Multi-col
Friday, 14 February 14
Slide 11
Slide 11 text
The column-rule
property sets a rule
between columns. It
takes no space of it’s
own and overlays the
column-gap.
.col-wrapper {
background-color: rgb(234,237,228);
color: rgb(68,68,68);
padding: 20px;
border-radius: 5px;
column-width: 220px;
column-gap: 2em;
column-rule: 2px dotted rgb(170,179,171);
}
Multi-col
Friday, 14 February 14
Slide 12
Slide 12 text
The column-span
property makes an
element span
columns.
.col-wrapper h1 {
column-span: all;
padding: 0 0 .5em 0;
}
Multi-col
Friday, 14 February 14
Slide 13
Slide 13 text
Friday, 14 February 14
Slide 14
Slide 14 text
Perch UI
Friday, 14 February 14
Slide 15
Slide 15 text
Images are
constrained by the
columns.
img {
max-width: 100%;
}
Multi-col
Friday, 14 February 14
Slide 16
Slide 16 text
If a browser does not
support multiple-
column layout it will
display the content
in a single column.
Multi-col
Friday, 14 February 14
Slide 17
Slide 17 text
Using CSS multi-column layouts - https://developer.mozilla.org/en-US/
docs/CSS/Using_CSS_multi-column_layouts
CSS3 Multi-column layout - http://dev.opera.com/articles/view/css3-
multi-column-layout/
Detailed browser information - http://www.quirksmode.org/css/
columns/
Multi-col Resources
Friday, 14 February 14
Slide 18
Slide 18 text
W3C Candidate Recommendation, 18th September 2012
http://www.w3.org/TR/css3-flexbox/
Flexible Box
Layout Module
Friday, 14 February 14
Slide 19
Slide 19 text
http://www.flickr.com/photos/megangoodchild/4603320792
Friday, 14 February 14
Slide 20
Slide 20 text
Navigation marked
up as a list. I want to
space these items
evenly.
Flexbox
Friday, 14 February 14
Slide 21
Slide 21 text
A value of flex for the
display elements
means we are using
flexbox.
nav ul{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
}
Flexbox
Friday, 14 February 14
Slide 22
Slide 22 text
Setting justify-
content to space-
between means that
items justify against
the left and right
sides of the box.
nav ul{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
Flexbox
Friday, 14 February 14
Slide 23
Slide 23 text
The default value of
flex-direction is row.
nav ul{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
Flexbox
Friday, 14 February 14
Slide 24
Slide 24 text
Set flex-direction to
row-reverse and the
order the items
display in reverses.
nav ul{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: stretch;
}
Flexbox
Friday, 14 February 14
Slide 25
Slide 25 text
Creating equal
height boxes using
flexbox.
Flexbox
Friday, 14 February 14
...
...
...
Slide 26
Slide 26 text
With align-items
given a value of
stretch the items will
take the height of the
tallest.
.boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
}
Flexbox
Friday, 14 February 14
Slide 27
Slide 27 text
With align-items
given a value of
center.
.boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
Flexbox
Friday, 14 February 14
Slide 28
Slide 28 text
With align-items
given a value of flex-
end.
.boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
}
Flexbox
Friday, 14 February 14
Slide 29
Slide 29 text
The order property
means we can order
our flex items
independently of
source order.
.boxes .box:nth-child(1) {
order:3;
}
.boxes .box:nth-child(2) {
order:1;
}
.boxes .box:nth-child(3) {
order:2;
}
Flexbox
Friday, 14 February 14
Slide 30
Slide 30 text
http://css-tricks.com/old-flexbox-and-new-flexbox/
Friday, 14 February 14
Slide 31
Slide 31 text
Friday, 14 February 14
Slide 32
Slide 32 text
you CAN use these techniques even where there is limited browser support
Use new CSS sparingly, as an
enhancement for small UI elements -
rather than thinking in terms of full layouts.
Friday, 14 February 14
Slide 33
Slide 33 text
http://philipwalton.github.io/solved-by-flexbox/
Friday, 14 February 14
Slide 34
Slide 34 text
Using CSS Flexible Boxes - https://developer.mozilla.org/en-US/docs/
CSS/Tutorials/Using_CSS_flexible_boxes
Advanced Cross Browser Flexbox - http://dev.opera.com/articles/view/
advanced-cross-browser-flexbox/
Working with Flexbox - http://www.adobe.com/devnet/html5/articles/
working-with-flexbox-the-new-spec.html
Solved by Flexbox - http://philipwalton.github.io/solved-by-flexbox/
Flexbox Resources
Friday, 14 February 14
Slide 35
Slide 35 text
W3C Working Draft, 23rd January 2014
http://www.w3.org/TR/css3-grid-layout/
CSS
Grid Layout
Friday, 14 February 14
Slide 36
Slide 36 text
http://www.flickr.com/photos/adactio/1799953270
Friday, 14 February 14
Slide 37
Slide 37 text
7th April 2011
First public draft
History of CSS
Grid Layout
Friday, 14 February 14
Slide 38
Slide 38 text
http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
Friday, 14 February 14
Slide 39
Slide 39 text
23 January 2014
Current Working Draft
CSS Grid Layout
Friday, 14 February 14
Slide 40
Slide 40 text
Define a grid using
the new grid and
inline-grid values of
the display property.
.wrapper {
display: grid;
}
Grid Layout
Friday, 14 February 14
Slide 41
Slide 41 text
The grid-template-
columns property
defines the grid
columns; grid-
template-rows the
grid rows.
.wrapper {
display: grid;
grid-template-columns: 200px 20px auto 20px 200px;
grid-template-rows: auto 1fr;
}
Grid Layout
Friday, 14 February 14
Slide 42
Slide 42 text
I have declared a
grid on the wrapper
so the children need
to be positioned.
Grid Layout
Friday, 14 February 14
Slide 43
Slide 43 text
grid-column-start
and grid-column-end
set the column
position; grid-row-
start and grid-row-
end the row.
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
Grid Layout
Friday, 14 February 14
Slide 44
Slide 44 text
Columns used as
gutters still count as
a column, when
positioning items.
.mainnav {
grid-column-start: 1; grid-column-end:2;
grid-row-start: 2; grid-row-end: 3;
}
.title {
grid-column-start: 3; grid-column-end: 4;
grid-row-start: 1; grid-row-end: 2;
}
.quote {
grid-column-start: 5; grid-column-end:6;
grid-row-start: 2; grid-row-end: 3;
}
Grid Layout
Friday, 14 February 14
Slide 45
Slide 45 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
Grid Layout
Friday, 14 February 14
Slide 46
Slide 46 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
Grid Layout
Friday, 14 February 14
Slide 47
Slide 47 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
Grid Layout
Friday, 14 February 14
Slide 48
Slide 48 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
Grid Layout
Friday, 14 February 14
Slide 49
Slide 49 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
Grid Layout
Friday, 14 February 14
Slide 50
Slide 50 text
We can also declare
named grid lines.
.wrapper {
display: grid;
grid-template-columns: (nav) 200px
(gutter) 20px
(main) auto
(gutter) 20px
(sidebar) 200px;
grid-template-rows: (header) auto (content) 1fr (content-
end);
}
Grid Layout
Friday, 14 February 14
Slide 51
Slide 51 text
You then use the
name rather than the
number to place the
content.
.content {
grid-column-start: main;
grid-column-end: span 1;
grid-row-start: content;
grid-row-end: span 1;
}
Grid Layout
Friday, 14 February 14
Slide 52
Slide 52 text
It will also be
possible to declare
grid template areas
.wrapper {
display: grid;
grid-template-columns: 200px 20px auto 20px 200px;
grid-template-rows: auto 1fr;
grid-template-areas: "header header header header
header"
"nav . content . sidebar"
}
Grid Layout
Friday, 14 February 14
Slide 53
Slide 53 text
With a template
defined you can
more simply target
areas of the
template.
.content {
grid-area: content;
}
Grid Layout
Friday, 14 February 14
Slide 54
Slide 54 text
New proposals
CSS Grid Layout
Friday, 14 February 14
Slide 55
Slide 55 text
http://lists.w3.org/Archives/Public/www-style/2013May/0077.html
Friday, 14 February 14
Slide 56
Slide 56 text
Based on the earlier Draft
IE10 Implementation
CSS Grid Layout
Friday, 14 February 14
Slide 57
Slide 57 text
Defining a grid in the
IE10 implementation.
.wrapper {
display: -ms-grid;
-ms-grid-columns: 200px 20px auto 20px 200px;
-ms-grid-rows: auto 1fr;
}
Grid Layout
Friday, 14 February 14
Slide 58
Slide 58 text
The grid-column and
grid-row properties
are used differently
in the new Working
Draft. This is how to
position grid items in
IE10.
.mainnav {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.title {
-ms-grid-row: 1;
-ms-grid-column:3;
}
.content {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
.quote {
-ms-grid-column: 5;
-ms-grid-row: 2;
}
Grid Layout
Friday, 14 February 14
Slide 59
Slide 59 text
The IE10
implementation
specifies the row and
column, rather than
the lines around.
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
Grid Layout
Friday, 14 February 14
Slide 60
Slide 60 text
The IE10
implementation
specifies the row and
column, rather than
the lines around.
Grid Layout .content {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
Friday, 14 February 14
Slide 61
Slide 61 text
http://codepen.io/rachelandrew/pen/sFhmx
Friday, 14 February 14
Slide 62
Slide 62 text
Friday, 14 February 14
Slide 63
Slide 63 text
http://lists.w3.org/Archives/Public/www-style/2013May/0114.html
Flexbox is for one-dimensional layouts
Grid is for two-dimensional layouts
Grid or Flexbox?
Friday, 14 February 14
Slide 64
Slide 64 text
Giving Content Priority with CSS Grid Layout - http://24ways.org/2012/
css3-grid-layout/
My Grid examples on CodePen - http://codepen.io/rachelandrew/tag/
24%20ways
CSS Grid Layout - what has changed? - http://www.rachelandrew.co.uk/
archives/2013/04/10/css-grid-layout---what-has-changed/
Named Lines and Grid areas - http://www.rachelandrew.co.uk/archives/
2013/04/29/css-grid-layout-named-grid-lines-and-areas/
My Grid Resources
Friday, 14 February 14
Slide 65
Slide 65 text
Test Drive Grid (IE10 implementation) - http://ie.microsoft.com/
testdrive/graphics/hands-on-css3/hands-on_grid.htm
Using CSS Grid Layout to build a game - http://www.sitepoint.com/
using-css-grid-layout-and-blend-5-to-build-a-game/
CSS Grid Layout Overhaul, comments needed! - http://www.css3.info/
css-grid-layout-overhaul-comments-needed/
IE10 implementation Polyfill - https://github.com/codler/Grid-Layout-
Polyfill
More resources
Friday, 14 February 14
Slide 66
Slide 66 text
http://html.adobe.com/webplatform/enable/
Friday, 14 February 14
Slide 67
Slide 67 text
W3C Working Draft, 28th May 2013
http://www.w3.org/TR/css3-regions/
CSS Regions
Friday, 14 February 14
Slide 68
Slide 68 text
http://html.adobe.com/webplatform/layout/regions/
Friday, 14 February 14
Slide 69
Slide 69 text
http://blogs.adobe.com/webplatform/2013/09/18/ios-7-safari-new-web-platform-features/
Friday, 14 February 14
Slide 70
Slide 70 text
My content is inside
the article element.
Regions
Friday, 14 February 14
...
Slide 71
Slide 71 text
The CSS property
flow-into has a value
of the name you
choose for this
content.
.main {
flow-into: article-thread;
}
Regions
Friday, 14 February 14
Slide 72
Slide 72 text
The property flow-
from sets where this
content thread
should flow from.
.article-regions {
flow-from: article-thread;
}
Regions
Friday, 14 February 14
Slide 73
Slide 73 text
Once the content
reaches a height of
6em it will have to
flow into the next
region.
.region1 {
height: 6em;
margin: 0 0 1em 0;
}
Regions
Friday, 14 February 14
Slide 74
Slide 74 text
The positioning of
the regions can use
any CSS layout
method you like.
.regionwrapper {
display: flex; flex-direction: row;
}
.region2 {
flex: 1; padding: 0.8em; height: 10em; border-right: 1px
dotted #ccc;
}
.region3 {
flex: 1; padding: 0.8em; height: 10em; border-right: 1px
dotted #ccc; background-color: rgb(255,255,255);
}
.region4 {
flex: 1; padding: 0.8em; height: 10em;
}
Regions
Friday, 14 February 14
Slide 75
Slide 75 text
A height of auto on a
region means it will
expand to take
whatever content is
there. A fixed height
means once that
height is reached the
content moves onto
the next region.
.region5 {
padding: 1em 0 0 0;
margin: 1em 0 0 0;
border-top: 1px dotted #ccc;
height: auto;
}
Regions
Friday, 14 February 14
Slide 76
Slide 76 text
Regions do not have
to be adjacent.
Regions
Friday, 14 February 14
Slide 77
Slide 77 text
Friday, 14 February 14
Slide 78
Slide 78 text
I have created a
separate HTML
document to store
my content.
Regions content
...
Regions
Friday, 14 February 14
Slide 79
Slide 79 text
On the page that will
display the content, I
have an iframe with
an ID, and also the
empty regions into
which content will
flow.
iframe>
Regions
Friday, 14 February 14
Slide 80
Slide 80 text
The flow-into
property on the
iframe ID causes the
iframe to disappear.
#regions-content {
-ms-flow-into: article-thread;
}
Regions
Friday, 14 February 14
Slide 81
Slide 81 text
We then flow-into
the regions as
before.
.article-regions {
-ms-flow-from: article-thread;
}
Regions
Friday, 14 February 14
Slide 82
Slide 82 text
Regions can be
positioned using any
method - here I am
using the IE10 Grid
Layout
implementation.
.regionwrapper {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 10em 10em auto;
}
.region1 {
margin: 0 0 1em 0;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
}
Regions
Friday, 14 February 14
Slide 83
Slide 83 text
Edit the grid
definition to change
height of rows to
adjust content flow.
.regionwrapper {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 10em 6em auto;
}
Regions
Friday, 14 February 14
Slide 84
Slide 84 text
http://alistapart.com/blog/post/css-regions-considered-harmful
“CSS Regions Considered Harmful”
January 2014
Friday, 14 February 14
Slide 85
Slide 85 text
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/kTktlHPJn4Q/
YrnfLxeMO7IJ
CSS Regions to be removed from the Blink
rendering engine
January 2014
Friday, 14 February 14
Slide 86
Slide 86 text
Using CSS Regions to flow content through a layout - http://
docs.webplatform.org/wiki/css/tutorials/css-regions
Say hello to CSS Regions Polyfill - http://corlan.org/2013/02/08/say-
hello-to-css-regions-polyfill/
CSS Regions examples on CodePen from Adobe - http://codepen.io/
collection/jabto
An Introduction to CSS Regions - http://dev.opera.com/articles/view/an-
introduction-to-css-regions/
WebPlatform.org CSS Regions - http://docs.webplatform.org/wiki/
tutorials/css-regions
Regions Resources
Friday, 14 February 14
Slide 87
Slide 87 text
W3C Working Draft, 28th May 2013
http://www.w3.org/TR/css3-exclusions/
CSS Exclusions
Friday, 14 February 14
Slide 88
Slide 88 text
Defines the wrap-flow and wrap-through properties.
Allow you to wrap text around elements
that are not floated.
Exclusions
Friday, 14 February 14
Slide 89
Slide 89 text
...
Exclusions
Friday, 14 February 14
Slide 90
Slide 90 text
Positioning the
exclusion can be
done with any
positioning method.
.exclusion {
height: 160px;
width: 200px;
padding: 10px;
position: absolute;
top: 120px;
left: 120px;
}
Exclusions
Friday, 14 February 14
Slide 91
Slide 91 text
The wrap-flow
property makes the
text flow round the
exclusion.
.exclusion {
height: 160px;
width: 200px;
padding: 10px;
position: absolute;
top: 120px;
left: 120px;
wrap-flow:both;
}
Exclusions
Friday, 14 February 14
Slide 92
Slide 92 text
http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/
Friday, 14 February 14
Slide 93
Slide 93 text
Wrap-flow and CSS Exclusions - http://advent2012.digitpaint.nl/21/
Adobe post on separation of the Shapes and Exclusions specs - http://
blogs.adobe.com/webplatform/2013/06/04/how-to-make-a-chocolate-
peanut-butter-cup/
-ms-wrap-flow information on using wrap-flow in IE10 - http://
msdn.microsoft.com/en-us/library/windows/apps/hh767314.aspx
The CSS Exclusions Module - Vanseo Design - http://
www.vanseodesign.com/css/exclusions/
Exclusions Resources
Friday, 14 February 14
Slide 94
Slide 94 text
Level 1 Last Call Working Draft, 3rd December 2013
Level 2 Editor’s Draft, 15th November 2013
http://www.w3.org/TR/css-shapes/
CSS Shapes
Friday, 14 February 14
Slide 95
Slide 95 text
Current level 1 working draft defines shape-outside, and allows shapes only on floats.
The Level 2 editor’s draft reimplements shape-inside.
Wrap content around and inside things
that are not rectangles.
CSS Shapes
Friday, 14 February 14
Slide 96
Slide 96 text
http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html
Friday, 14 February 14
Slide 97
Slide 97 text
Requires elements to be floated.
shape-outside
Shapes Level 1
Friday, 14 February 14
Slide 98
Slide 98 text
The shape-outside
property allows text
to be wrapped
around a shape such
as a circle.
.float {
width: 250px;
height: 250px;
float: left;
shape-outside: circle(50%);
}
CSS Shapes
Friday, 14 February 14
Slide 99
Slide 99 text
http://sarasoueidan.com/blog/css-shapes/
Friday, 14 February 14
Slide 100
Slide 100 text
Flow text inside a custom shape
shape-inside
Shapes Level 2
Friday, 14 February 14
Slide 101
Slide 101 text
http://betravis.github.io/shape-tools/polygon-drawing/
Friday, 14 February 14
Slide 102
Slide 102 text
http://betravis.github.io/shape-tools/polygon-drawing/
Friday, 14 February 14
Slide 103
Slide 103 text
http://sarasoueidan.com/blog/css-shapes/
Friday, 14 February 14
Slide 104
Slide 104 text
http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/
Friday, 14 February 14
Slide 105
Slide 105 text
Adobe Web Platform: Shapes - http://html.adobe.com/webplatform/
layout/shapes/
Experimenting with CSS Exclusions (actually covers Shapes) - http://
blog.digitalbackcountry.com/2012/03/experimenting-with-css-exclusions/
Shapes examples on CodePen from Adobe - http://codepen.io/
collection/qFesk
CSS Shape Tools - http://betravis.github.io/shape-tools
Shapes Resources
Friday, 14 February 14
Slide 106
Slide 106 text
CSS Shapes “Alice in Wonderland” example - http://blogs.adobe.com/
webplatform/2013/10/23/css-shapes-visual-storytelling/
Creating Non-Rectangular Layouts with CSS Shapes - http://
sarasoueidan.com/blog/css-shapes/
CSS Shapes from Images - http://hansmuller-webkit.blogspot.co.uk/
2013/11/css-shapes-from-images.html
Shapes Resources
Friday, 14 February 14
Slide 107
Slide 107 text
While specs are at an early stage your
opinion can change things.
Get involved with
new specs!
http://lists.w3.org/Archives/Public/www-style/
Friday, 14 February 14
Slide 108
Slide 108 text
http://rachelandrew.co.uk/presentations/new-css-layout
@rachelandrew
rachelandrew.co.uk
edgeofmyseat.com
grabaperch.com
Thank you!
Friday, 14 February 14
Slide 109
Slide 109 text
Friday, 14 February 14