Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#24373 : Documentation/Utility/Display #24424

Merged
merged 5 commits into from
Oct 23, 2017
Merged

#24373 : Documentation/Utility/Display #24424

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5114a47
Use the 'spacing' template. More examples
aavmurphy Oct 18, 2017
d578117
suggested changes
aavmurphy Oct 19, 2017
8504f68
typo
aavmurphy Oct 19, 2017
b69d535
formatting
aavmurphy Oct 19, 2017
c600176
another ;
aavmurphy Oct 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 40 additions & 29 deletions docs/4.0/utilities/display.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,34 @@ group: utilities
toc: true
---

## Common `display` values
## How it Works
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We sentence case headings—## How it works.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nicely worded.


- `.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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

* `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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


Combine these classes to get the effect you need.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merge into first paragraph.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes


## Examples

{% example html %}
<div class="d-inline bg-success">d-inline</div>
Expand All @@ -28,25 +42,9 @@ Put them to use by applying any of the classes to an element of your choice. For

{% example html %}
<span class="d-block bg-primary">d-block</span>
<span class="d-block bg-primary">d-block</span>
{% endexample %}

{% example html %}
<div class="d-inline-block bg-warning">d-inline-block</div>
<div class="d-inline-block bg-warning">d-inline-block</div>
{% 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.
Expand All @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capitalize h in hide on these two lines

<div class="d-none d-lg-block">hide on screens smaller than lg</div>
{% 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 |
| --- | --- |
| `.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.

{% example html %}
<div class="d-print-none">Screen Only (hide on print)</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change text to Hide on print only

<div class="d-none d-print-block">Print Only (hide on screen)</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change text to Show on print only

<div class="d-none d-lg-block d-print-block">(lg or wider) screen and print only. Hide on smaller than lg screen.</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

{% endexample %}