Slide 1
Slide 1 text
Digital Pond, April 2013
Rachel Andrew
@rachelandrew
The New CSS
Layout
Thursday, 18 April 13
Slide 2
Slide 2 text
W3C Candidate Recommendation, 12th April 2011
http://www.w3.org/TR/css3-multicol/
Multi-column
Layout
Thursday, 18 April 13
Slide 3
Slide 3 text
http://www.flickr.com/photos/62693815@N03/6277209256/
Thursday, 18 April 13
Slide 4
Slide 4 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
Thursday, 18 April 13
Slide 5
Slide 5 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
Thursday, 18 April 13
Slide 6
Slide 6 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
Thursday, 18 April 13
Slide 7
Slide 7 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
Thursday, 18 April 13
Slide 8
Slide 8 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
Thursday, 18 April 13
Slide 9
Slide 9 text
The column-span
property makes an
element span
columns.
.col-wrapper h1 {
column-span: all;
padding: 0 0 .5em 0;
}
Multi-col
Thursday, 18 April 13
Slide 10
Slide 10 text
http://caniuse.com/#feat=multicolumn
Thursday, 18 April 13
Slide 11
Slide 11 text
Thursday, 18 April 13
Slide 12
Slide 12 text
Images are
constrained by the
columns.
img {
max-width: 100%;
}
Multi-col
Thursday, 18 April 13
Slide 13
Slide 13 text
If a browser does not
support multiple-
column layout it will
display the content
in a single column.
Multi-col
Thursday, 18 April 13
Slide 14
Slide 14 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
Thursday, 18 April 13
Slide 15
Slide 15 text
W3C Candidate Recommendation, 18th September 2012
http://www.w3.org/TR/css3-flexbox/
Flexible Box
Layout Module
Thursday, 18 April 13
Slide 16
Slide 16 text
http://www.flickr.com/photos/megangoodchild/4603320792
Thursday, 18 April 13
Slide 17
Slide 17 text
Navigation marked
up as a list. I want to
space these items
evenly.
Flexbox
Thursday, 18 April 13
Slide 18
Slide 18 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
Thursday, 18 April 13
Slide 19
Slide 19 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
Thursday, 18 April 13
Slide 20
Slide 20 text
The default value of
flex-direction is row.
nav ul{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
Flexbox
Thursday, 18 April 13
Slide 21
Slide 21 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
Thursday, 18 April 13
Slide 22
Slide 22 text
Creating equal
height boxes using
flexbox.
Flexbox
Thursday, 18 April 13
...
...
...
Slide 23
Slide 23 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
Thursday, 18 April 13
Slide 24
Slide 24 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
Thursday, 18 April 13
Slide 25
Slide 25 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
Thursday, 18 April 13
Slide 26
Slide 26 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
Thursday, 18 April 13
Slide 27
Slide 27 text
http://css-tricks.com/old-flexbox-and-new-flexbox/
Thursday, 18 April 13
Slide 28
Slide 28 text
http://caniuse.com/#feat=flexbox
Thursday, 18 April 13
Slide 29
Slide 29 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
Flexbox Resources
Thursday, 18 April 13
Slide 30
Slide 30 text
W3C Working Draft, 4th April 2013
http://www.w3.org/TR/css3-grid-layout/
CSS
Grid Layout
Thursday, 18 April 13
Slide 31
Slide 31 text
http://www.flickr.com/photos/adactio/1799953270
Thursday, 18 April 13
Slide 32
Slide 32 text
Define a grid using
the new grid and
inline-grid values of
the display property.
.wrapper {
display: grid;
}
Grid Layout
Thursday, 18 April 13
Slide 33
Slide 33 text
The grid-definition-
columns property
defines the grid
columns; grid-
definition-rows the
grid rows.
.wrapper {
display: grid;
grid-definition-columns: 200px 20px auto 20px 200px;
grid-definition-rows: auto 1fr;
}
Grid Layout
Thursday, 18 April 13
Slide 34
Slide 34 text
I have declared a
grid on the wrapper
so the children need
to be positioned.
Grid Layout
Thursday, 18 April 13
Slide 35
Slide 35 text
grid-start and grid-
end set the column
position; grid-before
and grid-after the
row.
.content {
grid-start: 3;
grid-end: 4;
grid-before: 2;
grid-after: 3;
}
Grid Layout
Thursday, 18 April 13
Slide 36
Slide 36 text
Columns used as
gutters still count as
a column, when
positioning items.
.mainnav {
grid-start: 1; grid-end:2;
grid-before: 2; grid-after: 3;
}
.title {
grid-start: 3; grid-end: 4;
grid-before: 1; grid-after: 2;
}
.quote {
grid-start: 5; grid-end:6;
grid-before: 2; grid-after: 3;
}
Grid Layout
Thursday, 18 April 13
Slide 37
Slide 37 text
When we place an
item we declare the
grid lines that
contain it.
.content {
grid-start: 3;
grid-end: 4;
grid-before: 2;
grid-after: 3;
}
Grid Layout
Thursday, 18 April 13
Slide 38
Slide 38 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
Thursday, 18 April 13
Slide 39
Slide 39 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;
-ms-grid-row-span: 1;
}
.quote {
-ms-grid-column: 5;
-ms-grid-row: 2;
}
Grid Layout
Thursday, 18 April 13
Slide 40
Slide 40 text
http://codepen.io/rachelandrew/pen/sFhmx
Thursday, 18 April 13
Slide 41
Slide 41 text
http://caniuse.com/#feat=css-grid
Thursday, 18 April 13
Slide 42
Slide 42 text
http://www.w3.org/TR/css3-grid-layout/
Thursday, 18 April 13
Slide 43
Slide 43 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/
Using CSS Grid Layout to build a game - http://www.sitepoint.com/
using-css-grid-layout-and-blend-5-to-build-a-game/
Grid Resources
Thursday, 18 April 13
Slide 44
Slide 44 text
W3C Working Draft, 23rd August 2012
http://www.w3.org/TR/css3-regions/
CSS Regions
Thursday, 18 April 13
Slide 45
Slide 45 text
http://html.adobe.com/webplatform/layout/regions/
Thursday, 18 April 13
Slide 46
Slide 46 text
My content is inside
the article element.
Regions
Thursday, 18 April 13
...
Slide 47
Slide 47 text
The CSS property
flow-into has a value
of the name you
choose for this
content.
.main {
flow-into: article-thread;
}
Regions
Thursday, 18 April 13
Slide 48
Slide 48 text
The property flow-
from sets where this
content thread
should flow from.
.article-regions {
flow-from: article-thread;
}
Regions
Thursday, 18 April 13
Slide 49
Slide 49 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
Thursday, 18 April 13
Slide 50
Slide 50 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
Thursday, 18 April 13
Slide 51
Slide 51 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
Thursday, 18 April 13
Slide 52
Slide 52 text
Regions do not have
to be adjacent.
Regions
Thursday, 18 April 13
Slide 53
Slide 53 text
http://adobe.github.io/web-platform/utilities/css-regions-support-matrix/
Thursday, 18 April 13
Slide 54
Slide 54 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
Regions Resources
Thursday, 18 April 13
Slide 55
Slide 55 text
W3C Working Draft, 3rd May 2012
http://www.w3.org/TR/css3-exclusions/
CSS Exclusions
and Shapes
Thursday, 18 April 13
Slide 56
Slide 56 text
http://html.adobe.com/webplatform/layout/exclusions/
Thursday, 18 April 13
Slide 57
Slide 57 text
...
Exclusions
Thursday, 18 April 13
Slide 58
Slide 58 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
Thursday, 18 April 13
Slide 59
Slide 59 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
Thursday, 18 April 13
Slide 60
Slide 60 text
http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html
Thursday, 18 April 13
Slide 61
Slide 61 text
http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/
Thursday, 18 April 13
Slide 62
Slide 62 text
Experimenting with CSS Exclusions - http://
blog.digitalbackcountry.com/2012/03/experimenting-with-css-exclusions/
Exclusions and Shapes examples on CodePen from Adobe - http://
codepen.io/collection/qFesk
Exclusions Resources
Thursday, 18 April 13
Slide 63
Slide 63 text
http://rachelandrew.co.uk/presentations/new-css-layout
@rachelandrew
rachelandrew.co.uk
edgeofmyseat.com
grabaperch.com
Thank you!
Thursday, 18 April 13