|
| 1 | +# Responsive Best Practices |
| 2 | + |
| 3 | +## Mobile First |
| 4 | + |
| 5 | +Our philosophy is that _the first breakpoint is no breakpoint_. |
| 6 | + |
| 7 | +There are plenty of good reasons to approach [design](https://www.lukew.com/ff/entry.asp?933) and [content strategy](https://alistapart.com/article/your-content-now-mobile) from this perspective, and the same goes for styling. An experience shouldn't depend on a specific viewport width work well. |
| 8 | + |
| 9 | +When writing your CSS, a mobile-first mindset will help keep your code DRY. *Using `min-width` only queries is the key.* |
| 10 | + |
| 11 | +Instead of: |
| 12 | + |
| 13 | +``` |
| 14 | +// Button |
| 15 | +// === |
| 16 | +
|
| 17 | +.c-button { |
| 18 | + @media screen and (max-width: 460px) { |
| 19 | + padding: 10px; |
| 20 | + font-size: 12px; |
| 21 | + } |
| 22 | +
|
| 23 | + @media screen and (min-width: 461px) and (max-width: 768px) { |
| 24 | + padding: 10px; |
| 25 | + font-size: 14px; |
| 26 | + } |
| 27 | +} |
| 28 | +``` |
| 29 | + |
| 30 | +Try: |
| 31 | + |
| 32 | +``` |
| 33 | +// Button |
| 34 | +// === |
| 35 | +
|
| 36 | +.c-button { |
| 37 | + padding: 10px; |
| 38 | + font-size: 12px; |
| 39 | +
|
| 40 | + @media screen and (min-width: 461px) { |
| 41 | + font-size: 14px; |
| 42 | + } |
| 43 | +} |
| 44 | +``` |
| 45 | + |
| 46 | +Now instead of re-writing styles at each breakpoint, we're only adding on what we need to! |
| 47 | + |
| 48 | +Exceptions obviously exist. If you are styling markup that gets replaced at a specific breakpoint (a drawer style navigation that switches to a mega-menu for wider screens is a good example), it is best to use media queries that are scoped to a particular range. |
| 49 | + |
| 50 | + |
| 51 | +## Use 4 or Less Major Breakpoints |
| 52 | + |
| 53 | +Good designs are based on content and context, not specific device sizes, and our styles should be as well. Work with the designers on your team to figure out what these breakpoints are, and use 4 or less. Remember, if you have 4 _major_ breakpoints, you'll have 5 different layout changes because the first breakpoint is _no_ breakpoint. |
| 54 | + |
| 55 | +_Major_ breakpoints are project-wide variables, and follow the naming convention `$small-breakpoint`, `$medium-breakpoint`, `$large-breakpoint`, and `$x-large-breakpoint`. Keep the number of _major_ breakpoints small and consistent–it makes code easier to understand and maintain, and reduces the element of surprise. |
| 56 | + |
| 57 | +_Minor_ breakpoints are one-offs that are used for smaller design changes, such as font-sizing, in between _major_ breakpoints. They are not ideal, but often necessary. Keep them to a minimum if possible. |
| 58 | + |
| 59 | + |
| 60 | +## Keep Your Queries With Their Components |
| 61 | + |
| 62 | +SCSS allows you to write media queries inside a declaration. This has several advantages, especially with more complicated components or in larger SCSS files: |
| 63 | + |
| 64 | +1. All component and sub-component styles, including modifiers, are in one place |
| 65 | +1. You can easily see what you are building on top of |
| 66 | +1. Less scrolling and reduced cognitive overhead |
| 67 | +1. Debugger is simpler |
| 68 | + |
| 69 | +Instead of: |
| 70 | + |
| 71 | +``` |
| 72 | +// Some Component |
| 73 | +// === |
| 74 | +
|
| 75 | +.c-some-component { |
| 76 | + padding: 10px; |
| 77 | + display: inline; |
| 78 | + border: 1px solid red; |
| 79 | + font-size: 16px; |
| 80 | +
|
| 81 | + &.c--some-modifier { |
| 82 | + font-weight: bold; |
| 83 | + } |
| 84 | +} |
| 85 | +
|
| 86 | +.c-component__thing { |
| 87 | + display: none; |
| 88 | +} |
| 89 | +
|
| 90 | +.c-component__other-thing { |
| 91 | + ... |
| 92 | +} |
| 93 | +
|
| 94 | +... |
| 95 | +
|
| 96 | +@media screen and (min-width: $small) { |
| 97 | + .c-some-component { |
| 98 | + padding: 15px; |
| 99 | + font-size: 18px; |
| 100 | +
|
| 101 | + &.c--some-modifier { |
| 102 | + font-color: red; |
| 103 | + } |
| 104 | + } |
| 105 | +
|
| 106 | + .c-component__thing { |
| 107 | + display: block; |
| 108 | + background-color: blue; |
| 109 | + } |
| 110 | +} |
| 111 | +``` |
| 112 | + |
| 113 | +Try: |
| 114 | + |
| 115 | +``` |
| 116 | +// Some Component |
| 117 | +// === |
| 118 | +
|
| 119 | +.c-some-component { |
| 120 | + padding: 10px; |
| 121 | + display: inline; |
| 122 | + border: 1px solid red; |
| 123 | + font-size: 16px; |
| 124 | +
|
| 125 | + &.c--some-modifier { |
| 126 | + font-weight: bold; |
| 127 | + } |
| 128 | +
|
| 129 | + @media screen and (min-width: $small-breakpoint) { |
| 130 | + padding: 15px; |
| 131 | + font-size: 18px; |
| 132 | +
|
| 133 | + &.c--some-modifier { |
| 134 | + font-color: red; |
| 135 | + } |
| 136 | + } |
| 137 | +} |
| 138 | +
|
| 139 | +.c-component__thing { |
| 140 | + display: none; |
| 141 | +
|
| 142 | + @media screen and (min-width: $small-breakpoint) { |
| 143 | + display: block; |
| 144 | + background-color: blue; |
| 145 | + } |
| 146 | +} |
| 147 | +
|
| 148 | +.c-component__other-thing { |
| 149 | + ... |
| 150 | +} |
| 151 | +``` |
| 152 | + |
| 153 | +Continue on to [Localization and Theming Best Practices →](../localization-and-theming-best-practices/readme.md) |
0 commit comments