CSS3 for Responsive Web Design (full day workshop) 2015

433acaea1012b25d97ae66da9b998dad?s=47 Andy Clarke
March 18, 2015

CSS3 for Responsive Web Design (full day workshop) 2015

This workshop’s not all talk as you’ll work with practical, everyday examples of responsive Web designs and see them working across a range of devices from mobile phones to desktops and everything in between. You’ll walk away with a full set of resources and example files too.

In just one day, Andy will teach you how to:

- Use table display properties to rearrange content
- Create cross-browser layouts using Flexible Box Layout (Flexbox)
- Improve typography with Multi-column Layout
- Make the most of tiny bitmaps with border images
- Use transformations and transitions

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

March 18, 2015
Tweet

Transcript

  1. CSS3 for responsive web design © Stuff & Nonsense 2014

    With your host Andrew Clarke
  2. None
  3. None
  4. Special thanks to @sarasoueidan

  5. 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
  6. CSS Grid Layout Module
 Grid by Example simple usage examples

    by Rachel Andrew http://gridbyexample.com What we won’t cover
  7. None
  8. None
  9. None
  10. None
  11. None
  12. Just kidding Today’s browser

  13. Chrome Today’s browser

  14. Get Chrome ready Navigate to chrome://flags Enable Experimental Web Platform

    features Restart Chrome
  15. Modern layout foundations CSS3 for responsive web design © Stuff

    & Nonsense 2014 Part one
  16. Three ingredients for responsive web design A flexible grid Flexible

    images and media CSS3 media queries
  17. Three ingredients for responsive web design A flexible grid Flexible

    images and media CSS3 media queries And a whole lot more
  18. 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
  19. Drawbacks of traditional CSS layout Complicated maths Vertical centering Float

    drops Float clearing Same height columns Shrink-to-fit containers Source order dependence
  20. Vertical centering, solved by Flexbox

  21. Float drop and clearing, solved by Flexbox

  22. Equal height columns, solved by Flexbox

  23. Source order dependence, helped by Flexbox

  24. Flexible boxes Modern layout foundations © Stuff & Nonsense 2014

  25. Advantages of Flexbox More flexible layouts Visual content reordering Column

    height matching Flexible Box Layout
  26. .container { display : flex; // display : inline-flex; }

    Apply flex to a container Flexible Box Layout
  27. .container { display : flex; flex-direction : row; /* default

    */ } // row, row-reverse, column, column-reverse Set the flex direction Flexible Box Layout
  28. Horizontal layout Flexible Box Layout row row-reverse

  29. Vertical layout Flexible Box Layout column column-reverse

  30. Main & cross axis Flexible Box Layout main axis cross

    axis
  31. .container { display : flex; flex-direction : row; flex-wrap :

    nowrap; /* default */ } Rows and columns Flexible Box Layout
  32. Wrapping flex items Flexible Box Layout

  33. .container { display : flex; flex-flow : row nowrap; }

    Rows and columns Flexible Box Layout
  34. <body class="layout-flex-2col"> <div class="container"> <header role="banner" class="flex-banner">…<header> <div class="main">…</div> <aside

    class="aside—1">…</aside> <footer role="contentinfo">…</footer> 
 </div> </body> Two-column Flexbox layout Flexible Box Layout
  35. .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
  36. None
  37. @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
  38. None
  39. .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; 
 }
  40. 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.
  41. .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
  42. 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.
  43. .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
  44. 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 */ }
  45. 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 */ }
  46. Flex Flexible Box Layout

  47. <body class="layout-flex-3col"> <div class="container"> <header role="banner" class="flex-banner">…</header> <div class="main">…</div> <aside

    class="aside—1">…</aside>
 <aside class="aside—2">…</aside> <footer role="contentinfo">…</footer> 
 </div> </body> Three-column Flexbox layout Flexible Box Layout
  48. None
  49. 1 2 3 Order Flexible Box Layout Controls the order

    in which items appear visually in a flex container.
  50. Flex-direction Flexible Box Layout 3 2 1 Right to left

    in ltr layouts, left to right in rtl layouts.
  51. Order Flexible Box Layout 2 1 3 Controls the order

    in which items appear visually in a flex container.
  52. <body class="layout-flex-3col-variant"> <div class="container"> <header role="banner" class="flex-banner">…</header> <div class="main">…</div> <aside

    class="aside—1">…</aside>
 <aside class="aside—2">…</aside> <footer role="contentinfo">…</footer> 
 </div> </body> Three-column Flexbox layout Flexible Box Layout
  53. None
  54. [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
  55. None
  56. [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
  57. None
  58. None
  59. None
  60. None
  61. 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
  62. 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
  63. 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; 
 }
  64. 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); 
 }
  65. None
  66. Modernizr Flexbox Isolate Flexbox compatible and non-compatible files Modernizr adds

    flexbox, no-flexbox, and flexboxlegacy classes .no-flexbox .container { /* styles */ } Flexible Box Layout
  67. 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/
  68. Display table Modern layout foundations © Stuff & Nonsense 2014

  69. <body class="table-1"> <header role="banner" class="flex-banner">…</header> <nav role="navigation" class="banner__nav">…</nav> <div class="content">…</div>


    <footer role="contentinfo">…</footer> </body> Navigation first Display table layout
  70. None
  71. <body class="table-1"> <header role="banner" class="flex-banner">…</header> <div class="content">…</div> <nav role="navigation" class="banner__nav">…</nav>

    <footer role="contentinfo">…</footer> </body> Content first Display table layout
  72. None
  73. None
  74. 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
  75. 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
  76. 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
  77. <body class="table-1"> <header role="banner" class="flex-banner">…</header> <div class="content-group"> <div class="content">…</div> <nav

    role="navigation">…</nav>
 </div> <footer role="contentinfo">…</footer> </body> Content first Display table layout
  78. None
  79. @media (min-width : 48em) { .content { display : table-footer-group;

    } [role="navigation"] { display : table-header-group; }
 } } Content first Display table layout
  80. None
  81. Skip to navigation Display table layout <body class="table-1">
 <a href="#navigation">Menu</a>

    <header role="banner" class="flex-banner">…</header> <div class="content-group"> <div class="content">…</div> <nav role="navigation" id="navigation">…</nav>
 </div> <footer role="contentinfo">…</footer> </body>
  82. None
  83. Skip to navigation Display table layout a[href="#navigation"] { 
 display

    : block; 
 } @media (min-width : 48em { a[href="#navigation"] { 
 display : none; } }
  84. Two-column display-table layout Display table layout <body class="table-2"> <header role="banner"

    class="flex-banner">…</header>
 <div class="content-group">
 <div class="content"> <div class="main">…</div> <aside class="aside-1">…</aside>
 </div>
 </div> <footer role="contentinfo">…</footer> </body>
  85. 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%; } }
  86. None
  87. None
  88. Creating columns Display table layout @media (min-width : 62em {

    .commerce-item { float : left; width : 33%; }
 }
  89. Creating columns Display table layout

  90. Creating columns Display table layout @media (min-width : 62em {

    .commerce-item { display : table-cell; width : 33%; }
 }
  91. Creating columns Display table layout

  92. Flexbox recap Modern layout foundations © Stuff & Nonsense 2014

  93. Align-items Flexible Box Layout cross axis main axis flex-start: Items

    placed on the cross axis start line
  94. Align-items Display table layout .content {
 align-items : flex-start; 


    } flex-start: Items placed on the cross axis start line
  95. Align-items Flexible Box Layout cross axis main axis flex-end: Items

    placed on the cross axis end line
  96. Align-items Display table layout .content {
 align-items : flex-end; 


    } flex-end: Items placed on the cross axis end line
  97. Align-items Flexible Box Layout cross axis main axis center: items

    centered in the cross axis
  98. Align-items Display table layout .content {
 align-items : center; 


    } center: items centered in the cross axis
  99. Align-items Flexible Box Layout cross axis main axis stretch (default):

    items stretch to fill container height
  100. Align-items Display table layout .content {
 align-items : stretch; /*

    default value */
 } stretch (default): items stretch to fill container height
  101. 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
  102. Align-items Display table layout .content {
 align-items : baseline; 


    } baseline: items aligned so that their baselines match
  103. CSS3 for responsive web design © Stuff & Nonsense 2014

    Modules and components Part two
  104. Additional Flexbox properties Flexible Box Layout Justify-content Align-content Align-self

  105. Justify-content Flexible Box Layout cross axis flex-start: Items placed on

    the main axis start line main axis
  106. Justify-content Display table layout .content {
 justify-content : flex-start; 


    } flex-start: Items placed on the main axis start line
  107. Justify-content Flexible Box Layout cross axis flex-end: Items placed on

    the main axis end line main axis
  108. Justify-content Display table layout .content {
 justify-content : flex-end; 


    } flex-end: Items placed on the main axis end line
  109. Justify-content Flexible Box Layout cross axis center: Items centered in

    the main axis main axis
  110. Justify-content Display table layout .content {
 justify-content : center; 


    } center: Items centered in the main axis
  111. 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
  112. 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
  113. Justify-content Flexible Box Layout main axis cross axis space-around: Items

    distributed in the line with equal space around them
  114. Justify-content Display table layout .content {
 justify-content : space-around; 


    } space-around: Items distributed in the line with equal space around them
  115. Align-content Flexible Box Layout cross axis flex-start: lines placed at

    the start of the container main axis
  116. Align-content Display table layout .content {
 align-content : flex-start; 


    } flex-start: lines placed at the start of the container
  117. Align-content Flexible Box Layout cross axis cross axis flex-end: lines

    placed at the end of the container main axis
  118. Align-content Display table layout .content {
 align-content : flex-end; 


    } flex-end: lines placed at the end of the container
  119. Align-content Flexible Box Layout cross axis cross axis center: lines

    placed at the center of the container main axis
  120. Align-content Display table layout .content {
 align-content : center; 


    } center: lines placed at the center of the container
  121. Align-content Flexible Box Layout cross axis cross axis stretch (default):

    lines stretch to fill container height main axis
  122. Align-content Display table layout .content {
 align-content : stretch; /*

    default value */
 } stretch (default): lines stretch to fill container height
  123. 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
  124. 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
  125. Align-content Flexible Box Layout cross axis cross axis main axis

    space-around: Lines distributed in the container with equal space around them
  126. Align-content Display table layout .content {
 align-content : space-around; 


    } space-around: Lines distributed in the container with equal space around them
  127. Align-self Flexible Box Layout cross axis cross axis main axis

    align-self: Overrides for individual flex items
  128. 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
  129. Media modules Modules and components © Stuff & Nonsense 2014

  130. Media modules Modules and components

  131. Media modules Modules and components <div class="flex-media"> 
 <div class="flex-media__figure">

    <img src="media__img.png -->" alt=""> </div> <div class="flex-media__content"> <p>…</p> </div>
 </div>
  132. Media modules Modules and components .flex-media { display : flex;

    } .flex-media__figure { margin-right : 22px; } .flex-media__content { flex : 1; }
  133. 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
  134. Media modules Modules and components

  135. Store items Modules and components © Stuff & Nonsense 2014

  136. Store items Modules and components

  137. Store items Modules and components <div class="flex-commerce-media-items"> 
 <div class="commerce-media-item">…</div>

    <div class="commerce-media-item">…</div> </div>
  138. Store items Modules and components .flex-commerce-media-items { display : flex;

    } .commerce-media-item { flex : 1; }
  139. Store items Modules and components

  140. Store items Modules and components <div class="commerce-media-item"> <div class="flex-media__figure">…</div> <div

    class="flex-media__content">…</div> </div>
  141. 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
  142. Store items Modules and components

  143. Store items Modules and components .flex-self-alt { align-self : flex-end;

    }
  144. Store items Modules and components Use the Web Inspector to

    add align-items : flex-end; to the flex-media__figure element
  145. Pinning buttons Modules and components © Stuff & Nonsense 2014

  146. Pinning buttons Modules and components

  147. Pinning buttons Modules and components <div class="flex-commerce-media-items"> 
 <div class="commerce-media-item">…</div>

    <div class="commerce-media-item">…</div> <div class="commerce-media-item">…</div> </div>
  148. Pinning buttons Modules and components <div class="commerce-media-item"> <div class="flex-media__figure">…</div> <div

    class="flex-media__content"> <h3 class="item__header">…</h3> <p>…</p> <a href="" class="item__button">Buy now</a> </div> </div>
  149. 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; }
  150. Pinning buttons Modules and components

  151. Figures & captions Modules and components © Stuff & Nonsense

    2014
  152. Figures and captions Modules and components

  153. Figures and captions Modules and components <figure class="flex-figure"> <img src="16x9.png"

    alt=""> <figcaption>…</figcaption> </figure>
  154. 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
  155. Use the Web Inspector to add: .figure--reverse, .figure--center, 
 .figure--bottom

    and figure--alt to .flex-figure Figures and captions Modules and components
  156. Superhero Modules and components © Stuff & Nonsense 2014

  157. None
  158. Superhero Modules and components <div class="flex-hero"> <div class="hero__inner"> <p class="hero__lead">…</p>

    <a href="" class="hero__action">…</a> </div> </div>
  159. 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
  160. None
  161. Use the Web Inspector to add: .hero--top and .hero--bottom to

    .flex-hero
  162. Use the Web Inspector to add: .hero--top and .hero--bottom to

    .flex-hero
  163. Centered banner Modules and components © Stuff & Nonsense 2014

  164. None
  165. Centered banner Modules and components <header role="banner" class="flex-banner"> <div class="banner__logo">

    <img src="banner__logo.png" alt=""> </div> <nav role="navigation"> <ul class="banner__list">…</ul> </nav> </header>
  166. Centered banner Modules and components .banner__logo { text-align : center;

    } @media (min-width : 37.5em) { .banner__list { display : flex; justify-content : space-between; } }
  167. 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; }
 }
  168. None
  169. None
  170. Flexbox pagination Modules and components © Stuff & Nonsense 2014

  171. Medium screens without Flexbox Medium screens display : flex; Flexbox

    pagination Modules and components
  172. None
  173. Flexbox pagination Modules and components <ul class="flex-pagination"> <li><a href="">Previous</a></li> <li><a

    href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> <li><a href="">Next</a></li> </ul>
  174. Flexbox pagination Modules and components .flex-pagination { display : flex;

    flex-wrap : wrap; justify-content : space-between; } .flex-pagination li { order : 2; display : inline-block; }
  175. 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; }
  176. Medium screens without Flexbox Medium screens display : flex; Large

    screens display : flex; Flexbox pagination Modules and components
  177. 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; } }
  178. Flexible forms Modules and components © Stuff & Nonsense 2014

  179. Flexible forms Modules and components

  180. Flexible forms Modules and components <div class="flex-form"> <span class="flex-form__item">Name</span> <input

    class="flex-form__input"> </div> <div class="flex-form"> <input class="flex-form__input"> <a class="flex-form__item">Go</a> </div>
  181. Flexible forms Modules and components <div class="flex-form"> <span class="flex-form__item">www</span> <input

    class="flex-form__input"> <select class="flex-form__item"> <option>.com</option> <option>.co.uk</option> <option>.uk</option> </select> </div>
  182. Flexible forms Modules and components .flex-form { display : flex;

    flex-wrap : wrap; justify-content : space-between; } .flex-form__input { flex : 1; 
 }
  183. Flexible forms Modules and components

  184. Flexible forms Modules and components

  185. Flexible forms Modules and components <div class="flex-form-stretch"> <label>A long label

    that keeps expanding</label> <input type="text"> <button>Search</button> </div>
  186. Flexible forms Modules and components .flex-form-stretch { display : flex;

    } .flex-form-stretch input { flex : 1; }
  187. Example showing stretch flexbox forms variations

  188. CSS3 for responsive web design © Stuff & Nonsense 2014

    Responsive typography Part three
  189. 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
  190. Viewport width units Responsive typography h1 {
 font-size : 32px;

    
 font-size : 3.2rem; 
 font-size : 5.4vw; 
 }
  191. Sticky Flexbox footer Responsive typography © Stuff & Nonsense 2014

  192. None
  193. <body class="layout-full"> <div class="container">…</div> <footer role="contentinfo">…</footer> </body> Sticky footer

  194. Sticky footer .layout-full {
 display : flex; min-height : 100vh;

    flex-direction : column; 
 } .layout-full .container { flex : 1; }
  195. Multiple column layout Responsive typography © Stuff & Nonsense 2014

  196. 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
  197. CSS column advantages Multiple column layout Improves readability
 Manages the

    measure
 Reduces purely presentational markup
  198. None
  199. None
  200. None
  201. Presentational HTML <div class="content-cols"> <div class="column column--one">…</div> <div class="column column--two">…</div>


    </div> Multiple column layout
  202. Column properties Column count Column width Column span Break after

    Column gap Column rule Break before Multiple column layout
  203. Meaningful markup <div class="content-cols"> <figure>...</figure> 
 <p>...</p> </div> Multiple column

    layout
  204. Column width @media (min-width : 48em) { .content-cols { -webkit-column-width

    : 24em; -moz-column-width : 24em; column-width : 24em; } } Multiple column layout
  205. Column count @media (min-width : 48em) { .content-cols { -webkit-column-count

    : 2; -moz-column-count : 2; column-count : 2; } } Multiple column layout
  206. Columns @media (min-width : 48em) { .content-cols { -webkit-columns :

    2 24em; -moz-columns : 2 24em; columns : 2 24em; } } Multiple column layout
  207. None
  208. Column gap @media (min-width : 48em) { .content-cols { -webkit-column-gap

    : 44px; -moz-column-gap : 44px; column-gap : 44px; } } Multiple column layout
  209. 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
  210. None
  211. 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
  212. None
  213. None
  214. None
  215. None
  216. Columnised captions @media (min-width : 37.5em) { .cols-figure figcaption {

    column-count : 2; column-gap : 44px; } } Multiple column layout
  217. Spanning columns <div class="columns"> <p>...</p> <figure class="column__span" >...</figure> <p>...</p> <h2

    class="column__span">Ape-o-nauts?</h2> ... </div> Multiple column layout Column-span is not supported in Firefox
  218. Spanning columns @media (min-width : 64em) { .cols__span { column-span

    : all; } } Multiple column layout
  219. None
  220. None
  221. None
  222. None
  223. Spanning breaks .columns h2 { break-before : column; break-after :

    avoid-column; 
 } Multiple column layout
  224. CSS shapes Responsive typography © Stuff & Nonsense 2014

  225. 1 Supported with -webkit- prefix CSS shapes Responsive design details

    37 24 7.1 1 8 37
  226. .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 ( ); }
  227. CSS shapes Responsive design details circle () ellipse () inset

    () polygon () Each shape is defined by a set of points.
  228. 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.
  229. .shapes__circle { float : left; height : 200px; width :

    200px; shape-outside : circle ( ); } CSS shapes Responsive design details
  230. None
  231. . 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
  232. . shapes__ellipse { float : left; height : 250px; width

    : 200px; shape-outside : ellipse ( );
 } CSS shapes Responsive design details
  233. None
  234. Responsive design details Inset shape . shapes__inset { float :

    left; height : 200px; width : 300px; shape-outside : inset ( );
 }
  235. None
  236. 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…); } }
  237. None
  238. 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
  239. 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.
  240. 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
  241. Responsive design details Image shape

  242. 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; } }
  243. None
  244. None
  245. None
  246. None
  247. Responsive images Responsive typography © Stuff & Nonsense 2014

  248. Image set Responsive images .banner__logo { background-image : url(assets/banner__logo.png); background-image

    : -webkit-image-set (url(banner__logo.png) 1x, url(banner__logo@2x.png) 2x); }
  249. Source set attribute <img src="ursus.png" srcset=" ursus@1.5x.png 1.5x, /* 300px

    */ ursus@2x.png 2x, /* 400px */ ursus@3x.png 3x" /* 600px */ width="200px" alt="General Ursus"> Responsive images
  250. Sizes attribute <img src="ursus.png" srcset=" ursus-small.png 200w, ursus-medium.png 400w, ursus-large.png

    600w" sizes="(max-width : 30em) 100vw, (max-width : 48em) 50vw" alt="General Ursus"> Responsive images
  251. Resolution switching <img src="ursus.png" srcset=" ursus-small.png 200w, ursus-medium.png 400w, ursus-large.png

    600w, ursus@2x.png 200w 2x" sizes="(max-width : 30em) 100vw, (max-width : 48em) 50vw" alt="General Ursus"> Responsive images
  252. 32 1 34 24 7.1 8 37 1 Not enabled

    by default but can be enabled in about:config Source set Responsive images
  253. None
  254. CSS3 for responsive web design © Stuff & Nonsense 2014

    Responsive design details Part four
  255. Border images Responsive design details © Stuff & Nonsense 2014

  256. 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
  257. None
  258. None
  259. 93px 76px 2kb png image

  260. None
  261. 33px 43px 33px 43px

  262. 1 2 3 7 8 9 4 6 ?

  263. 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; }
  264. None
  265. ? ? ? ?

  266. None
  267. Border images Responsive design details .html { border-image-repeat : repeat

    /* top */ repeat /* right */ repeat /* bottom */ repeat /* left */ ;}
  268. 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
  269. Border images Responsive design details border-width : 33px; border-width :

    66px; border-width : 99px;
  270. Background blends Responsive design details © Stuff & Nonsense 2014

  271. Background blends Responsive design details 35 24 7.1 8 37

    31
  272. color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity

    multiply overlay saturation soft-light screen Background blends Responsive design details
  273. 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.
  274. Mix blend mode Responsive design details mix-blend-mode : normal

  275. .flex-media__figure { mix-blend-mode : normal;
 } Mix blend mode Responsive

    design details
  276. Mix blend mode Responsive design details normal color color-dodge color-burn

    difference exclusion hard-light hue
  277. Mix blend mode Responsive design details normal color lighten luminosity

    multiply overlay saturation screen
  278. .hero { background-color : #fbd996; mix-blend-mode : difference;
 } Mix

    blend mode Responsive design details
  279. None
  280. .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
  281. None
  282. .hero__lead { mix-blend-mode : exclusion; 
 } .hero__action { mix-blend-mode

    : hard-light; 
 } Background blend mode Responsive design details
  283. .hero__inner { isolation : isolate; 
 } Background blend mode

    Responsive design details
  284. 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
  285. .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
  286. 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
  287. 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
  288. 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
  289. 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
  290. 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
  291. 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
  292. 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
  293. .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
  294. .blend {
 background-blend-mode : 
 normal, normal, normal, luminosity; 


    } Background blend mode Responsive design details
  295. 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
  296. .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
  297. .blend { background-position : 5% 200px, 100% 20px, 2% 140px,

    0px 0px, 100% -200px; } Background blend mode Responsive design details
  298. .blend { background-repeat : no-repeat, no-repeat, no-repeat, repeat-x, no-repeat; }

    Background blend mode Responsive design details
  299. .blend { background-blend-mode : normal, normal, normal, normal, color-dodge, screen;

    } Background blend mode Responsive design details
  300. 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
  301. None
  302. None
  303. None
  304. Filter effects Responsive design details © Stuff & Nonsense 2014

  305. 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
  306. Filter properties Responsive design details Blur Drop-shadow Opacity Brightness Contrast

    Hue-rotate Invert Saturate Grayscale Sepia
  307. None
  308. .donthatetimvandamme { -webkit-filter : blur(5px); filter : blur(5px); }

  309. .donthatetimvandamme { -webkit-filter : opacity(.5); filter : opacity(.5); * }

  310. .donthatetimvandamme { -webkit-filter : brightness(150%); filter : brightness(150%); * }

  311. brightness(0); brightness(25%); brightness(50%); Unfiltered — 100% brightness(150%); brightness(200%);

  312. .donthatetimvandamme { -webkit-filter : contrast(150%); filter : contrast(150%); * }

  313. contrast(0); contrast(25%); contrast(50%); Unfiltered — 100% contrast(200%); contrast(800%);

  314. .donthatetimvandamme { -webkit-filter : hue-rotate(90deg); filter : hue-rotate(90deg); * }

  315. Unfiltered — 0deg hue-rotate(45deg); hue-rotate(90deg); hue-rotate(180deg); hue-rotate(270deg); hue-rotate(360deg);

  316. .donthatetimvandamme { -webkit-filter : invert(100%); filter : invert(100%); * }

  317. Unfiltered — 0 invert(25%) invert(50%) invert(75%) invert(100%)

  318. .donthatetimvandamme { -webkit-filter : saturate(50%); filter : saturate(50%); * }

  319. Unfiltered — 0 saturate(25%); saturate(50%); saturate(200%); saturate(400%); saturate(800%);

  320. .donthatetimvandamme { -webkit-filter : grayscale(100%); filter : grayscale(100%); * }

  321. Unfiltered — 0 greyscale(25%) greyscale(50%) greyscale(75%) greyscale(100%)

  322. .donthatetimvandamme { -webkit-filter : sepia(100%); filter : sepia(100%); * }

  323. Unfiltered — 0 sepia(25%) sepia(50%) sepia(75%) sepia(100%)

  324. 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); }
  325. drop-shadow box-shadow original

  326. None
  327. None
  328. None
  329. CSS3 for responsive web design © Stuff & Nonsense 2014

  330. Anything we missed?

  331. Thank you

  332. @malarkey

  333. None
  334. CSS3 for responsive web design © Stuff & Nonsense 2014

    Some more things Bonus
  335. Transforms Some more things © Stuff & Nonsense 2014

  336. 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
  337. 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
  338. None
  339. .donthatetimvandamme { transform : scaleX(1.5); }

  340. .donthatetimvandamme { transform : scaleY(1.5); }

  341. .donthatetimvandamme { transform : scale(1.5); }

  342. .donthatetimvandamme { transform : scale(.5); }

  343. .donthatetimvandamme { transform : translateX(50px); }

  344. .donthatetimvandamme { transform : translateY(50px); }

  345. .donthatetimvandamme { transform : translateX(50%); }

  346. .donthatetimvandamme { transform : translateY(-50%); }

  347. .donthatetimvandamme { transform : translate(50px -50px); }

  348. .donthatetimvandamme { transform : rotate(90deg); }

  349. .donthatetimvandamme { transform : rotate(-90deg); }

  350. ‘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.
  351. ‘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.
  352. .donthatetimvandamme { transform : scale(1.5) translate(50px -50px)
 rotate(-90deg) }

  353. .donthatetimvandamme { transform-origin : 0 0; * }

  354. .donthatetimvandamme { transform-origin : 50% 0; * }

  355. .donthatetimvandamme { transform-origin : 100% 0; * }

  356. .donthatetimvandamme { transform-origin : 0 100%; * }

  357. .donthatetimvandamme { transform-origin : 100% 100%; * }

  358. Transitions Some more things © Stuff & Nonsense 2014

  359. 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
  360. Transition property Some more things .donthatetimvandamme { transition-property : opacity;

    }
  361. Backgrounds Borders Colours Dimensions Fonts Opacity Positions Transforms Transition properties

    Some more things
  362. Transition property Some more things .donthatetimvandamme { transition-property : opacity,

    color; } .donthatetimvandamme { transition-property : all; }
  363. Transition duration Some more things .donthatetimvandamme { transition-duration : .15s;

    }
  364. Transition delay Some more things .donthatetimvandamme { transition-delay : .1s;

    }
  365. Transition timing Some more things .donthatetimvandamme { transition-timing-function : linear;

    }
  366. Transition timing Some more things ease (default)

  367. Transition timing Some more things linear

  368. Transition timing Some more things ease-in

  369. Transition timing Some more things ease-out

  370. Transition timing Some more things ease-in-out

  371. Transition shorthand Some more things .donthatetimvandamme { transition : opacity

    .15s .1s linear; }
  372. None