Responsive Design Patterns for an Evolving Web

Responsive Design Patterns for an Evolving Web

Overview
Style guides, pattern libraries, and design systems are becoming more commonplace. As the web continues to mature older design patterns, even though they are widely understood, no longer work well for a multi-device web. Building modular, reusable patterns will help designs function on a wider group of devices.

Four Things Audience Members Will Learn
1. Basic guidelines for creating modular design patterns
2. Updated age-old design patterns for the evolving web
3. New responsive design patterns that solve complex, multi-device design problems
4. How to leverage Sass and PostCSS when creating design patterns

Examples:
https://codepen.io/collection/DbrpKV/#

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

June 04, 2016
Tweet

Transcript

  1. RESPONSIVE DESIGN PATTERNS FOR AN EVOLVING WEB BERMON PAINTER

  2. PATTERNS & DESIGN SYSTEMS The foundation of repeatable interactions that

    when combined create rich and complex systems.
  3. BENEFITS A useful tool to use when breaking down a

    user interface into it’s most modular pieces, instead of thinking about things as a series of disconnected pages.
  4. GUIDELINES Collaborate WITH DESIGNERS AND DEVELOPERS

  5. GUIDELINES FOSTER CONSISTENCY

  6. GUIDELINES KEEP PATTERNS UP-TO-DATE

  7. GUIDELINES ENJOY EFFICIENCY

  8. CONVENTIONS THERE’s A LOT OUT THERE. FIND ONE THAT WORKS

    FOR YOUR TEAM, NOT JUST YOURSELF.
  9. HTML /assets /images /content /layout /fonts /javascript /libs /modules module-name.js

    /testing module-name.spec /sass /base /helpers /modules module-name.scss /setup /themes /theme-name module-name.scss CONVENTIONS Folder Structure
  10. HTML .parent {…} .parent-child {…} .parent-child-grandchild {…} CONVENTIONS NAMING Parent-Grandchild

  11. HTML .navigation {…} .navigation-item {…} .navigation-item-action {…} CONVENTIONS NAMING Parent-Grandchild

  12. HTML .plural-items {…€¦} .singular-item {…€¦} CONVENTIONS NAMING PLural-Singular

  13. HTML .images {…} .image {…} CONVENTIONS NAMING PLural-Singular

  14. A BRIEF HISTORY IN LAYOUT The holy grail layout

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. A BRIEF HISTORY IN LAYOUT MEDIA OBJECT

  26. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean

    eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
  27. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean

    eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
  28. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean

    eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
  29. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean

    eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
  30. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean

    eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
  31. Ullamcorper Adipiscing Venenatis Consectetur Tortor Curabitur blandit tempus porttitor. Aenean

    eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.
  32. A BRIEF HISTORY IN LAYOUT The Grid

  33. None
  34. None
  35. None
  36. None
  37. PATTERNS The foundation of repeatable interactions that when combined create

    rich and complex systems.
  38. None
  39. None
  40. HTML <main class="panes"> <section class="pane"> <img class="pane-image" src="image.png" /> <h2

    class="pane-title">Title</h2> <p class="pane-content">Content...</p> </section> <section class="pane"> <img class="pane-image" src="image.png" /> <h2 class="pane-title">Title</h2> <p class="pane-content">Content...</p> </section> </main> Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  41. CSs .panes { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:

    center; height:100vh; text-align: center; width: 100%; } Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  42. CSs .panes { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:

    center; height:100vh; text-align: center; width: 100%; } .pane { display: flex; flex-direction: column; justify-content: center; width: 100%; } Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Venenatis Fringilla Justo Sem Amet Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  43. HTML <header class="masthead"></header> <main class="container"> <article class="content"></article> <nav class="navigation"></nav> <aside

    class="sidebar"></aside> </main> <footer class="footer"></footer>
  44. HTML html, body { height: 100%; } body { display:

    flex; flex-direction: column; }
  45. HTML html, body { height: 100%; } body { display:

    flex; flex-direction: column; } .container { display: flex; flex: 1; }
  46. HTML html, body { height: 100%; } body { display:

    flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; }
  47. HTML html, body { height: 100%; } body { display:

    flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; }
  48. HTML html, body { height: 100%; } body { display:

    flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; }
  49. HTML html, body { height: 100%; } body { display:

    flex; flex-direction: column; } .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -2; } .sidebar { flex-basis: 20%; order: -1; }
  50. HTML <header class="masthead"></header> <main class="container"> <article class="content"></article> <aside class="sidebar"></aside> </main>

    <footer class="footer"></footer>
  51. HTML <header class="masthead"></header> <main class="container"> <article class="content"></article> <aside class="sidebar"></aside> </main>

    <footer class="footer"></footer>
  52. HTML <header class="masthead"></header> <main class="container"> <article class="content"></article> <aside class="sidebar"></aside> </main>

    <footer class="footer"></footer>
  53. CSs html, body { height: 100%; } body { display:

    flex; flex-direction: column; } .container { display: flex; flex: 1; flex-direction: column; } .content, .sidebar { flex: 1; } .sidebar { order: -1; }
  54. CSs html, body { height: 100%; } body { display:

    flex; flex-direction: column; } .container { display: flex; flex: 1; flex-direction: column; } .content, .sidebar { flex: 1; } .sidebar { order: -1; } @media screen and (min-width: 600px) { .container { flex-direction: row-reverse; } .content { flex-basis: 30%; } }
  55. ACCESSIBILITy

  56. CSS HTML <header class="masthead"></header> <main class="container"> <article class="content"><article> <nav class="navigation"></nav>

    <aside class="sidebar"></aside> </main> <footer class="footer"></footer> .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; } 1 2 3 DOM ORDER
  57. CSS HTML <header class="masthead"></header> <main class="container"> <article class="content"><article> <nav class="navigation"></nav>

    <aside class="sidebar"></aside> </main> <footer class="footer"></footer> .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; } 2 1 3 VISUAL ORDER
  58. CSS HTML <header class="masthead"></header> <main class="container"> <article class="content"><article> <nav class="navigation"></nav>

    <aside class="sidebar"></aside> </main> <footer class="footer"></footer> .container { display: flex; flex: 1; } .content { flex: 1; } .navigation { flex-basis: 30%; order: -1; } .sidebar { flex-basis: 20%; } 1 2 3 TAB ORDER
  59. HTML <nav class="toolbars"> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Dashboard</a> </li>

    <li class="toolbar-item"> <a href="toolbar-link">Loans</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Budget</a> </li> </ul> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Settings</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Logout</a> </li> </ul> </nav> Dashboard Loans BudgeT SETTINGS LOGOUT
  60. HTML <nav class="toolbars"> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Dashboard</a> </li>

    <li class="toolbar-item"> <a href="toolbar-link">Loans</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Budget</a> </li> </ul> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Settings</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Logout</a> </li> </ul> </nav> Dashboard Loans Budget Settings Logout
  61. CSs .toolbars { display: flex; flex-direction: column; } Dashboard Loans

    Budget Settings Logout
  62. CSs .toolbars { display: flex; flex-direction: column; } @media screen

    and (min-width: 600px) { .toolbars { flex-direction: row; justify-content: space-between; } .toolbar { display: flex; align-items: center; } } Dashboard Loans BudgeT SETTINGS LOGOUT
  63. HTML <nav class="sidebar"> <ul class=“sidebar-group"> <li class="sidebar-item"> <a href="sidebar-link">Dashboard</a> </li>

    <li class="sidebar-item"> <a href="sidebar-link">Loans</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Budget</a> </li> </ul> <ul class="sidebar"> <li class="sidebar-item"> <a href="sidebar-link">Settings</a> </li> <li class="sidebar-item"> <a href="sidebar-link">Logout</a> </li> </ul> </nav> Dashboard Loans Budget Settings Logout
  64. HTML .sidebar { display: flex; flex-direction: column; justify-content: space-between; }

    Dashboard Loans Budget Settings Logout
  65. HTML <nav class="toolbars"> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Dashboard</a> </li>

    <li class="toolbar-item"> <a href="toolbar-link">Loans</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Budget</a> </li> </ul> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Settings</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Logout</a> </li> </ul> </nav> PRIMARY HEADING Secondary Heading
  66. HTML <nav class="toolbars"> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Dashboard</a> </li>

    <li class="toolbar-item"> <a href="toolbar-link">Loans</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Budget</a> </li> </ul> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Settings</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Logout</a> </li> </ul> </nav> PRIMARY HEADING Secondary Heading PRIMARY HEADING Secondary Heading
  67. HTML <nav class="toolbars"> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Dashboard</a> </li>

    <li class="toolbar-item"> <a href="toolbar-link">Loans</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Budget</a> </li> </ul> <ul class="toolbar"> <li class="toolbar-item"> <a href="toolbar-link">Settings</a> </li> <li class="toolbar-item"> <a href="toolbar-link">Logout</a> </li> </ul> </nav> PRIMARY HEADING Secondary Heading
  68. HTML .content-heading { display: flex; align-items: flex-end; flex-wrap: wrap; .primary-heading

    { flex-grow: 1; } } PRIMARY HEADING Secondary Heading
  69. HTML <ul class="users"> <li class="user"> <b class="user-name">Really really long username</b>

    <ul class="user-actions"> <li class="user-action"><a href="#">Edit</a></li> <li class="user-action"><a href="#">Arhive</a></li> <li class="user-action"><a href="#">Delete</a></li> </ul> </li> </ul> avery Swartz Matthew Farlymn kate grant Alex blom
  70. HTML <ul class="users"> <li class="user"> <b class="user-name">Really really long username</b>

    <ul class="user-actions"> <li class="user-action"><a href="#">Edit</a></li> <li class="user-action"><a href="#">Arhive</a></li> <li class="user-action"><a href="#">Delete</a></li> </ul> </li> </ul> avery Swartz Matthew Farlymn kate grant Alex blom
  71. HTML <ul class="users"> <li class="user"> <b class="user-name">Really really long username</b>

    <ul class="user-actions"> <li class="user-action"><a href="#">Edit</a></li> <li class="user-action"><a href="#">Arhive</a></li> <li class="user-action"><a href="#">Delete</a></li> </ul> </li> </ul> avery Swartz Matthew FaR. . . kate grant Alex blom
  72. CSs .user { display: flex; align-items: center; &-name { flex:

    1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &-actions { display: flex; } } avery Swartz Matthew FaR. . . kate grant Alex blom
  73. HTML <ul class="tabs"> <li class="tab"> <a href="tab-action">Tab 1</a> </li> <li

    class="tab"> <a href="tab-action">Tab 2</a> </li> <li class="tab"> <a href="tab-action">Tab 3</a> </li> <li class="tab"> <a href="tab-action">Tab 4</a> </li> </ul> Tab 1 Tab 2 Tab 3 Tab 3
  74. HTML <ul class="tabs"> <li class="tab"> <a href="tab-action">Tab 1</a> </li> <li

    class="tab"> <a href="tab-action">Tab 2</a> </li> <li class="tab"> <a href="tab-action">Tab 3</a> </li> <li class="tab"> <a href="tab-action">Tab 4</a> </li> </ul> Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Tab 2 Tab 5
  75. HTML .tabs { display: flex; flex-direction: row; } .tab {

    flex: 1; } Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Tab 2 Tab 5
  76. HTML <div class="cards"> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p

    class="card-description">Description</p> </div> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p class="card-description">Description</p> </div> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p class="card-description">Description</p> </div> ... </div> Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet
  77. CSs .cards { display: flex; flex-flow: row wrap; } .card

    { flex: 1 0 25%; } .card:nth-last-child(2):nth-child(4n) { min-width: 33%; } Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet
  78. CSs .cards { display: flex; flex-flow: row wrap; } .card

    { flex: 1 0 25%; } .card:nth-last-child(2):nth-child(4n) { min-width: 33%; } Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet
  79. CSs .cards { display: flex; flex-flow: row wrap; } .card

    { flex: 1 0 25%; } .card:nth-last-child(2):nth-child(4n) { min-width: 33%; } Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet Venenatis Sem Amet
  80. HTML <div class="cards"> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p

    class="card-description">Description</p> <button class="card-action">Buy</h2> </div> <div class="card"> <img src="icon.png"> <h2 class="card-title">Title</h2> <p class=“card-description">Description</p> <button class="card-action">Buy</h2> </div> ... </div> Venenatis Sem Amet Venenatis Sem Amet Venenatis Venenatis Sem Amet Venenatis Sem Amet Venenatis Venenatis Venenatis Sem Amet Venenatis Venenatis Sem Amet
  81. CSs .cards { display: flex; flex-wrap: wrap; justify-content: center; }

    .card { display: flex; flex-basis: 20%; flex-direction: column; &-action { margin-top: auto; } } Venenatis Sem Amet Venenatis Sem Amet Venenatis Venenatis Sem Amet Venenatis Sem Amet Venenatis Venenatis Venenatis Sem Amet Venenatis Venenatis Sem Amet
  82. FIN

  83. @bermonpainter officehours.io