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

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

Bermon Painter

June 04, 2016
Tweet

More Decks by Bermon Painter

Other Decks in Technology

Transcript

  1. RESPONSIVE DESIGN PATTERNS
    FOR AN EVOLVING WEB
    BERMON PAINTER

    View Slide

  2. PATTERNS & DESIGN SYSTEMS
    The foundation of repeatable interactions that
    when combined create rich and complex systems.

    View Slide

  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.

    View Slide

  4. GUIDELINES
    Collaborate WITH DESIGNERS AND DEVELOPERS

    View Slide

  5. GUIDELINES
    FOSTER CONSISTENCY

    View Slide

  6. GUIDELINES
    KEEP PATTERNS UP-TO-DATE

    View Slide

  7. GUIDELINES
    ENJOY EFFICIENCY

    View Slide

  8. CONVENTIONS
    THERE’s A LOT OUT THERE. FIND ONE THAT
    WORKS FOR YOUR TEAM, NOT JUST YOURSELF.

    View Slide

  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

    View Slide

  10. HTML
    .parent {…}
    .parent-child {…}
    .parent-child-grandchild {…}
    CONVENTIONS
    NAMING
    Parent-Grandchild

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. A BRIEF HISTORY IN LAYOUT
    The holy grail layout

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. A BRIEF HISTORY IN LAYOUT
    MEDIA OBJECT

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  32. A BRIEF HISTORY IN LAYOUT
    The Grid

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. PATTERNS
    The foundation of repeatable interactions that
    when combined create rich and complex systems.

    View Slide

  38. View Slide

  39. View Slide

  40. HTML



    Title
    Content...



    Title
    Content...


    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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  43. HTML







    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  50. HTML






    View Slide

  51. HTML






    View Slide

  52. HTML






    View Slide

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

    View Slide

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

    View Slide

  55. ACCESSIBILITy

    View Slide

  56. CSS
    HTML







    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    1
    2 3
    DOM ORDER

    View Slide

  57. CSS
    HTML







    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    2
    1 3
    VISUAL ORDER

    View Slide

  58. CSS
    HTML







    .container {
    display: flex;
    flex: 1;
    }
    .content {
    flex: 1;
    }
    .navigation {
    flex-basis: 30%;
    order: -1;
    }
    .sidebar {
    flex-basis: 20%;
    }
    1
    2 3
    TAB ORDER

    View Slide

  59. HTML



    Dashboard


    Loans


    Budget




    Settings


    Logout



    Dashboard Loans BudgeT SETTINGS LOGOUT

    View Slide

  60. HTML



    Dashboard


    Loans


    Budget




    Settings


    Logout



    Dashboard
    Loans
    Budget
    Settings
    Logout

    View Slide

  61. CSs
    .toolbars {
    display: flex;
    flex-direction: column;
    }
    Dashboard
    Loans
    Budget
    Settings
    Logout

    View Slide

  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

    View Slide

  63. HTML



    Dashboard


    Loans


    Budget




    Settings


    Logout



    Dashboard
    Loans
    Budget
    Settings
    Logout

    View Slide

  64. HTML
    .sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }
    Dashboard
    Loans
    Budget
    Settings
    Logout

    View Slide

  65. HTML



    Dashboard


    Loans


    Budget




    Settings


    Logout



    PRIMARY HEADING Secondary Heading

    View Slide

  66. HTML



    Dashboard


    Loans


    Budget




    Settings


    Logout



    PRIMARY HEADING
    Secondary Heading
    PRIMARY HEADING
    Secondary Heading

    View Slide

  67. HTML



    Dashboard


    Loans


    Budget




    Settings


    Logout



    PRIMARY HEADING
    Secondary Heading

    View Slide

  68. HTML
    .content-heading {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    .primary-heading {
    flex-grow: 1;
    }
    }
    PRIMARY HEADING
    Secondary Heading

    View Slide

  69. HTML


    Really really long username

    Edit
    Arhive
    Delete



    avery Swartz
    Matthew Farlymn
    kate grant
    Alex blom

    View Slide

  70. HTML


    Really really long username

    Edit
    Arhive
    Delete



    avery Swartz
    Matthew Farlymn
    kate grant
    Alex blom

    View Slide

  71. HTML


    Really really long username

    Edit
    Arhive
    Delete



    avery Swartz
    Matthew FaR. . .
    kate grant
    Alex blom

    View Slide

  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

    View Slide

  73. HTML


    Tab 1


    Tab 2


    Tab 3


    Tab 4


    Tab 1 Tab 2 Tab 3 Tab 3

    View Slide

  74. HTML


    Tab 1


    Tab 2


    Tab 3


    Tab 4


    Tab 1 Tab 2 Tab 3 Tab 4
    Tab 1 Tab 2 Tab 3 Tab 4
    Tab 1 Tab 2
    Tab 5

    View Slide

  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

    View Slide

  76. HTML



    Title
    Description



    Title
    Description



    Title
    Description

    ...

    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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  80. HTML



    Title
    Description
    Buy



    Title
    Description
    Buy

    ...

    Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis Venenatis
    Sem Amet
    Venenatis
    Sem Amet
    Venenatis Venenatis Venenatis
    Sem Amet
    Venenatis Venenatis
    Sem Amet

    View Slide

  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

    View Slide

  82. FIN

    View Slide

  83. @bermonpainter
    officehours.io

    View Slide