$30 off During Our Annual Pro Sale. View Details »

CSS3 for Responsive Web Design (full day workshop) 2015

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

Andy Clarke

March 18, 2015
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. CSS3 for
    responsive
    web design
    © Stuff & Nonsense 2014
    With your host Andrew Clarke

    View Slide

  2. View Slide

  3. View Slide

  4. Special thanks to
    @sarasoueidan

    View Slide

  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

    View Slide

  6. CSS Grid Layout Module

    Grid by Example simple usage examples by Rachel Andrew
    http://gridbyexample.com
    What we won’t cover

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Just kidding
    Today’s browser

    View Slide

  13. Chrome
    Today’s browser

    View Slide

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

    View Slide

  15. Modern layout
    foundations
    CSS3 for responsive web design
    © Stuff & Nonsense 2014
    Part one

    View Slide

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

    View Slide

  17. Three ingredients for responsive web design
    A flexible grid
    Flexible images and media
    CSS3 media queries
    And a whole lot more

    View Slide

  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

    View Slide

  19. Drawbacks of traditional CSS layout
    Complicated maths
    Vertical centering
    Float drops
    Float clearing
    Same height columns
    Shrink-to-fit containers
    Source order dependence

    View Slide

  20. Vertical centering, solved by Flexbox

    View Slide

  21. Float drop and clearing, solved by Flexbox

    View Slide

  22. Equal height columns, solved by Flexbox

    View Slide

  23. Source order dependence, helped by Flexbox

    View Slide

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

    View Slide

  25. Advantages of Flexbox
    More flexible layouts
    Visual content reordering
    Column height matching
    Flexible Box Layout

    View Slide

  26. .container {
    display : flex;
    // display : inline-flex;
    }
    Apply flex to a container Flexible Box Layout

    View Slide

  27. .container {
    display : flex;
    flex-direction : row; /* default */
    }
    // row, row-reverse, column, column-reverse
    Set the flex direction Flexible Box Layout

    View Slide

  28. Horizontal layout Flexible Box Layout
    row
    row-reverse

    View Slide

  29. Vertical layout Flexible Box Layout
    column
    column-reverse

    View Slide

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

    View Slide

  31. .container {
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap; /* default */
    }
    Rows and columns Flexible Box Layout

    View Slide

  32. Wrapping flex items Flexible Box Layout

    View Slide

  33. .container {
    display : flex;
    flex-flow : row nowrap;
    }
    Rows and columns Flexible Box Layout

    View Slide










  34. Two-column Flexbox layout Flexible Box Layout

    View Slide

  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

    View Slide

  36. View Slide

  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

    View Slide

  38. View Slide

  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; 

    }

    View Slide

  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.

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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 */ }

    View Slide

  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 */ }

    View Slide

  46. Flex Flexible Box Layout

    View Slide





  47. …






    Three-column Flexbox layout Flexible Box Layout

    View Slide

  48. View Slide

  49. 1 2 3
    Order Flexible Box Layout
    Controls the order in which items appear visually in a flex container.

    View Slide

  50. Flex-direction Flexible Box Layout
    3 2 1
    Right to left in ltr layouts, left to right in rtl layouts.

    View Slide

  51. Order Flexible Box Layout
    2 1 3
    Controls the order in which items appear visually in a flex container.

    View Slide





  52. …






    Three-column Flexbox layout Flexible Box Layout

    View Slide

  53. View Slide

  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

    View Slide

  55. View Slide

  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

    View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  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

    View Slide

  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

    View Slide

  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; 

    }

    View Slide

  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); 

    }

    View Slide

  65. View Slide

  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

    View Slide

  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/

    View Slide

  68. Display table
    Modern layout foundations
    © Stuff & Nonsense 2014

    View Slide




  69. …



    Navigation first Display table layout

    View Slide

  70. View Slide







  71. Content first Display table layout

    View Slide

  72. View Slide

  73. View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide





  77. …




    Content first Display table layout

    View Slide

  78. View Slide

  79. @media (min-width : 48em) {
    .content {
    display : table-footer-group; }
    [role="navigation"] {
    display : table-header-group; }

    }
    }
    Content first Display table layout

    View Slide

  80. View Slide

  81. Skip to navigation Display table layout

    Menu



    …




    View Slide

  82. View Slide

  83. Skip to navigation Display table layout
    a[href="#navigation"] { 

    display : block; 

    }
    @media (min-width : 48em {
    a[href="#navigation"] { 

    display : none; }
    }

    View Slide

  84. Two-column display-table layout Display table layout

    …




    …





    View Slide

  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%; }
    }

    View Slide

  86. View Slide

  87. View Slide

  88. Creating columns Display table layout
    @media (min-width : 62em {
    .commerce-item {
    float : left;
    width : 33%; }

    }

    View Slide

  89. Creating columns Display table layout

    View Slide

  90. Creating columns Display table layout
    @media (min-width : 62em {
    .commerce-item {
    display : table-cell;
    width : 33%; }

    }

    View Slide

  91. Creating columns Display table layout

    View Slide

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

    View Slide

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

    View Slide

  94. Align-items Display table layout
    .content {

    align-items : flex-start; 

    }
    flex-start: Items placed on the cross axis start line

    View Slide

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

    View Slide

  96. Align-items Display table layout
    .content {

    align-items : flex-end; 

    }
    flex-end: Items placed on the cross axis end line

    View Slide

  97. Align-items Flexible Box Layout
    cross axis
    main axis
    center: items centered in the cross axis

    View Slide

  98. Align-items Display table layout
    .content {

    align-items : center; 

    }
    center: items centered in the cross axis

    View Slide

  99. Align-items Flexible Box Layout
    cross axis
    main axis
    stretch (default): items stretch to fill container height

    View Slide

  100. Align-items Display table layout
    .content {

    align-items : stretch; /* default value */

    }
    stretch (default): items stretch to fill container height

    View Slide

  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

    View Slide

  102. Align-items Display table layout
    .content {

    align-items : baseline; 

    }
    baseline: items aligned so that their baselines match

    View Slide

  103. CSS3 for responsive web design
    © Stuff & Nonsense 2014
    Modules and
    components
    Part two

    View Slide

  104. Additional Flexbox properties Flexible Box Layout
    Justify-content
    Align-content
    Align-self

    View Slide

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

    View Slide

  106. Justify-content Display table layout
    .content {

    justify-content : flex-start; 

    }
    flex-start: Items placed on the main axis start line

    View Slide

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

    View Slide

  108. Justify-content Display table layout
    .content {

    justify-content : flex-end; 

    }
    flex-end: Items placed on the main axis end line

    View Slide

  109. Justify-content Flexible Box Layout
    cross axis
    center: Items centered in the main axis
    main axis

    View Slide

  110. Justify-content Display table layout
    .content {

    justify-content : center; 

    }
    center: Items centered in the main axis

    View Slide

  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

    View Slide

  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

    View Slide

  113. Justify-content Flexible Box Layout
    main axis
    cross axis
    space-around: Items distributed in the line with equal space around them

    View Slide

  114. Justify-content Display table layout
    .content {

    justify-content : space-around; 

    }
    space-around: Items distributed in the line with equal space around them

    View Slide

  115. Align-content Flexible Box Layout
    cross axis
    flex-start: lines placed at the start of the container
    main axis

    View Slide

  116. Align-content Display table layout
    .content {

    align-content : flex-start; 

    }
    flex-start: lines placed at the start of the container

    View Slide

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

    View Slide

  118. Align-content Display table layout
    .content {

    align-content : flex-end; 

    }
    flex-end: lines placed at the end of the container

    View Slide

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

    View Slide

  120. Align-content Display table layout
    .content {

    align-content : center; 

    }
    center: lines placed at the center of the container

    View Slide

  121. Align-content Flexible Box Layout
    cross axis
    cross axis
    stretch (default): lines stretch to fill container height
    main axis

    View Slide

  122. Align-content Display table layout
    .content {

    align-content : stretch; /* default value */

    }
    stretch (default): lines stretch to fill container height

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  126. Align-content Display table layout
    .content {

    align-content : space-around; 

    }
    space-around: Lines distributed in the container with equal space around them

    View Slide

  127. Align-self Flexible Box Layout
    cross axis
    cross axis
    main axis
    align-self: Overrides for individual flex items

    View Slide

  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

    View Slide

  129. Media modules
    Modules and components
    © Stuff & Nonsense 2014

    View Slide

  130. Media modules Modules and components

    View Slide

  131. Media modules Modules and components









    View Slide

  132. Media modules Modules and components
    .flex-media {
    display : flex; }
    .flex-media__figure {
    margin-right : 22px; }
    .flex-media__content {
    flex : 1; }

    View Slide

  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

    View Slide

  134. Media modules Modules and components

    View Slide

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

    View Slide

  136. Store items Modules and components

    View Slide

  137. Store items Modules and components





    View Slide

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

    View Slide

  139. Store items Modules and components

    View Slide

  140. Store items Modules and components




    View Slide

  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

    View Slide

  142. Store items Modules and components

    View Slide

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

    View Slide

  144. Store items Modules and components
    Use the Web Inspector to add
    align-items : flex-end; to the flex-media__figure element

    View Slide

  145. Pinning buttons
    Modules and components
    © Stuff & Nonsense 2014

    View Slide

  146. Pinning buttons Modules and components

    View Slide

  147. Pinning buttons Modules and components






    View Slide

  148. Pinning buttons Modules and components





    Buy now


    View Slide

  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; }

    View Slide

  150. Pinning buttons Modules and components

    View Slide

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

    View Slide

  152. Figures and captions Modules and components

    View Slide

  153. Figures and captions Modules and components
    <figure class="flex-figure">

    <figcaption>…figcaption>
    figure>

    View Slide

  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

    View Slide

  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

    View Slide

  156. Superhero
    Modules and components
    © Stuff & Nonsense 2014

    View Slide

  157. View Slide

  158. Superhero Modules and components






    View Slide

  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

    View Slide

  160. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  164. View Slide

  165. Centered banner Modules and components








    View Slide

  166. Centered banner Modules and components
    .banner__logo {
    text-align : center; }
    @media (min-width : 37.5em) {
    .banner__list {
    display : flex;
    justify-content : space-between;
    }
    }

    View Slide

  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; }

    }

    View Slide

  168. View Slide

  169. View Slide

  170. Flexbox pagination
    Modules and components
    © Stuff & Nonsense 2014

    View Slide

  171. Medium screens without Flexbox
    Medium screens display : flex;
    Flexbox pagination Modules and components

    View Slide

  172. View Slide

  173. Flexbox pagination Modules and components

    Previous
    1
    2
    3
    4
    5
    6
    Next

    View Slide

  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;
    }

    View Slide

  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; }

    View Slide

  176. Medium screens without Flexbox
    Medium screens display : flex;
    Large screens display : flex;
    Flexbox pagination Modules and components

    View Slide

  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; }
    }

    View Slide

  178. Flexible forms
    Modules and components
    © Stuff & Nonsense 2014

    View Slide

  179. Flexible forms Modules and components

    View Slide

  180. Flexible forms Modules and components

    Name




    Go

    View Slide

  181. Flexible forms Modules and components

    www


    .com
    .co.uk
    .uk


    View Slide

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

    }

    View Slide

  183. Flexible forms Modules and components

    View Slide

  184. Flexible forms Modules and components

    View Slide

  185. Flexible forms Modules and components

    A long label that keeps expanding

    Search

    View Slide

  186. Flexible forms Modules and components
    .flex-form-stretch {
    display : flex; }
    .flex-form-stretch input {
    flex : 1; }

    View Slide

  187. Example showing stretch flexbox forms variations

    View Slide

  188. CSS3 for responsive web design
    © Stuff & Nonsense 2014
    Responsive
    typography
    Part three

    View Slide

  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

    View Slide

  190. Viewport width units Responsive typography
    h1 {

    font-size : 32px; 

    font-size : 3.2rem; 

    font-size : 5.4vw; 

    }

    View Slide

  191. Sticky Flexbox footer
    Responsive typography
    © Stuff & Nonsense 2014

    View Slide

  192. View Slide





  193. Sticky footer

    View Slide

  194. Sticky footer
    .layout-full {

    display : flex;
    min-height : 100vh;
    flex-direction : column; 

    }
    .layout-full .container {
    flex : 1; }

    View Slide

  195. Multiple column layout
    Responsive typography
    © Stuff & Nonsense 2014

    View Slide

  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

    View Slide

  197. CSS column advantages Multiple column layout
    Improves readability

    Manages the measure

    Reduces purely presentational markup

    View Slide

  198. View Slide

  199. View Slide

  200. View Slide

  201. Presentational HTML


    …


    Multiple column layout

    View Slide

  202. Column properties
    Column count
    Column width
    Column span
    Break after
    Column gap
    Column rule
    Break before
    Multiple column layout

    View Slide

  203. Meaningful markup

    <figure>...figure> 

    ...

    Multiple column layout

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  207. View Slide

  208. Column gap
    @media (min-width : 48em) {
    .content-cols {
    -webkit-column-gap : 44px;
    -moz-column-gap : 44px;
    column-gap : 44px;
    }
    }
    Multiple column layout

    View Slide

  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

    View Slide

  210. View Slide

  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

    View Slide

  212. View Slide

  213. View Slide

  214. View Slide

  215. View Slide

  216. Columnised captions
    @media (min-width : 37.5em) {
    .cols-figure figcaption {
    column-count : 2;
    column-gap : 44px; }
    }
    Multiple column layout

    View Slide

  217. Spanning columns

    ...
    <figure class="column__span" >...figure>
    ...
    Ape-o-nauts?
    ...

    Multiple column layout
    Column-span is not supported in Firefox

    View Slide

  218. Spanning columns
    @media (min-width : 64em) {
    .cols__span {
    column-span : all; }
    }
    Multiple column layout

    View Slide

  219. View Slide

  220. View Slide

  221. View Slide

  222. View Slide

  223. Spanning breaks
    .columns h2 {
    break-before : column;
    break-after : avoid-column; 

    }
    Multiple column layout

    View Slide

  224. CSS shapes
    Responsive typography
    © Stuff & Nonsense 2014

    View Slide

  225. 1 Supported with -webkit- prefix
    CSS shapes Responsive design details
    37 24
    7.1 1
    8
    37

    View Slide

  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 ( );
    }

    View Slide

  227. CSS shapes Responsive design details
    circle ()
    ellipse ()
    inset ()
    polygon ()
    Each shape is defined by a set of points.

    View Slide

  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.

    View Slide

  229. .shapes__circle {
    float : left;
    height : 200px;
    width : 200px;
    shape-outside : circle ( );
    }
    CSS shapes Responsive design details

    View Slide

  230. View Slide

  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

    View Slide

  232. . shapes__ellipse {
    float : left;
    height : 250px;
    width : 200px;
    shape-outside : ellipse ( );

    }
    CSS shapes Responsive design details

    View Slide

  233. View Slide

  234. Responsive design details
    Inset shape
    . shapes__inset {
    float : left;
    height : 200px;
    width : 300px;
    shape-outside : inset ( );

    }

    View Slide

  235. View Slide

  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…); }
    }

    View Slide

  237. View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  241. Responsive design details
    Image shape

    View Slide

  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; }
    }

    View Slide

  243. View Slide

  244. View Slide

  245. View Slide

  246. View Slide

  247. Responsive images
    Responsive typography
    © Stuff & Nonsense 2014

    View Slide

  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([email protected]) 2x);
    }

    View Slide

  249. Source set attribute
    srcset="
    [email protected] 1.5x, /* 300px */
    [email protected] 2x, /* 400px */
    [email protected] 3x" /* 600px */
    width="200px"
    alt="General Ursus">
    Responsive images

    View Slide

  250. Sizes attribute
    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

    View Slide

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

    View Slide

  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

    View Slide

  253. View Slide

  254. CSS3 for responsive web design
    © Stuff & Nonsense 2014
    Responsive
    design details
    Part four

    View Slide

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

    View Slide

  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

    View Slide

  257. View Slide

  258. View Slide

  259. 93px
    76px
    2kb png image

    View Slide

  260. View Slide

  261. 33px
    43px
    33px
    43px

    View Slide

  262. 1 2 3
    7 8 9
    4 6
    ?

    View Slide

  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; }

    View Slide

  264. View Slide

  265. ?
    ?
    ?
    ?

    View Slide

  266. View Slide

  267. Border images Responsive design details
    .html {
    border-image-repeat :
    repeat /* top */
    repeat /* right */
    repeat /* bottom */
    repeat /* left */
    ;}

    View Slide

  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

    View Slide

  269. Border images Responsive design details
    border-width : 33px; border-width : 66px; border-width : 99px;

    View Slide

  270. Background blends
    Responsive design details
    © Stuff & Nonsense 2014

    View Slide

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

    View Slide

  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

    View Slide

  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.

    View Slide

  274. Mix blend mode Responsive design details
    mix-blend-mode : normal

    View Slide

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

    }
    Mix blend mode Responsive design details

    View Slide

  276. Mix blend mode Responsive design details
    normal color color-dodge
    color-burn
    difference exclusion hard-light hue

    View Slide

  277. Mix blend mode Responsive design details
    normal color lighten luminosity
    multiply overlay saturation screen

    View Slide

  278. .hero {
    background-color : #fbd996;
    mix-blend-mode : difference;

    }
    Mix blend mode Responsive design details

    View Slide

  279. View Slide

  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

    View Slide

  281. View Slide

  282. .hero__lead {
    mix-blend-mode : exclusion; 

    }
    .hero__action {
    mix-blend-mode : hard-light; 

    }
    Background blend mode Responsive design details

    View Slide

  283. .hero__inner {
    isolation : isolate; 

    }
    Background blend mode Responsive design details

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  294. .blend {

    background-blend-mode : 

    normal, normal, normal, luminosity; 

    }
    Background blend mode Responsive design details

    View Slide

  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

    View Slide

  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

    View Slide

  297. .blend {
    background-position :
    5% 200px,
    100% 20px,
    2% 140px,
    0px 0px,
    100% -200px;
    }
    Background blend mode Responsive design details

    View Slide

  298. .blend {
    background-repeat :
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-x,
    no-repeat;
    }
    Background blend mode Responsive design details

    View Slide

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

    View Slide

  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

    View Slide

  301. View Slide

  302. View Slide

  303. View Slide

  304. Filter effects
    Responsive design details
    © Stuff & Nonsense 2014

    View Slide

  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

    View Slide

  306. Filter properties Responsive design details
    Blur
    Drop-shadow
    Opacity
    Brightness
    Contrast
    Hue-rotate
    Invert
    Saturate
    Grayscale
    Sepia

    View Slide

  307. View Slide

  308. .donthatetimvandamme {
    -webkit-filter : blur(5px);
    filter : blur(5px); }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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); }

    View Slide

  325. drop-shadow
    box-shadow
    original

    View Slide

  326. View Slide

  327. View Slide

  328. View Slide

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

    View Slide

  330. Anything we missed?

    View Slide

  331. Thank you

    View Slide

  332. @malarkey

    View Slide

  333. View Slide

  334. CSS3 for responsive web design
    © Stuff & Nonsense 2014
    Some more things
    Bonus

    View Slide

  335. Transforms
    Some more things
    © Stuff & Nonsense 2014

    View Slide

  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

    View Slide

  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

    View Slide

  338. View Slide

  339. .donthatetimvandamme {
    transform : scaleX(1.5); }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  352. .donthatetimvandamme {
    transform : scale(1.5)
    translate(50px -50px)

    rotate(-90deg) }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  358. Transitions
    Some more things
    © Stuff & Nonsense 2014

    View Slide

  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

    View Slide

  360. Transition property Some more things
    .donthatetimvandamme {
    transition-property : opacity; }

    View Slide

  361. Backgrounds
    Borders
    Colours
    Dimensions
    Fonts
    Opacity
    Positions
    Transforms
    Transition properties Some more things

    View Slide

  362. Transition property Some more things
    .donthatetimvandamme {
    transition-property : opacity, color; }
    .donthatetimvandamme {
    transition-property : all; }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  366. Transition timing Some more things
    ease (default)

    View Slide

  367. Transition timing Some more things
    linear

    View Slide

  368. Transition timing Some more things
    ease-in

    View Slide

  369. Transition timing Some more things
    ease-out

    View Slide

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

    View Slide

  371. Transition shorthand Some more things
    .donthatetimvandamme {
    transition : opacity .15s .1s linear; }

    View Slide

  372. View Slide