Slide 1
Slide 1 text
RESPONSIVE DESIGN PATTERNS
FOR AN EVOLVING WEB
BERMON PAINTER
Slide 2
Slide 2 text
PATTERNS & DESIGN SYSTEMS
The foundation of repeatable interactions that
when combined create rich and complex systems.
Slide 3
Slide 3 text
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.
Slide 4
Slide 4 text
GUIDELINES
Collaborate WITH DESIGNERS AND DEVELOPERS
Slide 5
Slide 5 text
GUIDELINES
FOSTER CONSISTENCY
Slide 6
Slide 6 text
GUIDELINES
KEEP PATTERNS UP-TO-DATE
Slide 7
Slide 7 text
GUIDELINES
ENJOY EFFICIENCY
Slide 8
Slide 8 text
CONVENTIONS
THERE’s A LOT OUT THERE. FIND ONE THAT
WORKS FOR YOUR TEAM, NOT JUST YOURSELF.
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
HTML
.parent {…}
.parent-child {…}
.parent-child-grandchild {…}
CONVENTIONS
NAMING
Parent-Grandchild
Slide 11
Slide 11 text
HTML
.navigation {…}
.navigation-item {…}
.navigation-item-action {…}
CONVENTIONS
NAMING
Parent-Grandchild
Slide 12
Slide 12 text
HTML
.plural-items {…€¦}
.singular-item {…€¦}
CONVENTIONS
NAMING
PLural-Singular
Slide 13
Slide 13 text
HTML
.images {…}
.image {…}
CONVENTIONS
NAMING
PLural-Singular
Slide 14
Slide 14 text
A BRIEF HISTORY IN LAYOUT
The holy grail layout
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
A BRIEF HISTORY IN LAYOUT
MEDIA OBJECT
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 text
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.
Slide 28
Slide 28 text
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.
Slide 29
Slide 29 text
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.
Slide 30
Slide 30 text
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.
Slide 31
Slide 31 text
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.
Slide 32
Slide 32 text
A BRIEF HISTORY IN LAYOUT
The Grid
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
PATTERNS
The foundation of repeatable interactions that
when combined create rich and complex systems.
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
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.Slide 41
Slide 41 text
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.
Slide 42
Slide 42 text
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.
Slide 43
Slide 43 text
HTML
Slide 44
Slide 44 text
HTML
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
Slide 45
Slide 45 text
HTML
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
Slide 46
Slide 46 text
HTML
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
.content {
flex: 1;
}
Slide 47
Slide 47 text
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;
}
Slide 48
Slide 48 text
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%;
}
Slide 49
Slide 49 text
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;
}
Slide 50
Slide 50 text
HTML
Slide 51
Slide 51 text
HTML
Slide 52
Slide 52 text
HTML
Slide 53
Slide 53 text
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;
}
Slide 54
Slide 54 text
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%;
}
}
Slide 55
Slide 55 text
ACCESSIBILITy
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
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
Slide 61
Slide 61 text
CSs
.toolbars {
display: flex;
flex-direction: column;
}
Dashboard
Loans
Budget
Settings
Logout
Slide 62
Slide 62 text
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
Slide 64
Slide 64 text
HTML
.sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Dashboard
Loans
Budget
Settings
Logout
Slide 68
Slide 68 text
HTML
.content-heading {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
.primary-heading {
flex-grow: 1;
}
}
PRIMARY HEADING
Secondary Heading
Slide 72
Slide 72 text
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
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
HTML
...
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
Title
Description
Title
Description
Title
Description
Slide 77
Slide 77 text
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
Slide 78
Slide 78 text
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
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
HTML
...
Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis Venenatis
Sem Amet
Venenatis
Sem Amet
Venenatis Venenatis Venenatis
Sem Amet
Venenatis Venenatis
Sem Amet
Title
Description
Buy
Title
Description
BuySlide 81
Slide 81 text
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
Slide 82
Slide 82 text
FIN
Slide 83
Slide 83 text
@bermonpainter
officehours.io