From ed1de86794cc0911dc7a3dbbf3bb9dfe421ef4b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 5 Mar 2017 12:20:44 -0800 Subject: Update spacer utilities (#22123) * Drop -x and -y as they're all the same - Also move -width to elsewhere in the vars because it makes no sense by spacers. - Update values of -x and -y across main Sass and docs Sass. * Update docs to reflect changes; link to spacing utils from options page --- docs/utilities/spacing.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 0a5132941..0978e195d 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -35,11 +35,11 @@ Where *sides* is one of: Where *size* is one of: * `0` - for classes that eliminate the `margin` or `padding` by setting it to `0` -* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .25` or `$spacer-y * .25` -* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .5` or `$spacer-y * .5` -* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y` -* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5` -* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3` +* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25` or `$spacer * .25` +* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5` or `$spacer * .5` +* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer` or `$spacer` +* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5` or `$spacer * 1.5` +* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3` or `$spacer * 3` (You can add more sizes by adding entries to the `$spacers` Sass map variable.) @@ -53,16 +53,16 @@ Here are some representative examples of these classes: } .ml-1 { - margin-left: ($spacer-x * .25) !important; + margin-left: ($spacer * .25) !important; } .px-2 { - padding-left: ($spacer-x * .5) !important; - padding-right: ($spacer-x * .5) !important; + padding-left: ($spacer * .5) !important; + padding-right: ($spacer * .5) !important; } .p-3 { - padding: $spacer-y $spacer-x !important; + padding: $spacer $spacer !important; } {% endhighlight %} -- cgit v1.2.3 From ebe405a01b721b667a37ae5c249077f4cdb3b8bd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 3 Mar 2017 12:57:16 -0800 Subject: Start rearranging the docs for a utilities update MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit — Rename display docs page — Move print display utils to display utils page — Drop remaining of responsive utils page as it's being replaced with display utils — Update nav to reflect changes --- docs/utilities/display-property.md | 29 ----------------- docs/utilities/display.md | 64 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 29 deletions(-) delete mode 100644 docs/utilities/display-property.md create mode 100644 docs/utilities/display.md (limited to 'docs/utilities') diff --git a/docs/utilities/display-property.md b/docs/utilities/display-property.md deleted file mode 100644 index 50ea29367..000000000 --- a/docs/utilities/display-property.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: docs -title: Display property -group: utilities ---- - -Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively). - -To make an element `display: none`, use our [responsive utilities]({{ site.baseurl }}/layout/responsive-utilities/) instead. - -{% example html %} -
Inline
-
Inline
-{% endexample %} - -{% example html %} -Block -{% endexample %} - -{% example html %} -
-

inline-block

- Boot that strap! -
-
-

inline-block

- Strap that boot! -
-{% endexample %} diff --git a/docs/utilities/display.md b/docs/utilities/display.md new file mode 100644 index 000000000..27f70e0b2 --- /dev/null +++ b/docs/utilities/display.md @@ -0,0 +1,64 @@ +--- +layout: docs +title: Display property +group: utilities +--- + +Quickly and responsively toggle the `display` value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling `display` when printing. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Common `display` values + +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: + +- `.d-none` +- `.d-inline` +- `.d-inline-block` +- `.d-block` +- `.d-table` +- `.d-table-cell` +- `.d-flex` +- `.d-inline-flex` + +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). + +{% example html %} +
d-inline
+
d-inline
+{% endexample %} + +{% example html %} +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 %} + +## Display in print + +Change the `display` value of elements when printing with our print display utilities. + +| 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 | -- cgit v1.2.3 From 78937cbb39f349f0b85675b9b8f4e55ce874975a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 5 Mar 2017 13:03:05 -0600 Subject: move visibility docs and add .visible mention --- docs/utilities/invisible-content.md | 23 ----------------------- docs/utilities/visibility.md | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 23 deletions(-) delete mode 100644 docs/utilities/invisible-content.md create mode 100644 docs/utilities/visibility.md (limited to 'docs/utilities') diff --git a/docs/utilities/invisible-content.md b/docs/utilities/invisible-content.md deleted file mode 100644 index 84da6ad01..000000000 --- a/docs/utilities/invisible-content.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -layout: docs -title: Invisible content -group: utilities ---- - -The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. - -{% highlight html %} - -{% endhighlight %} - -{% highlight scss %} -// Class -.invisible { - visibility: hidden; -} - -// Usage as a mixin -.element { - @include invisible; -} -{% endhighlight %} diff --git a/docs/utilities/visibility.md b/docs/utilities/visibility.md new file mode 100644 index 000000000..5b7d28664 --- /dev/null +++ b/docs/utilities/visibility.md @@ -0,0 +1,32 @@ +--- +layout: docs +title: Visibility +group: utilities +--- + +Set the `visibility` of elements with our visibility utilities. These do not modify the `display` value at all and are helpful for hiding content from most users, but still keeping them for screen readers. + +Apply `.visible` or `.invisible` as needed. + +{% highlight html %} +
...
+ +{% endhighlight %} + +{% highlight scss %} +// Class +.visible { + visibility: visible; +} +.invisible { + visibility: hidden; +} + +// Usage as a mixin +.element { + @include invisible(visible); +} +.element { + @include invisible(hidden); +} +{% endhighlight %} -- cgit v1.2.3 From 95f37e4c402df37db16781995ffa1592032df9c8 Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sun, 5 Mar 2017 14:07:38 -0700 Subject: Clean up spacers a bit more --- docs/utilities/spacing.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 0978e195d..fa8a0d76c 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -35,11 +35,11 @@ Where *sides* is one of: Where *size* is one of: * `0` - for classes that eliminate the `margin` or `padding` by setting it to `0` -* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25` or `$spacer * .25` -* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5` or `$spacer * .5` -* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer` or `$spacer` -* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5` or `$spacer * 1.5` -* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3` or `$spacer * 3` +* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25` +* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5` +* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer` +* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5` +* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3` (You can add more sizes by adding entries to the `$spacers` Sass map variable.) @@ -62,7 +62,7 @@ Here are some representative examples of these classes: } .p-3 { - padding: $spacer $spacer !important; + padding: $spacer !important; } {% endhighlight %} -- cgit v1.2.3 From 860181212dd5111a90cfba75033e2f4b373c8d63 Mon Sep 17 00:00:00 2001 From: jak Date: Thu, 9 Mar 2017 19:36:32 +0000 Subject: docs: add text-truncate and extend on text-nowrap --- docs/utilities/typography.md | 33 +++++++++++++++++++++++++-------- 1 file changed, 25 insertions(+), 8 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index 42b61131e..5e29fd88c 100644 --- a/docs/utilities/typography.md +++ b/docs/utilities/typography.md @@ -19,14 +19,6 @@ Easily realign text to components with text alignment classes.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

{% endexample %} -{% example html %} -
-
- Curabitur blandit tempus ardua ridiculus sed magna. -
-
-{% endexample %} - For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. {% example html %} @@ -40,6 +32,31 @@ For left, right, and center alignment, responsive classes are available that use

Left aligned text on viewports sized XL (extra-large) or wider.

{% endexample %} +## Text wrapping and overflow + +Prevent text from wrapping with a `.text-nowrap` class. + +{% example html %} +
+
+ Curabitur blandit tempus ardua ridiculus sed magna. +
+
+ An image to show the text doesn't wrap +
+
+{% endexample %} + +For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. + +{% example html %} +
+
+ Praeterea iter est quasdam res quas ex communi. +
+
+{% endexample %} + ## Text transform Transform text in components with text capitalization classes. -- cgit v1.2.3 From b3cad3978227d03b75b8bd034481d738ed98f67a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 28 Mar 2017 09:35:39 -0700 Subject: quickly fix #21761 by adding .text-gray-dark example --- docs/utilities/colors.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/utilities') diff --git a/docs/utilities/colors.md b/docs/utilities/colors.md index f041f6947..b114d74fe 100644 --- a/docs/utilities/colors.md +++ b/docs/utilities/colors.md @@ -13,6 +13,7 @@ Convey meaning through color with a handful of emphasis utility classes. These m

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

+

Eget risus varius blandit sit ultricies vehicula amet non magna.

Etiam porta sem malesuada ultricies vehicula.

{% endexample %} -- cgit v1.2.3 From 2f21403a933336f7cb01c86bf3c650490bc658a6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 14:01:38 -0700 Subject: Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376) --- docs/utilities/sizing.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md index eabb4653a..782186c97 100644 --- a/docs/utilities/sizing.md +++ b/docs/utilities/sizing.md @@ -4,16 +4,9 @@ title: Sizing group: utilities --- -Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. +Easily make an element as tall (relative to its parent) with our height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Mix and match with our existing grid classes for controlling `width`. -Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. - -{% example html %} -
Width 25%
-
Width 50%
-
Width 75%
-
Width 100%
-{% endexample %} +Height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. {% example html %}
@@ -24,7 +17,7 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
{% endexample %} -You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. +Use `max-width: 100%;` and `max-height: 100%;` utilities as needed. {% example html %} Max-width 100% -- cgit v1.2.3 From feb35b94a61c4d6016be8d1773a79a6bbe57d856 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 15:14:52 -0700 Subject: Revert "Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376)" This reverts commit 2f21403a933336f7cb01c86bf3c650490bc658a6. --- docs/utilities/sizing.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md index 782186c97..eabb4653a 100644 --- a/docs/utilities/sizing.md +++ b/docs/utilities/sizing.md @@ -4,9 +4,16 @@ title: Sizing group: utilities --- -Easily make an element as tall (relative to its parent) with our height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Mix and match with our existing grid classes for controlling `width`. +Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. -Height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. +Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. + +{% example html %} +
Width 25%
+
Width 50%
+
Width 75%
+
Width 100%
+{% endexample %} {% example html %}
@@ -17,7 +24,7 @@ Height utilities are generated from the `$sizes` Sass map in `_variables.scss`.
{% endexample %} -Use `max-width: 100%;` and `max-height: 100%;` utilities as needed. +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. {% example html %} Max-width 100% -- cgit v1.2.3