├── 01-start ├── css │ └── styles.css ├── img │ └── image.jpg └── index.html ├── 02-finished-demo ├── css │ └── styles.css ├── img │ └── image.jpg └── index.html ├── README.md └── the-layout.pdf /01-start/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Box sizing rules */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Remove default margin */ 9 | body, 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | p, 15 | figure, 16 | blockquote, 17 | dl, 18 | dd { 19 | margin: 0; 20 | } 21 | 22 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 23 | ul[role="list"], 24 | ol[role="list"] { 25 | list-style: none; 26 | } 27 | 28 | /* Set core root defaults */ 29 | html { 30 | scroll-behavior: smooth; 31 | } 32 | 33 | /* Set core body defaults */ 34 | body { 35 | min-height: 100vh; 36 | text-rendering: optimizeSpeed; 37 | line-height: 1.5; 38 | } 39 | 40 | /* A elements that don't have a class get default styles */ 41 | a:not([class]) { 42 | text-decoration-skip-ink: auto; 43 | } 44 | 45 | /* Make images easier to work with */ 46 | img, 47 | picture { 48 | max-width: 100%; 49 | display: block; 50 | } 51 | 52 | /* Inherit fonts for inputs and buttons */ 53 | input, 54 | button, 55 | textarea, 56 | select { 57 | font: inherit; 58 | } 59 | 60 | /* Remove all animations and transitions for people that prefer not to see them */ 61 | @media (prefers-reduced-motion: reduce) { 62 | *, 63 | *::before, 64 | *::after { 65 | animation-duration: 0.01ms !important; 66 | animation-iteration-count: 1 !important; 67 | transition-duration: 0.01ms !important; 68 | scroll-behavior: auto !important; 69 | } 70 | } 71 | 72 | :root { 73 | --ff-primary: "Montserrat", sans-serif; 74 | --ff-accent: "Oswald", sans-serif; 75 | 76 | --clr-primary-400: #6f737f; 77 | --clr-primary-500: #3b4050; 78 | --clr-primary-600: #2e323f; 79 | --clr-accent-400: #a59678; 80 | --clr-neutral-100: #fff; 81 | 82 | --fs-400: 1.125rem; 83 | --fs-500: 1.25rem; 84 | --fs-600: 1.5rem; 85 | --fs-700: 1.875rem; 86 | --fs-xl: clamp(3rem, 1rem + 5vw, 5.75rem); 87 | } 88 | 89 | body { 90 | font-family: var(--ff-primary); 91 | font-size: var(--fs-400); 92 | background: red; 93 | } 94 | -------------------------------------------------------------------------------- /01-start/img/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/responsive-design-patterns/c696cb18573a783873a7c5635bb85d4b3183d9c3/01-start/img/image.jpg -------------------------------------------------------------------------------- /01-start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Design Patterns 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 |
21 |

Responsive Layouts don't have to be a struggle

22 |
23 |
24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut modi magni assumenda quae recusandae 25 | perspiciatis quidem mollitia sapiente dolores quaerat incidunt est ex cum.

26 | I want to learn 27 |
28 |
29 |
30 |
31 | 32 |
33 |
34 |
35 |
36 |

Mobile-first

37 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam molestias libero maiores culpa dolorem 38 | atque.

39 |
40 |
41 |

Efficient

42 |

Blanditiis, natus porro quae pariatur distinctio necessitatibus nostrum laudantium voluptatum magni 43 | aperiam nam quidem. Dignissimos.

44 |
45 |
46 |

Done right

47 |

Cum a consectetur velit reiciendis sint totam amet non temporibus architecto! Consectetur blanditiis ea 48 | officia.

49 |
50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 |
58 |

It doesn't have to be so hard

59 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum consectetur sint recusandae! Ex 60 | obcaecati sunt unde exercitationem dolore ipsa quasi.

61 | glass table with candles and various drinks on it 62 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem doloribus quam pariatur vero similique 63 | nostrum ab molestiae magnam debitis saepe.

64 |
65 |
66 |
67 |

Break it down

68 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ad quia earum architecto quidem eius? 69 |

70 |
71 |
72 |

Work your way up

73 |

Quam vero modi consequuntur! Eos, eaque! Nemo, dolorem incidunt libero tenetur architecto vitae ex 74 | voluptatum!

75 |
76 |
77 |

Break it down

78 |

Ad modi aperiam earum repudiandae consequuntur incidunt nam facere quas voluptate autem, consequatur 79 | explicabo soluta.

80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /02-finished-demo/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Box sizing rules */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Remove default margin */ 9 | body, 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | p, 15 | figure, 16 | blockquote, 17 | dl, 18 | dd { 19 | margin: 0; 20 | } 21 | 22 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 23 | ul[role="list"], 24 | ol[role="list"] { 25 | list-style: none; 26 | } 27 | 28 | /* Set core root defaults */ 29 | html { 30 | scroll-behavior: smooth; 31 | } 32 | 33 | /* Set core body defaults */ 34 | body { 35 | min-height: 100vh; 36 | text-rendering: optimizeSpeed; 37 | line-height: 1.5; 38 | } 39 | 40 | /* A elements that don't have a class get default styles */ 41 | a:not([class]) { 42 | text-decoration-skip-ink: auto; 43 | } 44 | 45 | /* Make images easier to work with */ 46 | img, 47 | picture { 48 | max-width: 100%; 49 | display: block; 50 | } 51 | 52 | /* Inherit fonts for inputs and buttons */ 53 | input, 54 | button, 55 | textarea, 56 | select { 57 | font: inherit; 58 | } 59 | 60 | /* Remove all animations and transitions for people that prefer not to see them */ 61 | @media (prefers-reduced-motion: reduce) { 62 | *, 63 | *::before, 64 | *::after { 65 | animation-duration: 0.01ms !important; 66 | animation-iteration-count: 1 !important; 67 | transition-duration: 0.01ms !important; 68 | scroll-behavior: auto !important; 69 | } 70 | } 71 | 72 | :root { 73 | --ff-primary: "Montserrat", sans-serif; 74 | --ff-accent: "Oswald", sans-serif; 75 | 76 | --clr-primary-400: #6f737f; 77 | --clr-primary-500: #3b4050; 78 | --clr-primary-600: #2e323f; 79 | --clr-accent-400: #a59678; 80 | --clr-neutral-100: #fff; 81 | 82 | --fs-400: 1.125rem; 83 | --fs-500: 1.25rem; 84 | --fs-600: 1.5rem; 85 | --fs-700: 1.875rem; 86 | --fs-xl: clamp(3rem, 1rem + 5vw, 5.75rem); 87 | } 88 | 89 | body { 90 | font-family: var(--ff-primary); 91 | font-size: var(--fs-400); 92 | line-height: 1.6; 93 | color: var(--clr-primary-600); 94 | } 95 | 96 | h1, 97 | h2, 98 | h3, 99 | h4 { 100 | font-family: var(--ff-accent); 101 | font-weight: 700; 102 | line-height: 1.1; 103 | } 104 | 105 | h1 { 106 | font-size: var(--fs-xl); 107 | } 108 | h2 { 109 | font-size: var(--fs-700); 110 | } 111 | h3 { 112 | font-size: var(--fs-600); 113 | } 114 | 115 | section, 116 | .primary-footer { 117 | padding: 4rem 0; 118 | } 119 | 120 | /* utility classes */ 121 | 122 | .container { 123 | /* padding: 0 1rem; 124 | max-width: 60rem; */ 125 | width: min(90%, 60rem); 126 | margin: 0 auto; 127 | /* border: 1px solid red; */ 128 | } 129 | 130 | .bg-dark { 131 | background-color: var(--clr-primary-600); 132 | color: var(--clr-neutral-100); 133 | } 134 | 135 | .bg-light { 136 | background-color: #eee; 137 | } 138 | 139 | .flow-content > * + * { 140 | margin-top: 1rem; 141 | } 142 | 143 | .split { 144 | display: flex; 145 | flex-direction: column; 146 | /* gap: 2em; */ 147 | } 148 | 149 | .split > * + * { 150 | margin: 2em 0 0 0; 151 | } 152 | 153 | @media (min-width: 50em) { 154 | .split { 155 | flex-direction: row; 156 | } 157 | 158 | .split > * { 159 | flex-shrink: 1; 160 | flex-basis: 100%; 161 | } 162 | 163 | .split > * + * { 164 | margin: 0 0 0 2em; 165 | } 166 | 167 | .big-column { 168 | flex-basis: 250%; 169 | } 170 | } 171 | 172 | /* components */ 173 | 174 | .widgets { 175 | display: flex; 176 | flex-wrap: wrap; 177 | gap: 1em; 178 | } 179 | 180 | .widget { 181 | padding: 1em; 182 | flex: 1 1 200px; 183 | } 184 | -------------------------------------------------------------------------------- /02-finished-demo/img/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/responsive-design-patterns/c696cb18573a783873a7c5635bb85d4b3183d9c3/02-finished-demo/img/image.jpg -------------------------------------------------------------------------------- /02-finished-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Design Patterns 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 |
21 |

Responsive Layouts don't have to be a struggle

22 |
23 |
24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut modi magni assumenda quae recusandae 25 | perspiciatis quidem mollitia sapiente dolores quaerat incidunt est ex cum.

26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 |

Mobile-first

36 | 37 |
38 |
39 |

Efficient

40 |

Blanditiis, natus porro quae pariatur distinctio necessitatibus nostrum laudantium voluptatum magni 41 | aperiam nam quidem. Dignissimos.

42 |
43 |
44 |

Done right

45 |

Cum a consectetur velit reiciendis sint totam amet non temporibus architecto! Consectetur blanditiis ea 46 | officia.

47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 |
55 |
56 |

It doesn't haveta to be so hard

57 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum consectetur sint recusandae! Ex 58 | obcaecati sunt unde exercitationem dolore ipsa quasi.

59 | glass table with candles and various drinks on it 60 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem doloribus quam pariatur vero similique 61 | nostrum ab molestiae magnam debitis saepe.

62 |
63 |
64 |
65 |

Break it down

66 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ad quia earum architecto quidem eius? 67 |

68 |
69 |
70 |

Work your way up

71 |

Quam vero modi consequuntur! Eos, eaque! Nemo, dolorem incidunt libero tenetur architecto vitae ex 72 | voluptatum!

73 |
74 |
75 |

Break it down

76 |

Ad modi aperiam earum repudiandae consequuntur incidunt nam facere quas voluptate autem, consequatur 77 | explicabo soluta.

78 |
79 |
80 |
81 |
82 |
83 |
84 | 85 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Responsive Design Made Easy 4 | 5 | **Start with the big picture and with global styles** 6 | 7 | - Typography, colours, vertical spacing and flow 8 | 9 | **Look at the big picture of the layout** 10 | 11 | - Look for big picture design/layout 12 | - See if there are any repeating patterns 13 | - Use utility classes for things that repeat a lot 14 | - container/wrapper for holding content 15 | - classes to control background colours and text colours 16 | - layout classes like `.split` or anything else that can be reused in different areas 17 | 18 | ## Start to narrow down 19 | 20 | - Start adding the changes required at the smaller scale 21 | - Minor tweaks, exceptions in certain areas 22 | - Focusing on individual components 23 | 24 | 25 | 26 | ## Common Design Patterns that you can use 27 | 28 | ### Split evenly with flexbox 29 | 30 | ```css 31 | .split { 32 | display: flex; 33 | flex-direction: row; 34 | } 35 | 36 | /* spacing between the children */ 37 | .split > * + * { 38 | margin: 1rem 0 0 0; 39 | } 40 | 41 | @media (min-width: Xem) { 42 | .split { 43 | flex-direction: column; 44 | } 45 | 46 | /* spacing between elements */ 47 | .split > * + * { 48 | margin: 0 0 0 1rem; 49 | } 50 | } 51 | 52 | .split > * { 53 | flex-basis: 100%; 54 | } 55 | 56 | /* make individual columns bigger/smaller columns where needed */ 57 | .big-column { flex-basis: 300%; } 58 | .small-column { flex-basis: 50%; } 59 | ``` 60 | 61 | 62 | 63 | #### same as above, but with grid 64 | 65 | The above is a bit cleaner is using grid, mostly thanks to `gap` being supported in all browsers. The only thing is, there is no way to adjust individual columns, so this would only work for situations where all columns need to be equal. 66 | 67 | ```css 68 | .split { 69 | display: grid; 70 | gap: 1rem; 71 | } 72 | 73 | @media (min-width: Xem) { 74 | .split { 75 | grid-auto-flow: columns; 76 | grid-auto-columns: 1fr; 77 | } 78 | } 79 | ``` 80 | 81 | 82 | 83 | ### Reactive layout with flexbox 84 | 85 | Can lead to unbalanced layouts at certain screen sizes, so it really depends on the layout you are after. 86 | 87 | The `flex-basis` on the children needs to be a small number, in general, as we're relying on flex-grow to let them stretch. If it is too big, they'll just go to that size and never be columns, because of the `flex-wrap`. 88 | 89 | Also, you'll want to set a `min-width` on the children to prevent them from becoming too small. Even with `flex-shrink`, and element cannot be smaller than it's `min-width`. 90 | 91 | ```css 92 | .parent { 93 | display: flex; 94 | flex-wrap: wrap; 95 | gap: 1rem; /* not currently supported in Safari */ 96 | } 97 | 98 | .parent > * { 99 | min-width: Xrem; 100 | flex: 1 1 10%; 101 | } 102 | 103 | ``` 104 | 105 | 106 | 107 | **** 108 | 109 | ## Things I mentioned 110 | 111 | - [A modern CSS reset](https://hankchizljaw.com/wrote/a-modern-css-reset/) by Andy Bell[Managing Flow and Rhythm with CSS Custom Properties](https://24ways.org/2018/managing-flow-and-rhythm-with-css-custom-properties/) by Andy Bell 112 | - [The Holy Albatross](https://heydonworks.com/article/the-flexbox-holy-albatross/) by Heydon Pickering. This is incredibly useful! But to make a point about accessibility and the loopholes we make others jump through, for the time being you'll have to disable JavaScript to access Heydon's site. I did make [a YouTube video where I explored it](https://youtu.be/fuiEYR6Hoe0), but I didn't really show the true power of it, it just scratches the surface. 113 | - [caniuse.com](https://caniuse.com/) - check browser support 114 | - [PostCSS](https://postcss.org/) - Help with supporting older browsers, and a lot more. A bit like Babel for CSS 115 | - [CSS Algorithms](https://youtu.be/panKf9hzUfQ) - A fantastic talk by Lara Schenck looking at enterprise level CSS solutions, and an approach to testing CSS 116 | - [Why is CSS so weird?](https://youtu.be/aHUtMbJw8iA) - I didn't mention this, but it's a great video by Miriam Suzanne that looks at why CSS is so weird. Really highly recommended 117 | - I also mentioned Static Site generators, specifically [Eleventy](https://www.11ty.dev/) and [Hugo](https://gohugo.io/). I'm a fan of Eleventy as it's build on vanilla JS. 118 | - [All about CSS Custom Properties](https://youtube.com/playlist?list=PL4-IK0AVhVjOT2KBB5TSbD77OmfHvtqUi) - This is a bit of self-promotion with a series on them from my YT channel. The first video should be enough to get you started with them, and then each video dives in from there, most of them are pretty short. 119 | 120 | 121 | 122 | ## General resources 123 | 124 | - [Grid by Example](https://gridbyexample.com/patterns/) by Rachel Andrew - This has a bunch of common layouts built out with Grid 125 | - [CSS-Tricks](https://css-tricks.com/) - my go to for keeping up with CSS, and web development at large 126 | 127 | 128 | 129 | ## Where you can find me 130 | 131 | - [My YouTube channel](https://www.youtube.com/kevinpowell) - where most of my stuff is 132 | - [My Twitch](https://www.twitch.tv/kevinpowellcss) - Live coding Mondays and Thursdays, starting again in January 133 | - [@KevinJPowell](https://twitter.com/KevinJPowell) on Twitter 134 | - [My website](https://www.kevinpowell.co/) (neglected as of late) 135 | - [My newsletter](https://www.kevinpowell.co/newsletter/) (email every Sunday with what I've been up to and general musings) -------------------------------------------------------------------------------- /the-layout.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/responsive-design-patterns/c696cb18573a783873a7c5635bb85d4b3183d9c3/the-layout.pdf --------------------------------------------------------------------------------