projects / ipfire.org.git / blame
| Commit | Line | Data |
|---|---|---|
| 91e44d91 S |
1 | --- |
| 2 | layout: docs | |
| 3 | title: Responsive utilities | |
| 4 | description: Use responsive display utility classes for showing and hiding content by device, via media query. | |
| 5 | group: layout | |
| 6 | --- | |
| 7 | ||
| 8 | For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed. | |
| 9 | ||
| 10 | Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. | |
| 11 | ||
| 12 | ## Contents | |
| 13 | ||
| 14 | * Will be replaced with the ToC, excluding the "Contents" header | |
| 15 | {:toc} | |
| 16 | ||
| 17 | ## Available classes | |
| 18 | ||
| 19 | * The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports. | |
| 20 | * The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports. | |
| 21 | * There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size. | |
| 22 | * You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless. | |
| 23 | * These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases. | |
| 24 | ||
| 25 | <table class="table table-bordered table-striped responsive-utilities table-responsive"> | |
| 26 | <thead> | |
| 27 | <tr> | |
| 28 | <th></th> | |
| 29 | <th> | |
| 30 | Extra small devices | |
| 31 | <small>Portrait phones (<544px)</small> | |
| 32 | </th> | |
| 33 | <th> | |
| 34 | Small devices | |
| 35 | <small>Landscape phones (≥544px - <768px)</small> | |
| 36 | </th> | |
| 37 | <th> | |
| 38 | Medium devices | |
| 39 | <small>Tablets (≥768px - <992px)</small> | |
| 40 | </th> | |
| 41 | <th> | |
| 42 | Large devices | |
| 43 | <small>Desktops (≥992px - <1200px)</small> | |
| 44 | </th> | |
| 45 | <th> | |
| 46 | Extra large devices | |
| 47 | <small>Desktops (≥1200px)</small> | |
| 48 | </th> | |
| 49 | </tr> | |
| 50 | </thead> | |
| 51 | <tbody> | |
| 52 | <tr> | |
| 53 | <th scope="row"><code>.hidden-xs-down</code></th> | |
| 54 | <td class="is-hidden">Hidden</td> | |
| 55 | <td class="is-visible">Visible</td> | |
| 56 | <td class="is-visible">Visible</td> | |
| 57 | <td class="is-visible">Visible</td> | |
| 58 | <td class="is-visible">Visible</td> | |
| 59 | </tr> | |
| 60 | <tr> | |
| 61 | <th scope="row"><code>.hidden-sm-down</code></th> | |
| 62 | <td class="is-hidden">Hidden</td> | |
| 63 | <td class="is-hidden">Hidden</td> | |
| 64 | <td class="is-visible">Visible</td> | |
| 65 | <td class="is-visible">Visible</td> | |
| 66 | <td class="is-visible">Visible</td> | |
| 67 | </tr> | |
| 68 | <tr> | |
| 69 | <th scope="row"><code>.hidden-md-down</code></th> | |
| 70 | <td class="is-hidden">Hidden</td> | |
| 71 | <td class="is-hidden">Hidden</td> | |
| 72 | <td class="is-hidden">Hidden</td> | |
| 73 | <td class="is-visible">Visible</td> | |
| 74 | <td class="is-visible">Visible</td> | |
| 75 | </tr> | |
| 76 | <tr> | |
| 77 | <th scope="row"><code>.hidden-lg-down</code></th> | |
| 78 | <td class="is-hidden">Hidden</td> | |
| 79 | <td class="is-hidden">Hidden</td> | |
| 80 | <td class="is-hidden">Hidden</td> | |
| 81 | <td class="is-hidden">Hidden</td> | |
| 82 | <td class="is-visible">Visible</td> | |
| 83 | </tr> | |
| 84 | <tr> | |
| 85 | <th scope="row"><code>.hidden-xl-down</code></th> | |
| 86 | <td class="is-hidden">Hidden</td> | |
| 87 | <td class="is-hidden">Hidden</td> | |
| 88 | <td class="is-hidden">Hidden</td> | |
| 89 | <td class="is-hidden">Hidden</td> | |
| 90 | <td class="is-hidden">Hidden</td> | |
| 91 | </tr> | |
| 92 | <tr> | |
| 93 | <th scope="row"><code>.hidden-xs-up</code></th> | |
| 94 | <td class="is-hidden">Hidden</td> | |
| 95 | <td class="is-hidden">Hidden</td> | |
| 96 | <td class="is-hidden">Hidden</td> | |
| 97 | <td class="is-hidden">Hidden</td> | |
| 98 | <td class="is-hidden">Hidden</td> | |
| 99 | </tr> | |
| 100 | <tr> | |
| 101 | <th scope="row"><code>.hidden-sm-up</code></th> | |
| 102 | <td class="is-visible">Visible</td> | |
| 103 | <td class="is-hidden">Hidden</td> | |
| 104 | <td class="is-hidden">Hidden</td> | |
| 105 | <td class="is-hidden">Hidden</td> | |
| 106 | <td class="is-hidden">Hidden</td> | |
| 107 | </tr> | |
| 108 | <tr> | |
| 109 | <th scope="row"><code>.hidden-md-up</code></th> | |
| 110 | <td class="is-visible">Visible</td> | |
| 111 | <td class="is-visible">Visible</td> | |
| 112 | <td class="is-hidden">Hidden</td> | |
| 113 | <td class="is-hidden">Hidden</td> | |
| 114 | <td class="is-hidden">Hidden</td> | |
| 115 | </tr> | |
| 116 | <tr> | |
| 117 | <th scope="row"><code>.hidden-lg-up</code></th> | |
| 118 | <td class="is-visible">Visible</td> | |
| 119 | <td class="is-visible">Visible</td> | |
| 120 | <td class="is-visible">Visible</td> | |
| 121 | <td class="is-hidden">Hidden</td> | |
| 122 | <td class="is-hidden">Hidden</td> | |
| 123 | </tr> | |
| 124 | <tr> | |
| 125 | <th scope="row"><code>.hidden-xl-up</code></th> | |
| 126 | <td class="is-visible">Visible</td> | |
| 127 | <td class="is-visible">Visible</td> | |
| 128 | <td class="is-visible">Visible</td> | |
| 129 | <td class="is-visible">Visible</td> | |
| 130 | <td class="is-hidden">Hidden</td> | |
| 131 | </tr> | |
| 132 | </tbody> | |
| 133 | </table> | |
| 134 | ||
| 135 | <h2 id="responsive-utilities-print">Print classes</h2> | |
| 136 | <p>Similar to the regular responsive classes, use these for toggling content for print.</p> | |
| 137 | <table class="table table-bordered table-striped responsive-utilities table-responsive"> | |
| 138 | <thead> | |
| 139 | <tr> | |
| 140 | <th>Class</th> | |
| 141 | <th>Browser</th> | |
| 142 | <th>Print</th> | |
| 143 | </tr> | |
| 144 | </thead> | |
| 145 | <tbody> | |
| 146 | <tr> | |
| 147 | <th><code>.visible-print-block</code></th> | |
| 148 | <td class="is-hidden">Hidden</td> | |
| 149 | <td class="is-visible">Visible<br>(as <code>display: block</code>)</td> | |
| 150 | </tr> | |
| 151 | <tr> | |
| 152 | <th><code>.visible-print-inline</code></th> | |
| 153 | <td class="is-hidden">Hidden</td> | |
| 154 | <td class="is-visible">Visible<br>(as <code>display: inline</code>)</td> | |
| 155 | </tr> | |
| 156 | <tr> | |
| 157 | <th><code>.visible-print-inline-block</code></th> | |
| 158 | <td class="is-hidden">Hidden</td> | |
| 159 | <td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td> | |
| 160 | </tr> | |
| 161 | <tr> | |
| 162 | <th><code>.hidden-print</code></th> | |
| 163 | <td class="is-visible">Visible</td> | |
| 164 | <td class="is-hidden">Hidden</td> | |
| 165 | </tr> | |
| 166 | </tbody> | |
| 167 | </table> | |
| 168 | ||
| 169 | ## Test cases | |
| 170 | ||
| 171 | Resize your browser or load on different devices to test the responsive utility classes. | |
| 172 | ||
| 173 | Green checkmarks indicate the element **is visible** in your current viewport. | |
| 174 | ||
| 175 | <div class="row responsive-utilities-test visible-on"> | |
| 176 | <div class="col-6 col-sm-3"> | |
| 177 | <span class="hidden-sm-up visible">✔ Visible on extra small</span> | |
| 178 | <span class="hidden-xs-down not-visible">Extra small</span> | |
| 179 | </div> | |
| 180 | <div class="col-6 col-sm-3"> | |
| 181 | <span class="hidden-md-up visible">✔ Visible on small or narrower</span> | |
| 182 | <span class="hidden-sm-down not-visible">Small or narrower</span> | |
| 183 | </div> | |
| 184 | <div class="col-6 col-sm-3"> | |
| 185 | <span class="hidden-lg-up visible">✔ Visible on medium or narrower</span> | |
| 186 | <span class="hidden-md-down not-visible">Medium or narrower</span> | |
| 187 | </div> | |
| 188 | <div class="col-6 col-sm-3"> | |
| 189 | <span class="hidden-xl-up visible">✔ Visible on large or narrower</span> | |
| 190 | <span class="hidden-lg-down not-visible">Large or narrower</span> | |
| 191 | </div> | |
| 192 | </div> | |
| 193 | ||
| 194 | <hr> | |
| 195 | ||
| 196 | <div class="row responsive-utilities-test visible-on"> | |
| 197 | <div class="col-6 col-sm-3"> | |
| 198 | <span class="hidden-xs-down visible">✔ Visible on small or wider</span> | |
| 199 | <span class="hidden-sm-up not-visible">Small or wider</span> | |
| 200 | </div> | |
| 201 | <div class="col-6 col-sm-3"> | |
| 202 | <span class="hidden-sm-down visible">✔ Visible on medium or wider</span> | |
| 203 | <span class="hidden-md-up not-visible">Medium or wider</span> | |
| 204 | </div> | |
| 205 | <div class="col-6 col-sm-3"> | |
| 206 | <span class="hidden-md-down visible">✔ Visible on large or wider</span> | |
| 207 | <span class="hidden-lg-up not-visible">Large or wider</span> | |
| 208 | </div> | |
| 209 | <div class="col-6 col-sm-3"> | |
| 210 | <span class="hidden-lg-down visible">✔ Visible on extra large</span> | |
| 211 | <span class="hidden-xl-up not-visible">Extra large</span> | |
| 212 | </div> | |
| 213 | </div> | |
| 214 | ||
| 215 | <hr> | |
| 216 | ||
| 217 | <div class="row responsive-utilities-test visible-on"> | |
| 218 | <div class="col-6 col-sm-4"> | |
| 219 | <span class="hidden-sm-up visible">✔ Your viewport is exactly extra small</span> | |
| 220 | <span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span> | |
| 221 | </div> | |
| 222 | <div class="col-6 col-sm-4"> | |
| 223 | <span class="hidden-xs-down hidden-md-up visible">✔ Your viewport is exactly small</span> | |
| 224 | <span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span> | |
| 225 | </div> | |
| 226 | <div class="col-6 col-sm-4"> | |
| 227 | <span class="hidden-sm-down hidden-lg-up visible">✔ Your viewport is exactly medium</span> | |
| 228 | <span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span> | |
| 229 | </div> | |
| 230 | </div> | |
| 231 | ||
| 232 | <div class="row responsive-utilities-test visible-on"> | |
| 233 | <div class="col-6 col-sm-4"> | |
| 234 | <span class="hidden-md-down hidden-xl-up visible">✔ Your viewport is exactly large</span> | |
| 235 | <span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span> | |
| 236 | </div> | |
| 237 | <div class="col-6 col-sm-4"> | |
| 238 | <span class="hidden-lg-down visible">✔ Your viewport is exactly extra large</span> | |
| 239 | <span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span> | |
| 240 | </div> | |
| 241 | </div> |