From e8015e3f16e87c5ebaf6b10d9f627a1dc7f8fe65 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Mon, 27 Feb 2017 21:42:26 +1100 Subject: Fix broken links. --- docs/utilities/responsive-helpers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/responsive-helpers.md b/docs/utilities/responsive-helpers.md index 35e7fcf2f..0f1a43ee1 100644 --- a/docs/utilities/responsive-helpers.md +++ b/docs/utilities/responsive-helpers.md @@ -14,7 +14,7 @@ Rules are directly applied to ` + {% endexample %} -- cgit v1.2.3 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