Slide 1
Slide 1 text
CSS3 for
responsive
web design
© Stuff & Nonsense 2014
With your host Andrew Clarke
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Special thanks to
@sarasoueidan
Slide 5
Slide 5 text
Modern layout foundations
Flexible Boxes (Flexbox) and table display properties
Modules and content components
Advanced Flexbox for content and functionality
Responsive typography
Units, columns, shapes and masks
Responsive design details
Border images, filters and blends
Today’s schedule
Slide 6
Slide 6 text
CSS Grid Layout Module
Grid by Example simple usage examples by Rachel Andrew
http://gridbyexample.com
What we won’t cover
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Just kidding
Today’s browser
Slide 13
Slide 13 text
Chrome
Today’s browser
Slide 14
Slide 14 text
Get Chrome ready
Navigate to chrome://flags
Enable Experimental Web Platform features
Restart Chrome
Slide 15
Slide 15 text
Modern layout
foundations
CSS3 for responsive web design
© Stuff & Nonsense 2014
Part one
Slide 16
Slide 16 text
Three ingredients for responsive web design
A flexible grid
Flexible images and media
CSS3 media queries
Slide 17
Slide 17 text
Three ingredients for responsive web design
A flexible grid
Flexible images and media
CSS3 media queries
And a whole lot more
Slide 18
Slide 18 text
Modern layout is about proportions, not pixels
Hecton 1.73205
Golden 1.61803
Hemiolon 1.5
Bipenton 1.458
Diagon 1.41421
Penton 1.27201
Biauron 1.23606
Quadriagon 1.2071
Trion 1.1547
Hermidiagon 1.11803
Source: Gridset
Slide 19
Slide 19 text
Drawbacks of traditional CSS layout
Complicated maths
Vertical centering
Float drops
Float clearing
Same height columns
Shrink-to-fit containers
Source order dependence
Slide 20
Slide 20 text
Vertical centering, solved by Flexbox
Slide 21
Slide 21 text
Float drop and clearing, solved by Flexbox
Slide 22
Slide 22 text
Equal height columns, solved by Flexbox
Slide 23
Slide 23 text
Source order dependence, helped by Flexbox
Slide 24
Slide 24 text
Flexible boxes
Modern layout foundations
© Stuff & Nonsense 2014
Slide 25
Slide 25 text
Advantages of Flexbox
More flexible layouts
Visual content reordering
Column height matching
Flexible Box Layout
Slide 26
Slide 26 text
.container {
display : flex;
// display : inline-flex;
}
Apply flex to a container Flexible Box Layout
Slide 27
Slide 27 text
.container {
display : flex;
flex-direction : row; /* default */
}
// row, row-reverse, column, column-reverse
Set the flex direction Flexible Box Layout
Slide 28
Slide 28 text
Horizontal layout Flexible Box Layout
row
row-reverse
Slide 29
Slide 29 text
Vertical layout Flexible Box Layout
column
column-reverse
Slide 30
Slide 30 text
Main & cross axis Flexible Box Layout
main axis
cross axis
Slide 31
Slide 31 text
.container {
display : flex;
flex-direction : row;
flex-wrap : nowrap; /* default */
}
Rows and columns Flexible Box Layout
Slide 32
Slide 32 text
Wrapping flex items Flexible Box Layout
Slide 33
Slide 33 text
.container {
display : flex;
flex-flow : row nowrap;
}
Rows and columns Flexible Box Layout
Slide 34
Slide 34 text
…
Two-column Flexbox layout Flexible Box Layout
…
…
…
Slide 35
Slide 35 text
.container {
display : flex;
}
[role="banner"], [role="contentinfo"], aside {
/* All children have equal size inside a container */
flex-grow : 1;
/* The default size before any remaining space is distributed */
flex-basis : 100%;
}
Two-column Flexbox layout Flexible Box Layout
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
@media (min-width: 48em) {
.main {
/* Take three times the available space as other siblings */
flex : 3;
/* The default size before any remaining space is distributed */
flex-basis : 1px;
}
aside {
/* Take one unit of available space */
flex : 1;
/* The default size before any remaining space is distributed */
flex-basis : 1px;
}
}
Two-column Flexbox layout Flexible Box Layout
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
.box--one {
flex : 1;
}
.box--two {
flex : 1;
}
.box--three {
flex : 1;
}
Flex-grow Flexible Box Layout
.box {
/* All children have equal size */
flex : 1;
}
Slide 40
Slide 40 text
Flex-grow Flexible Box Layout
1 1 1
The ability for a flex item to grow if necessary and dictates the amount
of available space an item should take.
Slide 41
Slide 41 text
.box--one {
flex : 1;
}
.box--two {
/* Take twice the available space as other siblings */
flex : 2;
}
.box--three {
flex : 1;
}
Flex-grow Flexible Box Layout
Slide 42
Slide 42 text
Flex-grow Flexible Box Layout
1 1
2
The ability for a flex item to grow if necessary and dictates the amount
of available space an item should take.
Slide 43
Slide 43 text
.container {
width : 700px; }
.box--one {
flex-grow : 1;
flex-basis : 200px; /* 33px added */ }
.box--two {
flex-grow : 1;
flex-basis : 200px; /* 33px added */ }
.box--three {
flex-grow : 1;
flex-basis : 200px; /* 33px added */ }
Flex-basis Flexible Box Layout
Slide 44
Slide 44 text
Flex-basis Flexible Box Layout
.container {
width : 700px; }
.box--one {
flex-grow : 1;
flex-basis : 200px; /* 25px added */ }
.box--two {
flex-grow : 2;
flex-basis : 200px; /* 50px added */ }
.box--three {
flex-grow : 1;
flex-basis : 200px; /* 25px added */ }
Slide 45
Slide 45 text
Flex Flexible Box Layout
.container {
width : 700px; }
.box--one {
flex : 1 200px; /* 25px added */ }
.box--two {
flex : 2 200px; /* 50px added */ }
.box--three {
flex : 1 200px; /* 25px added */ }
Slide 46
Slide 46 text
Flex Flexible Box Layout
Slide 47
Slide 47 text
…
Three-column Flexbox layout Flexible Box Layout
…
…
…
…
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
1 2 3
Order Flexible Box Layout
Controls the order in which items appear visually in a flex container.
Slide 50
Slide 50 text
Flex-direction Flexible Box Layout
3 2 1
Right to left in ltr layouts, left to right in rtl layouts.
Slide 51
Slide 51 text
Order Flexible Box Layout
2 1 3
Controls the order in which items appear visually in a flex container.
Slide 52
Slide 52 text
…
Three-column Flexbox layout Flexible Box Layout
…
…
…
…
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
[role="banner"] {
order : 1; }
.main {
order : 3; }
.aside--1 {
order : 2; }
.aside--2 {
order : 4; }
[role="contentinfo"] {
order : 5; }
Three-column Flexbox layout Flexible Box Layout
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
[role="banner"] {
order : 1; }
.main {
order : 4; }
.aside--1 {
order : 3; }
.aside--2 {
order : 2; }
[role="contentinfo"] {
order : 5; }
Three-column Flexbox layout Flexible Box Layout
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
When is Flexbox appropriate?
11
30
27 23
6.1 1
4.4 7.1 1
37
Flexible Box Layout
1 Supported with -webkit- prefix
Slide 62
Slide 62 text
Legacy browser implementations Flexible Box Layout
10
2012 syntax with -ms- prefix
5.1
Old syntax with -webkit- prefix
7
Old syntax with -webkit- prefix
4.4
Old syntax with -webkit- prefix
Slide 63
Slide 63 text
Legacy Flexbox syntax Flexible Box Layout
.container {
display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -webkit-flex;
display : flex;
}
.container {
display : -webkit-flex;
display : flex;
}
Slide 64
Slide 64 text
Legacy Flexbox Sass mixin Flexible Box Layout
@mixin flexbox() {
display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -webkit-flex;
display : flex;
}
@mixin flex($values) {
-webkit-box-flex : $values;
-moz-box-flex : $values;
-webkit-flex : $values;
-ms-flex : $values;
flex : $values;
}
.container {
@include flexbox();
}
.box {
@include flex(1 200px);
}
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
Modernizr Flexbox
Isolate Flexbox compatible and non-compatible files
Modernizr adds flexbox, no-flexbox, and flexboxlegacy classes
.no-flexbox .container {
/* styles */
}
Flexible Box Layout
Slide 67
Slide 67 text
When is Flexbox appropriate? Flexible Box Layout
CSS performance test: Flexbox v CSS Table
http://benfrain.com/css-performance-test-flexbox-v-css-table-fight/
Slide 68
Slide 68 text
Display table
Modern layout foundations
© Stuff & Nonsense 2014
Slide 69
Slide 69 text
…
…
…
…
Navigation first Display table layout
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
…
…
…
…
Content first Display table layout
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
Table properties Display table layout
display : table
Defines element as a block-level table
display : table-caption
Treats element as a caption for the table
(caption-side : top | bottom | inherit)
display : table-row
An element represents a row of cells
display : table-cell
An element represents a table cell
Slide 75
Slide 75 text
Table properties Display table layout
display : table-header-group
A row group always displayed before all other rows
and row groups and after any top captions
display : table-footer-group
A row group always displayed after all other rows and row
groups and after any bottom captions
display : table-row-group
One or more rows of cells
Slide 76
Slide 76 text
table-row
An ‘anonymous’ box created by applying
display:table-row to an element
display : table
An ‘anonymous’ box created by applying
display:table to an element
Slide 77
Slide 77 text
…
…
Content first Display table layout
…
…
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
@media (min-width : 48em) {
.content {
display : table-footer-group; }
[role="navigation"] {
display : table-header-group; }
}
}
Content first Display table layout
Slide 80
Slide 80 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Skip to navigation Display table layout
a[href="#navigation"] {
display : block;
}
@media (min-width : 48em {
a[href="#navigation"] {
display : none; }
}
Slide 84
Slide 84 text
Two-column display-table layout Display table layout
…
…
…
…
Slide 85
Slide 85 text
Two-column display-table layout Display table layout
@media (min-width : 62em {
.content, .aside-1 {
display : table-cell; }
.main { width : 65%; }
.aside-1 { width : 35%; }
}
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
Creating columns Display table layout
@media (min-width : 62em {
.commerce-item {
float : left;
width : 33%; }
}
Slide 89
Slide 89 text
Creating columns Display table layout
Slide 90
Slide 90 text
Creating columns Display table layout
@media (min-width : 62em {
.commerce-item {
display : table-cell;
width : 33%; }
}
Slide 91
Slide 91 text
Creating columns Display table layout
Slide 92
Slide 92 text
Flexbox recap
Modern layout foundations
© Stuff & Nonsense 2014
Slide 93
Slide 93 text
Align-items Flexible Box Layout
cross axis
main axis
flex-start: Items placed on the cross axis start line
Slide 94
Slide 94 text
Align-items Display table layout
.content {
align-items : flex-start;
}
flex-start: Items placed on the cross axis start line
Slide 95
Slide 95 text
Align-items Flexible Box Layout
cross axis
main axis
flex-end: Items placed on the cross axis end line
Slide 96
Slide 96 text
Align-items Display table layout
.content {
align-items : flex-end;
}
flex-end: Items placed on the cross axis end line
Slide 97
Slide 97 text
Align-items Flexible Box Layout
cross axis
main axis
center: items centered in the cross axis
Slide 98
Slide 98 text
Align-items Display table layout
.content {
align-items : center;
}
center: items centered in the cross axis
Slide 99
Slide 99 text
Align-items Flexible Box Layout
cross axis
main axis
stretch (default): items stretch to fill container height
Slide 100
Slide 100 text
Align-items Display table layout
.content {
align-items : stretch; /* default value */
}
stretch (default): items stretch to fill container height
Slide 101
Slide 101 text
Align-items Flexible Box Layout
Starts on baseline Starts on baseline Starts on baseline
cross axis
main axis
baseline: items aligned so that their baselines match
Slide 102
Slide 102 text
Align-items Display table layout
.content {
align-items : baseline;
}
baseline: items aligned so that their baselines match
Slide 103
Slide 103 text
CSS3 for responsive web design
© Stuff & Nonsense 2014
Modules and
components
Part two
Slide 104
Slide 104 text
Additional Flexbox properties Flexible Box Layout
Justify-content
Align-content
Align-self
Slide 105
Slide 105 text
Justify-content Flexible Box Layout
cross axis
flex-start: Items placed on the main axis start line
main axis
Slide 106
Slide 106 text
Justify-content Display table layout
.content {
justify-content : flex-start;
}
flex-start: Items placed on the main axis start line
Slide 107
Slide 107 text
Justify-content Flexible Box Layout
cross axis
flex-end: Items placed on the main axis end line
main axis
Slide 108
Slide 108 text
Justify-content Display table layout
.content {
justify-content : flex-end;
}
flex-end: Items placed on the main axis end line
Slide 109
Slide 109 text
Justify-content Flexible Box Layout
cross axis
center: Items centered in the main axis
main axis
Slide 110
Slide 110 text
Justify-content Display table layout
.content {
justify-content : center;
}
center: Items centered in the main axis
Slide 111
Slide 111 text
Justify-content Flexible Box Layout
space-between: Items distributed in the line; first item on the start line, last on the end
cross axis
main axis
Slide 112
Slide 112 text
Justify-content Display table layout
.content {
justify-content : space-between;
}
space-between: Items distributed in the line; first item on the start line, last on the end
Slide 113
Slide 113 text
Justify-content Flexible Box Layout
main axis
cross axis
space-around: Items distributed in the line with equal space around them
Slide 114
Slide 114 text
Justify-content Display table layout
.content {
justify-content : space-around;
}
space-around: Items distributed in the line with equal space around them
Slide 115
Slide 115 text
Align-content Flexible Box Layout
cross axis
flex-start: lines placed at the start of the container
main axis
Slide 116
Slide 116 text
Align-content Display table layout
.content {
align-content : flex-start;
}
flex-start: lines placed at the start of the container
Slide 117
Slide 117 text
Align-content Flexible Box Layout
cross axis
cross axis
flex-end: lines placed at the end of the container
main axis
Slide 118
Slide 118 text
Align-content Display table layout
.content {
align-content : flex-end;
}
flex-end: lines placed at the end of the container
Slide 119
Slide 119 text
Align-content Flexible Box Layout
cross axis
cross axis
center: lines placed at the center of the container
main axis
Slide 120
Slide 120 text
Align-content Display table layout
.content {
align-content : center;
}
center: lines placed at the center of the container
Slide 121
Slide 121 text
Align-content Flexible Box Layout
cross axis
cross axis
stretch (default): lines stretch to fill container height
main axis
Slide 122
Slide 122 text
Align-content Display table layout
.content {
align-content : stretch; /* default value */
}
stretch (default): lines stretch to fill container height
Slide 123
Slide 123 text
Align-content Flexible Box Layout
cross axis
cross axis
space-between: Lines distributed in the container; first item on the start line, last on the end
main axis
Slide 124
Slide 124 text
Align-content Display table layout
.content {
align-content : space-between;
}
space-between: Lines distributed in the container; first item on the start line, last on the end
Slide 125
Slide 125 text
Align-content Flexible Box Layout
cross axis
cross axis
main axis
space-around: Lines distributed in the container with equal space around them
Slide 126
Slide 126 text
Align-content Display table layout
.content {
align-content : space-around;
}
space-around: Lines distributed in the container with equal space around them
Slide 127
Slide 127 text
Align-self Flexible Box Layout
cross axis
cross axis
main axis
align-self: Overrides for individual flex items
Slide 128
Slide 128 text
Align-items Display table layout
.content {
/* auto | flex-start | flex-end | center | baseline | stretch */
align-self : flex-end;
}
align-self: Overrides for individual flex items
Slide 129
Slide 129 text
Media modules
Modules and components
© Stuff & Nonsense 2014
Slide 130
Slide 130 text
Media modules Modules and components
Slide 131
Slide 131 text
Media modules Modules and components
…
Slide 132
Slide 132 text
Media modules Modules and components
.flex-media {
display : flex; }
.flex-media__figure {
margin-right : 22px; }
.flex-media__content {
flex : 1; }
Slide 133
Slide 133 text
Media modules Modules and components
.flex-media {
display : flex; }
.flex-media__figure {
margin-right : 22px; }
.flex-media__content {
flex : 1; }
Use the Web Inspector to add: .media--reverse, .media--center and .media--bottom to .flex-media
Slide 134
Slide 134 text
Media modules Modules and components
Slide 135
Slide 135 text
Store items
Modules and components
© Stuff & Nonsense 2014
Slide 136
Slide 136 text
Store items Modules and components
Slide 137
Slide 137 text
Store items Modules and components
…
…
Slide 138
Slide 138 text
Store items Modules and components
.flex-commerce-media-items {
display : flex; }
.commerce-media-item {
flex : 1; }
Slide 139
Slide 139 text
Store items Modules and components
Slide 140
Slide 140 text
Store items Modules and components
…
…
Slide 141
Slide 141 text
Store items Modules and components
.flex-commerce-media-items {
display : flex; }
.commerce-media-item {
flex : 1; }
Use the Web Inspector to add: .media--reverse, .media--center and .media--bottom to .flex-media
Slide 142
Slide 142 text
Store items Modules and components
Slide 143
Slide 143 text
Store items Modules and components
.flex-self-alt {
align-self : flex-end; }
Slide 144
Slide 144 text
Store items Modules and components
Use the Web Inspector to add
align-items : flex-end; to the flex-media__figure element
Slide 145
Slide 145 text
Pinning buttons
Modules and components
© Stuff & Nonsense 2014
Slide 146
Slide 146 text
Pinning buttons Modules and components
Slide 147
Slide 147 text
Pinning buttons Modules and components
…
…
…
Slide 149
Slide 149 text
Pinning buttons Modules and components
.flex-commerce-media-items {
display : flex;
flex-wrap : wrap; }
.commerce-media-item {
flex : 1; }
.flex-media__content {
display : flex;
flex-direction : column; }
.item__button {
margin-top : auto; }
Slide 150
Slide 150 text
Pinning buttons Modules and components
Slide 151
Slide 151 text
Figures & captions
Modules and components
© Stuff & Nonsense 2014
Slide 152
Slide 152 text
Figures and captions Modules and components
Slide 153
Slide 153 text
Figures and captions Modules and components
<figure class="flex-figure">
<figcaption>…figcaption>
figure>
<figcaption>…figcaption>
figure>
Slide 154
Slide 154 text
Figures and captions Modules and components
@media (min-width : 64em) {
.flex-figure { display : flex; }
.flex-figure img { flex : 2 0 320px; }
.flex-figure figcaption { flex : 1; }
}
Use the Web Inspector to add: .figure--reverse, .figure--center,
.figure--bottom and figure--alt to .flex-figure
Slide 155
Slide 155 text
Use the Web Inspector to add: .figure--reverse, .figure--center,
.figure--bottom and figure--alt to .flex-figure
Figures and captions Modules and components
Slide 156
Slide 156 text
Superhero
Modules and components
© Stuff & Nonsense 2014
Slide 157
Slide 157 text
No content
Slide 159
Slide 159 text
Superhero Modules and components
@media (min-width : 37.5em) {
.flex-hero {
display : flex;
align-items : center;
justify-content : center;
height : auto;
min-height : 24em; }
}
Use the Web Inspector to add: .hero--top and .hero--bottom to .flex-hero
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
Use the Web Inspector to add: .hero--top and .hero--bottom to .flex-hero
Slide 162
Slide 162 text
Use the Web Inspector to add: .hero--top and .hero--bottom to .flex-hero
Slide 163
Slide 163 text
Centered banner
Modules and components
© Stuff & Nonsense 2014
Slide 164
Slide 164 text
No content
Slide 165
Slide 165 text
Centered banner Modules and components
- …
Slide 166
Slide 166 text
Centered banner Modules and components
.banner__logo {
text-align : center; }
@media (min-width : 37.5em) {
.banner__list {
display : flex;
justify-content : space-between;
}
}
Slide 167
Slide 167 text
Centered banner Modules and components
@media (min-width : 48em) {
.banner__list {
transform : translateY(-130px);
}
#link-one { margin-right : 22px; }
#link-three { margin-left : auto; }
#link-four { margin-left : 22px; }
}
Slide 168
Slide 168 text
No content
Slide 169
Slide 169 text
No content
Slide 170
Slide 170 text
Flexbox pagination
Modules and components
© Stuff & Nonsense 2014
Slide 171
Slide 171 text
Medium screens without Flexbox
Medium screens display : flex;
Flexbox pagination Modules and components
Slide 172
Slide 172 text
No content
Slide 174
Slide 174 text
Flexbox pagination Modules and components
.flex-pagination {
display : flex;
flex-wrap : wrap;
justify-content : space-between;
}
.flex-pagination li {
order : 2;
display : inline-block;
}
Slide 175
Slide 175 text
Flexbox pagination Modules and components
.flex-pagination li:first-child {
order : 0;
width : 50%;
text-align : left; }
.flex-pagination li:last-child {
order : 1;
width : 50%;
text-align : right; }
Slide 176
Slide 176 text
Medium screens without Flexbox
Medium screens display : flex;
Large screens display : flex;
Flexbox pagination Modules and components
Slide 177
Slide 177 text
Flexbox pagination Modules and components
@media (min-width : 48em) {
.flex-pagination li { order : 0; }
.flex-pagination li:first-child {
order : 0;
width : auto;
text-align : center; }
.flex-pagination li:last-child {
order : 0;
width : auto;
text-align : center; }
}
Slide 178
Slide 178 text
Flexible forms
Modules and components
© Stuff & Nonsense 2014
Slide 179
Slide 179 text
Flexible forms Modules and components
Slide 181
Slide 181 text
Flexible forms Modules and components
www
.com
.co.uk
.uk
Slide 182
Slide 182 text
Flexible forms Modules and components
.flex-form {
display : flex;
flex-wrap : wrap;
justify-content : space-between;
}
.flex-form__input {
flex : 1;
}
Slide 183
Slide 183 text
Flexible forms Modules and components
Slide 184
Slide 184 text
Flexible forms Modules and components
Slide 185
Slide 185 text
Flexible forms Modules and components
A long label that keeps expanding
Search
Slide 186
Slide 186 text
Flexible forms Modules and components
.flex-form-stretch {
display : flex; }
.flex-form-stretch input {
flex : 1; }
Slide 187
Slide 187 text
Example showing stretch flexbox forms variations
Slide 188
Slide 188 text
CSS3 for responsive web design
© Stuff & Nonsense 2014
Responsive
typography
Part three
Slide 189
Slide 189 text
vw
Equal to 1% of the width of the viewport
vh
Equal to 1% of the height of the viewport
vmin
Equal to either vw or vh, whichever is smaller
vmax
Opposite behaviour to vmin
Viewport width units Responsive typography
Slide 190
Slide 190 text
Viewport width units Responsive typography
h1 {
font-size : 32px;
font-size : 3.2rem;
font-size : 5.4vw;
}
Slide 191
Slide 191 text
Sticky Flexbox footer
Responsive typography
© Stuff & Nonsense 2014
Slide 192
Slide 192 text
No content
Slide 193
Slide 193 text
…
…
Sticky footer
Slide 194
Slide 194 text
Sticky footer
.layout-full {
display : flex;
min-height : 100vh;
flex-direction : column;
}
.layout-full .container {
flex : 1; }
Slide 195
Slide 195 text
Multiple column layout
Responsive typography
© Stuff & Nonsense 2014
Slide 196
Slide 196 text
Multiple column layout support
10
31 2
32 1
24 1
5.1 1
2.3 1
7.1 1
37 1
Multiple column layout
1 Supported with -webkit- prefix
2 Supported with -moz- prefix
Slide 197
Slide 197 text
CSS column advantages Multiple column layout
Improves readability
Manages the measure
Reduces purely presentational markup
Slide 198
Slide 198 text
No content
Slide 199
Slide 199 text
No content
Slide 200
Slide 200 text
No content
Slide 201
Slide 201 text
Presentational HTML
Multiple column layout
…
…
Slide 202
Slide 202 text
Column properties
Column count
Column width
Column span
Break after
Column gap
Column rule
Break before
Multiple column layout
Slide 203
Slide 203 text
Meaningful markup
<figure>...figure>
Multiple column layout
...
Slide 204
Slide 204 text
Column width
@media (min-width : 48em) {
.content-cols {
-webkit-column-width : 24em;
-moz-column-width : 24em;
column-width : 24em;
}
}
Multiple column layout
Slide 205
Slide 205 text
Column count
@media (min-width : 48em) {
.content-cols {
-webkit-column-count : 2;
-moz-column-count : 2;
column-count : 2;
}
}
Multiple column layout
Slide 206
Slide 206 text
Columns
@media (min-width : 48em) {
.content-cols {
-webkit-columns : 2 24em;
-moz-columns : 2 24em;
columns : 2 24em;
}
}
Multiple column layout
Slide 207
Slide 207 text
No content
Slide 208
Slide 208 text
Column gap
@media (min-width : 48em) {
.content-cols {
-webkit-column-gap : 44px;
-moz-column-gap : 44px;
column-gap : 44px;
}
}
Multiple column layout
Slide 209
Slide 209 text
Column rule
@media (min-width : 48em) {
.content-cols {
column-rule-width : 3px;
column-rule-style : double;
column-rule-color : #e3e2e0;
}
}
-moz- and -webkit- prefixes are also required
Multiple column layout
Slide 210
Slide 210 text
No content
Slide 211
Slide 211 text
Columnised lists
@media (min-width : 37.5em) {
.sidebar ul {
column-count : 2;
column-gap : 48px; }
}
@media (min-width : 48em) {
.sidebar ul {
column-count : 1; }
}
Multiple column layout
Slide 212
Slide 212 text
No content
Slide 213
Slide 213 text
No content
Slide 214
Slide 214 text
No content
Slide 215
Slide 215 text
No content
Slide 216
Slide 216 text
Columnised captions
@media (min-width : 37.5em) {
.cols-figure figcaption {
column-count : 2;
column-gap : 44px; }
}
Multiple column layout
Slide 217
Slide 217 text
Spanning columns
Multiple column layout
Column-span is not supported in Firefox
...
<figure class="column__span" >...figure>...
Ape-o-nauts?
...Slide 218
Slide 218 text
Spanning columns
@media (min-width : 64em) {
.cols__span {
column-span : all; }
}
Multiple column layout
Slide 219
Slide 219 text
No content
Slide 220
Slide 220 text
No content
Slide 221
Slide 221 text
No content
Slide 222
Slide 222 text
No content
Slide 223
Slide 223 text
Spanning breaks
.columns h2 {
break-before : column;
break-after : avoid-column;
}
Multiple column layout
Slide 224
Slide 224 text
CSS shapes
Responsive typography
© Stuff & Nonsense 2014
Slide 225
Slide 225 text
1 Supported with -webkit- prefix
CSS shapes Responsive design details
37 24
7.1 1
8
37
Slide 226
Slide 226 text
.shapes__circle {
/* Content will wrap around a shape */
shape-outside : circle ( );
}
CSS shapes Responsive design details
.shapes__circle {
/* Content contained within a shape. May not be implemented */
shape-inside : circle ( );
}
Slide 227
Slide 227 text
CSS shapes Responsive design details
circle ()
ellipse ()
inset ()
polygon ()
Each shape is defined by a set of points.
Slide 228
Slide 228 text
Conditions for use Responsive design details
Floated left or right
A shapes element must be floated to enable content
to wrap around it.
Intrinsic size
Intrinsic size (height and width dimensions) needed to establish a
coordinate system on the element; the system will be used to
position the shape functions’ points on the element.
The intrinsic size doesn’t have to be set using absolute values (e.g
pixels), you can use percentages, which means that the shaped
element can be fully responsive.
Slide 229
Slide 229 text
.shapes__circle {
float : left;
height : 200px;
width : 200px;
shape-outside : circle ( );
}
CSS shapes Responsive design details
Slide 230
Slide 230 text
No content
Slide 231
Slide 231 text
. shapes__circle {
float : left;
height : 200px;
width : 200px;
shape-outside : circle ( );
shape-margin : 22px;
}
CSS shapes Responsive design details
The content-box and padding-box keywords are optional
Slide 232
Slide 232 text
. shapes__ellipse {
float : left;
height : 250px;
width : 200px;
shape-outside : ellipse ( );
}
CSS shapes Responsive design details
Slide 233
Slide 233 text
No content
Slide 234
Slide 234 text
Responsive design details
Inset shape
. shapes__inset {
float : left;
height : 200px;
width : 300px;
shape-outside : inset ( );
}
Slide 235
Slide 235 text
No content
Slide 236
Slide 236 text
Responsive design details
Polygon shape
. shapes__polygon {
float : left;
height : 200px;
width : 250px;
background : url(polygon.png) 100% 100%;
clip-path: polygon(99.67px -3.00px, 117.08px 19.87px,…);
shape-outside: polygon(99.67px -3.00px, 117.08px 19.87px…); }
}
Slide 237
Slide 237 text
No content
Slide 238
Slide 238 text
1 Supported with -webkit- prefix
Clip path property Responsive design details
31
31 1
24 1
7 1
4.4 1
7.1 1
38 1
Slide 239
Slide 239 text
Responsive design details
Image shape
Browser uses the alpha channel of an image to extract a
shape.
Shape is computed to be the path that encloses the area
where the opacity of the specified image is greater than the
‘shape-image-threshold’ value.
When shape-image-threshold is not specified, the initial value
to be considered is 0.5.
Slide 240
Slide 240 text
Responsive design details
Image shape
An image should be CORS (Cross-Origin Resource Sharing.)
Image has to be an image with an alpha channel, not a
luminance channel. Luminance masks/images won’t be used
and will have no effect
Slide 241
Slide 241 text
Responsive design details
Image shape
Slide 242
Slide 242 text
Responsive design details
Image shape
. shapes__img {
float : left;
height : 200px;
width : 250px;
background : url(ship.png);
shape-outside : url(ship-mask.png);
shape-image-threshold : .5; }
}
Slide 243
Slide 243 text
No content
Slide 244
Slide 244 text
No content
Slide 245
Slide 245 text
No content
Slide 246
Slide 246 text
No content
Slide 247
Slide 247 text
Responsive images
Responsive typography
© Stuff & Nonsense 2014
Slide 248
Slide 248 text
Image set Responsive images
.banner__logo {
background-image : url(assets/banner__logo.png);
background-image :
-webkit-image-set (url(banner__logo.png) 1x,
url([email protected]) 2x);
}
Slide 249
Slide 249 text
Source set attribute
Responsive images
Responsive images
Slide 250
Slide 250 text
Sizes attribute
Responsive images
Responsive images
Slide 251
Slide 251 text
Resolution switching
Responsive images
Responsive images
Slide 252
Slide 252 text
32 1
34 24
7.1
8
37
1 Not enabled by default but can be enabled in about:config
Source set Responsive images
Slide 253
Slide 253 text
No content
Slide 254
Slide 254 text
CSS3 for responsive web design
© Stuff & Nonsense 2014
Responsive
design details
Part four
Slide 255
Slide 255 text
Border images
Responsive design details
© Stuff & Nonsense 2014
Slide 256
Slide 256 text
1 Supported with -webkit- prefix
Border images Responsive design details
11
31
31 24
5.1 1
6.1
2.3 1
4.4 7.1
37
Slide 257
Slide 257 text
No content
Slide 258
Slide 258 text
No content
Slide 259
Slide 259 text
93px
76px
2kb png image
Slide 260
Slide 260 text
No content
Slide 261
Slide 261 text
33px
43px
33px
43px
Slide 262
Slide 262 text
1 2 3
7 8 9
4 6
?
Slide 263
Slide 263 text
Border images Responsive design details
.hero__image {
border-image-slice : 33 43 33 43;
border-image-source : url(hero__image.png); }
.hero__image {
border-image : url(hero__image.png) 33 43 33 43; }
.hero__image {
border-image : url(hero__image.png) 33 43;
border-width : 33px 43px; }
Slide 264
Slide 264 text
No content
Slide 265
Slide 265 text
?
?
?
?
Slide 266
Slide 266 text
No content
Slide 267
Slide 267 text
Border images Responsive design details
.html {
border-image-repeat :
repeat /* top */
repeat /* right */
repeat /* bottom */
repeat /* left */
;}
Slide 268
Slide 268 text
Stretch
Stretches slice areas to fill horizontally or vertically
Repeat
Repeats slice areas to fill horizontally or vertically
Round
Resizes a slice so that only whole pieces fit when repeating
Space
Repeats whole slice pieces and adds space to fill a border evenly
Border images Responsive design details
Slide 269
Slide 269 text
Border images Responsive design details
border-width : 33px; border-width : 66px; border-width : 99px;
Slide 270
Slide 270 text
Background blends
Responsive design details
© Stuff & Nonsense 2014
Slide 271
Slide 271 text
Background blends Responsive design details
35 24
7.1
8
37 31
Slide 272
Slide 272 text
color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
saturation
soft-light
screen
Background blends Responsive design details
Slide 273
Slide 273 text
Background blends Responsive design details
Mix blend mode
Specifies how an element will mix its colors with those
of others it overlaps in the ‘background.’
Mixing and the isolation property
Background blend mode
Specifies how an element will mix the colour of its own
background image and background color.
Slide 274
Slide 274 text
Mix blend mode Responsive design details
mix-blend-mode : normal
Slide 275
Slide 275 text
.flex-media__figure {
mix-blend-mode : normal;
}
Mix blend mode Responsive design details
Slide 276
Slide 276 text
Mix blend mode Responsive design details
normal color color-dodge
color-burn
difference exclusion hard-light hue
Slide 277
Slide 277 text
Mix blend mode Responsive design details
normal color lighten luminosity
multiply overlay saturation screen
Slide 278
Slide 278 text
.hero {
background-color : #fbd996;
mix-blend-mode : difference;
}
Mix blend mode Responsive design details
Slide 279
Slide 279 text
No content
Slide 280
Slide 280 text
.hero {
position : relative;
}
.hero:before {
content : "";
position : absolute;
top : 0; right : 0;
bottom : 0; left : 0;
background-color : #fbd996;
mix-blend-mode: difference;
}
Mix blend mode Responsive design details
Slide 281
Slide 281 text
No content
Slide 282
Slide 282 text
.hero__lead {
mix-blend-mode : exclusion;
}
.hero__action {
mix-blend-mode : hard-light;
}
Background blend mode Responsive design details
Slide 283
Slide 283 text
.hero__inner {
isolation : isolate;
}
Background blend mode Responsive design details
Slide 284
Slide 284 text
Use the Web Inspector to change the mix-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 285
Slide 285 text
.blend {
background-color : #396d7f;
background-image :
url(bg-waves-front.png),
url(bg-ship.png),
url(bg-waves-back.png),
url(bg-sky.png);
background-blend-mode : difference;
}
Background blend mode Responsive design details
Slide 286
Slide 286 text
Use the Web Inspector to change the background-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 287
Slide 287 text
normal
Use the Web Inspector to change the background-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 288
Slide 288 text
Use the Web Inspector to change the background-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 289
Slide 289 text
Use the Web Inspector to change the background-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 290
Slide 290 text
color-burn
Use the Web Inspector to change the background-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 291
Slide 291 text
Use the Web Inspector to change the background-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 292
Slide 292 text
Use the Web Inspector to change the background-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 293
Slide 293 text
.blend {
background-color : #396d7f;
background-image :
url(bg-waves-front.png),
url(bg-ship.png),
url(bg-waves-back.png),
url(bg-sky.png);
background-blend-mode : difference;
}
Background blend mode Responsive design details
Slide 294
Slide 294 text
.blend {
background-blend-mode :
normal, normal, normal, luminosity;
}
Background blend mode Responsive design details
Slide 295
Slide 295 text
Use the Web Inspector to change the background-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 296
Slide 296 text
.blend {
background-image :
url(bg-waves-front.png),
url(bg-ship.png),
url(bg-waves-back.png),
-webkit-linear-gradient(…),
url(bg-sky.png);
…
}
Background blend mode Responsive design details
Slide 297
Slide 297 text
.blend {
background-position :
5% 200px,
100% 20px,
2% 140px,
0px 0px,
100% -200px;
}
Background blend mode Responsive design details
Slide 298
Slide 298 text
.blend {
background-repeat :
no-repeat,
no-repeat,
no-repeat,
repeat-x,
no-repeat;
}
Background blend mode Responsive design details
Slide 299
Slide 299 text
.blend {
background-blend-mode :
normal,
normal,
normal,
normal,
color-dodge,
screen;
}
Background blend mode Responsive design details
Slide 300
Slide 300 text
Use the Web Inspector to change the background-blend-mode property:
color
color-burn
color-dodge
darken
saturation
soft-light
screen
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
Slide 301
Slide 301 text
No content
Slide 302
Slide 302 text
No content
Slide 303
Slide 303 text
No content
Slide 304
Slide 304 text
Filter effects
Responsive design details
© Stuff & Nonsense 2014
Slide 305
Slide 305 text
Filter effects support
31 1
24 1
6.1 1
4.4 1
7.1 1
371
Responsive design details
1 Supported with -webkit- prefix
2 Support from Firefox 35 (January 2015)
35 2
Slide 306
Slide 306 text
Filter properties Responsive design details
Blur
Drop-shadow
Opacity
Brightness
Contrast
Hue-rotate
Invert
Saturate
Grayscale
Sepia
Slide 307
Slide 307 text
No content
Slide 308
Slide 308 text
.donthatetimvandamme {
-webkit-filter : blur(5px);
filter : blur(5px); }
Slide 309
Slide 309 text
.donthatetimvandamme {
-webkit-filter : opacity(.5);
filter : opacity(.5); * }
Slide 310
Slide 310 text
.donthatetimvandamme {
-webkit-filter : brightness(150%);
filter : brightness(150%); * }
Slide 311
Slide 311 text
brightness(0); brightness(25%); brightness(50%);
Unfiltered — 100% brightness(150%); brightness(200%);
Slide 312
Slide 312 text
.donthatetimvandamme {
-webkit-filter : contrast(150%);
filter : contrast(150%); * }
Slide 313
Slide 313 text
contrast(0); contrast(25%); contrast(50%);
Unfiltered — 100% contrast(200%); contrast(800%);
Slide 314
Slide 314 text
.donthatetimvandamme {
-webkit-filter : hue-rotate(90deg);
filter : hue-rotate(90deg); * }
Slide 315
Slide 315 text
Unfiltered — 0deg hue-rotate(45deg); hue-rotate(90deg);
hue-rotate(180deg); hue-rotate(270deg); hue-rotate(360deg);
Slide 316
Slide 316 text
.donthatetimvandamme {
-webkit-filter : invert(100%);
filter : invert(100%); * }
Slide 317
Slide 317 text
Unfiltered — 0 invert(25%)
invert(50%) invert(75%) invert(100%)
Slide 318
Slide 318 text
.donthatetimvandamme {
-webkit-filter : saturate(50%);
filter : saturate(50%); * }
Slide 319
Slide 319 text
Unfiltered — 0 saturate(25%); saturate(50%);
saturate(200%); saturate(400%); saturate(800%);
Slide 320
Slide 320 text
.donthatetimvandamme {
-webkit-filter : grayscale(100%);
filter : grayscale(100%); * }
Slide 321
Slide 321 text
Unfiltered — 0 greyscale(25%)
greyscale(50%) greyscale(75%) greyscale(100%)
Slide 322
Slide 322 text
.donthatetimvandamme {
-webkit-filter : sepia(100%);
filter : sepia(100%); * }
Slide 323
Slide 323 text
Unfiltered — 0 sepia(25%)
sepia(50%) sepia(75%) sepia(100%)
Slide 324
Slide 324 text
Combining filters Responsive design details
.donthatetimvandamme {
-webkit-filter :
contrast(1.5)
drop-shadow(20px 20px 20px black);
filter :
contrast(1.5)
drop-shadow(20px 20px 20px black); }
Slide 325
Slide 325 text
drop-shadow
box-shadow
original
Slide 326
Slide 326 text
No content
Slide 327
Slide 327 text
No content
Slide 328
Slide 328 text
No content
Slide 329
Slide 329 text
CSS3 for
responsive
web design
© Stuff & Nonsense 2014
Slide 330
Slide 330 text
Anything we missed?
Slide 331
Slide 331 text
Thank you
Slide 332
Slide 332 text
@malarkey
Slide 333
Slide 333 text
No content
Slide 334
Slide 334 text
CSS3 for responsive web design
© Stuff & Nonsense 2014
Some more things
Bonus
Slide 335
Slide 335 text
Transforms
Some more things
© Stuff & Nonsense 2014
Slide 336
Slide 336 text
Transform support
9
31
31 1
36 24
5.1 1
2.3 1
7.1 1
37
Some more things
1 Supported with -webkit- prefix
Slide 337
Slide 337 text
Scale
Stretches slice areas to fill horizontally or vertically
Translate
Moves an element horizontally and vertically
Rotate
Rotates an element
Skew
Distorts an element horizontally and vertically
Transforms Some more things
Slide 338
Slide 338 text
No content
Slide 339
Slide 339 text
.donthatetimvandamme {
transform : scaleX(1.5); }
Slide 340
Slide 340 text
.donthatetimvandamme {
transform : scaleY(1.5); }
Slide 341
Slide 341 text
.donthatetimvandamme {
transform : scale(1.5); }
Slide 342
Slide 342 text
.donthatetimvandamme {
transform : scale(.5); }
Slide 343
Slide 343 text
.donthatetimvandamme {
transform : translateX(50px); }
Slide 344
Slide 344 text
.donthatetimvandamme {
transform : translateY(50px); }
Slide 345
Slide 345 text
.donthatetimvandamme {
transform : translateX(50%); }
Slide 346
Slide 346 text
.donthatetimvandamme {
transform : translateY(-50%); }
Slide 347
Slide 347 text
.donthatetimvandamme {
transform : translate(50px -50px); }
Slide 348
Slide 348 text
.donthatetimvandamme {
transform : rotate(90deg); }
Slide 349
Slide 349 text
.donthatetimvandamme {
transform : rotate(-90deg); }
Slide 350
Slide 350 text
‘Escape from the Planet of the Apes’, is a 1971 science fiction film starring
Roddy McDowall, Kim Hunter and Ricardo Montalbán. It’s the third of five
films in the original Planet of the Apes series. The film was well
received, getting the best reviews of the four Planet of the Apes
sequels. Despite ‘Beneath the Planet of the Apes’ ending in
it prevented the series from moving on, 20th Century
Fox wanted a sequel, so producer Arthur P. Jacobs
sent screenwriter Paul Dehn a telegram that
read “Apes exist, Sequel required.”
Production was rushed due to its low
budget and was filmed in only
six weeks. ‘Escape from the
Planet of the Apes’ begins by
establishing that three apes;
Cornelius, Zira and Dr. Milo, escaped
Earth’s destruction by salvaging and
repairing the astronaut Taylor’s spaceship.
Slide 351
Slide 351 text
‘Escape from the Planet of the Apes’, is a 1971 science fiction film
starringRoddy McDowall, Kim Hunter and Ricardo Montalbán. It’s the third of
five films in the original Planet of the Apes series. The film was well received,
getting the best reviews of the four Planet of the Apes sequels. Despite
‘Beneath the Planet of the Apes’ ending in it prevented the series from moving
on, 20th Century Fox wanted a sequel, so producer Arthur P. Jacobs sent
screenwriter Paul Dehn a telegram that read “Apes exist, Sequel required.”
Production was rushed due to its low budget and was filmed in only six weeks.
‘Escape from the Planet of the Apes’ begins by establishing that three apes;
Cornelius, Zira and Dr. Milo, escaped Earth’s destruction by salvaging and
repairing the astronaut Taylor’s spaceship.
Slide 352
Slide 352 text
.donthatetimvandamme {
transform : scale(1.5)
translate(50px -50px)
rotate(-90deg) }
Slide 353
Slide 353 text
.donthatetimvandamme {
transform-origin : 0 0; * }
Slide 354
Slide 354 text
.donthatetimvandamme {
transform-origin : 50% 0; * }
Slide 355
Slide 355 text
.donthatetimvandamme {
transform-origin : 100% 0; * }
Slide 356
Slide 356 text
.donthatetimvandamme {
transform-origin : 0 100%; * }
Slide 357
Slide 357 text
.donthatetimvandamme {
transform-origin : 100% 100%; * }
Slide 358
Slide 358 text
Transitions
Some more things
© Stuff & Nonsense 2014
Slide 359
Slide 359 text
Transition support
10
31
32 24
5.1 1
6.1
2.3 1
4.4 7.1
37
Some more things
1 Supported with -webkit- prefix
Slide 360
Slide 360 text
Transition property Some more things
.donthatetimvandamme {
transition-property : opacity; }
Slide 361
Slide 361 text
Backgrounds
Borders
Colours
Dimensions
Fonts
Opacity
Positions
Transforms
Transition properties Some more things
Slide 362
Slide 362 text
Transition property Some more things
.donthatetimvandamme {
transition-property : opacity, color; }
.donthatetimvandamme {
transition-property : all; }
Slide 363
Slide 363 text
Transition duration Some more things
.donthatetimvandamme {
transition-duration : .15s; }
Slide 364
Slide 364 text
Transition delay Some more things
.donthatetimvandamme {
transition-delay : .1s; }
Slide 365
Slide 365 text
Transition timing Some more things
.donthatetimvandamme {
transition-timing-function : linear; }
Slide 366
Slide 366 text
Transition timing Some more things
ease (default)
Slide 367
Slide 367 text
Transition timing Some more things
linear
Slide 368
Slide 368 text
Transition timing Some more things
ease-in
Slide 369
Slide 369 text
Transition timing Some more things
ease-out
Slide 370
Slide 370 text
Transition timing Some more things
ease-in-out
Slide 371
Slide 371 text
Transition shorthand Some more things
.donthatetimvandamme {
transition : opacity .15s .1s linear; }
Slide 372
Slide 372 text
No content