From 5114a4758d9b26fc5ecb30f4f4d2e544d0a1e434 Mon Sep 17 00:00:00 2001 From: Andrew Murphy Date: Wed, 18 Oct 2017 22:28:09 +0100 Subject: [PATCH 1/5] Use the 'spacing' template. More examples The most important change is to say "for the named breakpoint ( `sm`, `md`, `lg`, `xl`) and above". The existing "hiding elements para" (not yet live) is exactly what's needed. Keep simple for "english as a second language" people (e.g. hide not hidden) --- docs/4.0/utilities/display.md | 69 ++++++++++++++++++++--------------- 1 file changed, 40 insertions(+), 29 deletions(-) diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md index bfb7f091ea..f62f5cd47e 100644 --- a/docs/4.0/utilities/display.md +++ b/docs/4.0/utilities/display.md @@ -6,20 +6,34 @@ group: utilities toc: true --- -## Common `display` values +## How it Works -The [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) accepts a handful of values and we support many of them with utility classes. We purposefully don't provide every value as a utility, so here's what we support: +Change the `display` value of elements with our responsive-friendly display utility classes. -- `.d-none` -- `.d-inline` -- `.d-inline-block` -- `.d-block` -- `.d-table` -- `.d-table-cell` -- `.d-flex` -- `.d-inline-flex` +The [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property accepts lots of values, and we support many of them with utility classes. We purposefully don't provide them all. -Put them to use by applying any of the classes to an element of your choice. For example, here's how you could use the inline, block, or inline-block utilities (the same applies to the other classes). +## Notation + +The classes are named using the format +* `d-{display}` - for all content +* `d-{breakpoint}-{display}` - ** for the named breakpoint ( `sm`, `md`, `lg`, `xl`) and above.** + +Where *display* is one of: + +* `none` +* `inline` +* `inline-block` +* `block` +* `table` +* `table-cell` +* `flex` +* `inline-flex` + +For example, `d-lg-none` sets `display:none` on screens larger than the lg breakpoint. + +Combine these classes to get the effect you need. + +## Examples {% example html %}
d-inline
@@ -28,25 +42,9 @@ Put them to use by applying any of the classes to an element of your choice. For {% example html %} d-block +d-block {% endexample %} -{% example html %} -
d-inline-block
-
d-inline-block
-{% endexample %} - -Responsive variations also exist for every single utility mentioned above. - -{% for bp in site.data.breakpoints %} -- `.d{{ bp.abbr }}-none` -- `.d{{ bp.abbr }}-inline` -- `.d{{ bp.abbr }}-inline-block` -- `.d{{ bp.abbr }}-block` -- `.d{{ bp.abbr }}-table` -- `.d{{ bp.abbr }}-table-cell` -- `.d{{ bp.abbr }}-flex` -- `.d{{ bp.abbr }}-inline-flex`{% endfor %} - ## Hiding Elements For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size. @@ -70,9 +68,14 @@ To show an element only on a given interval of screen sizes you can combine one | Visible only on lg | `d-none d-lg-block d-xl-none` | | Visible only on xl | `d-none d-xl-block` | +{% example html %} +
hide on screens wider than lg
+
hide on screens smaller than lg
+{% endexample %} + ## Display in print -Change the `display` value of elements when printing with our print display utilities. +Change the `display` value of elements when printing with our print display utility classes. | Class | Print style | | --- | --- | @@ -80,3 +83,11 @@ Change the `display` value of elements when printing with our print display util | `.d-print-inline` | Applies `display: inline` to the element when printing | | `.d-print-inline-block` | Applies `display: inline-block` to the element when printing | | `.d-print-none` | Applies `display: none` to the element when printing | + +The print and display classes can be combined. + +{% example html %} +
Screen Only (hide on print)
+
Print Only (hide on screen)
+
(lg or wider) screen and print only. Hide on smaller than lg screen.
+{% endexample %} From d578117c73701bd0f6e7be42fccf88e781a4845f Mon Sep 17 00:00:00 2001 From: Andrew Murphy Date: Thu, 19 Oct 2017 21:14:08 +0100 Subject: [PATCH 2/5] suggested changes --- docs/4.0/utilities/display.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md index f62f5cd47e..8d532279f9 100644 --- a/docs/4.0/utilities/display.md +++ b/docs/4.0/utilities/display.md @@ -6,17 +6,17 @@ group: utilities toc: true --- -## How it Works +## How it works -Change the `display` value of elements with our responsive-friendly display utility classes. - -The [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property accepts lots of values, and we support many of them with utility classes. We purposefully don't provide them all. +Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our responsive display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need. ## Notation -The classes are named using the format -* `d-{display}` - for all content -* `d-{breakpoint}-{display}` - ** for the named breakpoint ( `sm`, `md`, `lg`, `xl`) and above.** +Display utility classes that apply to all [breakpoints]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/#responsive-breakpoints), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation. + +As such, the classes are named using the format: +* `.d-{value}` for `xs` +* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`. Where *display* is one of: @@ -29,9 +29,9 @@ Where *display* is one of: * `flex` * `inline-flex` -For example, `d-lg-none` sets `display:none` on screens larger than the lg breakpoint. +The media queries effect screen widths with the given breakpoint *or larger*. -Combine these classes to get the effect you need. +For example, `.d-lg-none` sets `display: none;` on both `lg' and `xl` screens. ## Examples @@ -87,7 +87,7 @@ Change the `display` value of elements when printing with our print display util The print and display classes can be combined. {% example html %} -
Screen Only (hide on print)
-
Print Only (hide on screen)
-
(lg or wider) screen and print only. Hide on smaller than lg screen.
+
Screen Only (Hide on print only)
+
Print Only (Hide on screen only)
+
Hide up to large on screen, but always show on print
{% endexample %} From 8504f6881576343889b2bf1c8ced9cca7ee9eae5 Mon Sep 17 00:00:00 2001 From: Andrew Murphy Date: Thu, 19 Oct 2017 21:15:07 +0100 Subject: [PATCH 3/5] typo --- docs/4.0/utilities/display.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md index 8d532279f9..861a6d95f9 100644 --- a/docs/4.0/utilities/display.md +++ b/docs/4.0/utilities/display.md @@ -31,7 +31,7 @@ Where *display* is one of: The media queries effect screen widths with the given breakpoint *or larger*. -For example, `.d-lg-none` sets `display: none;` on both `lg' and `xl` screens. +For example, `.d-lg-none` sets `display: none;` on both `lg` and `xl` screens. ## Examples From b69d5358226bf54bcaa33569117847cdb42d534d Mon Sep 17 00:00:00 2001 From: Andrew Murphy Date: Thu, 19 Oct 2017 21:22:40 +0100 Subject: [PATCH 4/5] formatting --- docs/4.0/utilities/display.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md index 861a6d95f9..377ca29031 100644 --- a/docs/4.0/utilities/display.md +++ b/docs/4.0/utilities/display.md @@ -51,22 +51,22 @@ For faster mobile-friendly development, use responsive display classes for showi To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation. -To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none.d-md-block.d-xl-none` will hide the element for all screen sizes except on medium and large devices. +To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices. | Screen Size | Class | | --- | --- | -| Hidden on all | `d-none` | -| Hidden only on xs | `d-none d-sm-block` | -| Hidden only on sm | `d-sm-none d-md-block` | -| Hidden only on md | `d-md-none d-lg-block` | -| Hidden only on lg | `d-lg-none d-xl-block` | -| Hidden only on xl | `d-xl-none` | -| Visible on all | `d-block` | -| Visible only on xs | `d-block d-sm-none` | -| Visible only on sm | `d-none d-sm-block d-md-none` | -| Visible only on md | `d-none d-md-block d-lg-none` | -| Visible only on lg | `d-none d-lg-block d-xl-none` | -| Visible only on xl | `d-none d-xl-block` | +| Hidden on all | `.d-none` | +| Hidden only on xs | `.d-none .d-sm-block` | +| Hidden only on sm | `.d-sm-none .d-md-block` | +| Hidden only on md | `.d-md-none .d-lg-block` | +| Hidden only on lg | `.d-lg-none .d-xl-block` | +| Hidden only on xl | `.d-xl-none` | +| Visible on all | `.d-block` | +| Visible only on xs | `.d-block .d-sm-none` | +| Visible only on sm | `.d-none .d-sm-block .d-md-none` | +| Visible only on md | `.d-none .d-md-block .d-lg-none` | +| Visible only on lg | `.d-none .d-lg-block .d-xl-none` | +| Visible only on xl | `.d-none .d-xl-block` | {% example html %}
hide on screens wider than lg
@@ -79,10 +79,10 @@ Change the `display` value of elements when printing with our print display util | Class | Print style | | --- | --- | -| `.d-print-block` | Applies `display: block` to the element when printing | -| `.d-print-inline` | Applies `display: inline` to the element when printing | -| `.d-print-inline-block` | Applies `display: inline-block` to the element when printing | -| `.d-print-none` | Applies `display: none` to the element when printing | +| `.d-print-block` | Applies `display: block;` to the element when printing | +| `.d-print-inline` | Applies `display: inline;` to the element when printing | +| `.d-print-inline-block` | Applies `display: inline-block;` to the element when printing | +| `.d-print-none` | Applies `display: none;` to the element when printing | The print and display classes can be combined. From c600176c2a6e702646c6912e31556922f32054e0 Mon Sep 17 00:00:00 2001 From: Andrew Murphy Date: Thu, 19 Oct 2017 21:34:45 +0100 Subject: [PATCH 5/5] another ; --- docs/4.0/utilities/display.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md index 377ca29031..b2a9b1876e 100644 --- a/docs/4.0/utilities/display.md +++ b/docs/4.0/utilities/display.md @@ -12,7 +12,7 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US ## Notation -Display utility classes that apply to all [breakpoints]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/#responsive-breakpoints), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation. +Display utility classes that apply to all [breakpoints]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/#responsive-breakpoints), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation. As such, the classes are named using the format: * `.d-{value}` for `xs`