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/#

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
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
37. PATTERNS The foundation of repeatable interactions that when combined create rich and complex systems.
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