#24373 : Documentation/Utility/Display #24424

aavmurphy · 2017-10-18T21:34:50Z

Use the template from utility=spacing
The most important change is to say the various .d-lg-inline classes work "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)
Printing: Add print-only and screen-only example

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)

mdo · 2017-10-19T02:56:56Z

docs/4.0/utilities/display.md

@@ -6,20 +6,34 @@ group: utilities
 toc: true
 ---

-## Common `display` values
+## How it Works


We sentence case headings—## How it works.

i'll get the hang of it ... :)

mdo · 2017-10-19T02:57:29Z

docs/4.0/utilities/display.md


-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.


This sentence, the following paragraph, and the last paragraph under notation should be combined.

Change the value of the display property 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.

Markdown for copy-pasting:

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.

nicely worded.

mdo · 2017-10-19T03:02:54Z

docs/4.0/utilities/display.md

-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 


Let's use the same approach from the Spacing docs. Also, always include a line between paragraphs and always use punctuation.

Display utility classes that apply to all 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 and .d-{breakpoint}-{value} for sm, md, lg, and xl.

Markdown for copy-pasting:

Display utility classes that apply to all 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` and `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`.

still like mine, but compromised with bullet points to make it stand out for newbies.

mdo · 2017-10-19T03:08:23Z

docs/4.0/utilities/display.md

+* `flex`
+* `inline-flex`
+
+For example, `d-lg-none` sets `display:none` on screens larger than the lg breakpoint.


When writing classes, use the . in the beginning.

When writing property: value;, use a space and trailing ;.

When using the breakpoint shorthand (e.g., "lg"), write it with backticks to render it as code: lg.

got you. moved the (this breakpoint or wider) emphasis to here

its what confused me at first, the layout/overview/#breakpoints page only mentions xs in a comment, so i hadn't noticed it

mdo · 2017-10-19T03:10:08Z

docs/4.0/utilities/display.md

+
+For example, `d-lg-none` sets `display:none` on screens larger than the lg breakpoint.
+
+Combine these classes to get the effect you need.


Merge into first paragraph.

mdo · 2017-10-19T03:12:34Z

docs/4.0/utilities/display.md

@@ -70,13 +68,26 @@ 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 %}
+<div class="d-lg-none">hide on screens wider than lg</div>


Capitalize h in hide on these two lines

mdo · 2017-10-19T03:12:57Z

docs/4.0/utilities/display.md

+The print and display classes can be combined.
+
+{% example html %}
+<div class="d-print-none">Screen Only (hide on print)</div>


Change text to Hide on print only

mdo · 2017-10-19T03:13:49Z

docs/4.0/utilities/display.md

+
+{% example html %}
+<div class="d-print-none">Screen Only (hide on print)</div>
+<div class="d-none d-print-block">Print Only (hide on screen)</div>


Change text to Show on print only

mdo · 2017-10-19T03:14:27Z

docs/4.0/utilities/display.md

+{% example html %}
+<div class="d-print-none">Screen Only (hide on print)</div>
+<div class="d-none d-print-block">Print Only (hide on screen)</div>
+<div class="d-none d-lg-block d-print-block">(lg or wider) screen and print only. Hide on smaller than lg screen.</div>


Change text to Hide up to large on screen, but always show on print

aavmurphy · 2017-10-19T20:41:47Z

@mdo
Appreciate the detailed comments!
There were a few more ".class" and "property: value;" changes.
Please check the breakpoints URL, (line 10 - I couldn't test it)
Thanks

aavmurphy changed the title ~~Documentation/Utility/Display~~ #24373 : Documentation/Utility/Display Oct 18, 2017

mdo added css docs v4 labels Oct 19, 2017

mdo requested changes Oct 19, 2017

View reviewed changes

aavmurphy added 4 commits October 19, 2017 21:14

suggested changes

d578117

typo

8504f68

formatting

b69d535

another ;

c600176

mdo mentioned this pull request Oct 23, 2017

Beta 3 ship list #24439

Closed

mdo merged commit c600176 into twbs:v4-dev Oct 23, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#24373 : Documentation/Utility/Display #24424

#24373 : Documentation/Utility/Display #24424

aavmurphy commented Oct 18, 2017

mdo Oct 19, 2017

aavmurphy Oct 19, 2017

mdo Oct 19, 2017

aavmurphy Oct 19, 2017

mdo Oct 19, 2017

aavmurphy Oct 19, 2017

mdo Oct 19, 2017

aavmurphy Oct 19, 2017

mdo Oct 19, 2017

aavmurphy Oct 19, 2017

mdo Oct 19, 2017

mdo Oct 19, 2017

mdo Oct 19, 2017

mdo Oct 19, 2017

aavmurphy Oct 19, 2017

aavmurphy commented Oct 19, 2017


		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.


		For example, `d-lg-none` sets `display:none` on screens larger than the lg breakpoint.

		Combine these classes to get the effect you need.

#24373 : Documentation/Utility/Display #24424

#24373 : Documentation/Utility/Display #24424

Conversation

aavmurphy commented Oct 18, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aavmurphy commented Oct 19, 2017