From 076a950442371a8c0a974fa6478efb20a69527b7 Mon Sep 17 00:00:00 2001 From: Kovah Date: Fri, 9 Sep 2016 06:48:17 +0200 Subject: Docs: Breaks out Utilities into separate section and optimizes its pages (#20678) --- docs/utilities/clearfix.md | 39 ++++++++++++++++++ docs/utilities/close-icon.md | 13 ++++++ docs/utilities/colors.md | 47 +++++++++++++++++++++ docs/utilities/display-property.md | 29 +++++++++++++ docs/utilities/image-replacement.md | 18 ++++++++ docs/utilities/invisible-content.md | 23 +++++++++++ docs/utilities/responsive-helpers.md | 70 ++++++++++++++++++++++++++++++++ docs/utilities/screenreaders.md | 23 +++++++++++ docs/utilities/sizing-and-positioning.md | 28 +++++++++++++ docs/utilities/spacing.md | 69 +++++++++++++++++++++++++++++++ docs/utilities/typography.md | 58 ++++++++++++++++++++++++++ 11 files changed, 417 insertions(+) create mode 100644 docs/utilities/clearfix.md create mode 100644 docs/utilities/close-icon.md create mode 100644 docs/utilities/colors.md create mode 100644 docs/utilities/display-property.md create mode 100644 docs/utilities/image-replacement.md create mode 100644 docs/utilities/invisible-content.md create mode 100644 docs/utilities/responsive-helpers.md create mode 100644 docs/utilities/screenreaders.md create mode 100644 docs/utilities/sizing-and-positioning.md create mode 100644 docs/utilities/spacing.md create mode 100644 docs/utilities/typography.md (limited to 'docs/utilities') diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md new file mode 100644 index 000000000..8ebf214d2 --- /dev/null +++ b/docs/utilities/clearfix.md @@ -0,0 +1,39 @@ +--- +layout: docs +title: Clearfix +group: utilities +--- + +Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin. + +{% highlight html %} +
...
+{% endhighlight %} + +{% highlight scss %} +// Mixin itself +.clearfix() { + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + } +} + +// Usage as a mixin +.element { + @include clearfix; +} +{% endhighlight %} + +The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout. + +{% example html %} +
+ + +
+{% endexample %} diff --git a/docs/utilities/close-icon.md b/docs/utilities/close-icon.md new file mode 100644 index 000000000..5ec456bcc --- /dev/null +++ b/docs/utilities/close-icon.md @@ -0,0 +1,13 @@ +--- +layout: docs +title: Close icon +group: utilities +--- + +Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`. + +{% example html %} + +{% endexample %} diff --git a/docs/utilities/colors.md b/docs/utilities/colors.md new file mode 100644 index 000000000..62315e614 --- /dev/null +++ b/docs/utilities/colors.md @@ -0,0 +1,47 @@ +--- +layout: docs +title: Colors +group: utilities +--- + +Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles. + +{% example html %} +

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

+

Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+

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.

+{% endexample %} + +Contextual text classes also work well on anchors with the provided hover and focus states. + +{% example html %} +Muted link +Primary link +Success link +Info link +Warning link +Danger link +{% endexample %} + +Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. + +{% example html %} +
Nullam id dolor id nibh ultricies vehicula ut id elit.
+
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
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.
+
Cras mattis consectetur purus sit amet fermentum.
+{% endexample %} + +{% callout info %} +#### Dealing with specificity + +Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. +{% endcallout %} + +{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} +{{ callout-include | markdownify }} diff --git a/docs/utilities/display-property.md b/docs/utilities/display-property.md new file mode 100644 index 000000000..8b3f6f616 --- /dev/null +++ b/docs/utilities/display-property.md @@ -0,0 +1,29 @@ +--- +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](../../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/image-replacement.md b/docs/utilities/image-replacement.md new file mode 100644 index 000000000..720e7b5a9 --- /dev/null +++ b/docs/utilities/image-replacement.md @@ -0,0 +1,18 @@ +--- +layout: docs +title: Image replacement +group: utilities +--- + +Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image. + +{% highlight html %} +

Custom heading

+{% endhighlight %} + +{% highlight scss %} +// Usage as a mixin +.heading { + @include text-hide; +} +{% endhighlight %} diff --git a/docs/utilities/invisible-content.md b/docs/utilities/invisible-content.md new file mode 100644 index 000000000..84da6ad01 --- /dev/null +++ b/docs/utilities/invisible-content.md @@ -0,0 +1,23 @@ +--- +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/responsive-helpers.md b/docs/utilities/responsive-helpers.md new file mode 100644 index 000000000..b9c76d59d --- /dev/null +++ b/docs/utilities/responsive-helpers.md @@ -0,0 +1,70 @@ +--- +layout: docs +title: Responsive helpers +group: utilities +--- + +## Responsive embeds + +Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device. + +Rules are directly applied to ` +
+{% endexample %} + +Aspect ratios can be customized with modifier classes. + +{% highlight html %} + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+{% endhighlight %} + +## Responsive floats + +These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system. + +Two similar non-responsive Sass mixins (`pull-left` and `pull-right`) are also available. + +{% example html %} +
Float left on all viewport sizes

+
Float right on all viewport sizes

+
Don't float on all viewport sizes

+ +
Float left on viewports sized SM (small) or wider

+
Float left on viewports sized MD (medium) or wider

+
Float left on viewports sized LG (large) or wider

+
Float left on viewports sized XL (extra-large) or wider

+{% endexample %} + +{% highlight scss %} +// Related simple non-responsive mixins +.element { + @include pull-left; +} +.another-element { + @include pull-right; +} +{% endhighlight %} diff --git a/docs/utilities/screenreaders.md b/docs/utilities/screenreaders.md new file mode 100644 index 000000000..576b0a18b --- /dev/null +++ b/docs/utilities/screenreaders.md @@ -0,0 +1,23 @@ +--- +layout: docs +title: Screenreaders +group: utilities +--- + +Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. + +{% comment %} +Necessary for following [accessibility best practices](../getting-started/#accessibility). +{% endcomment %} + +{% highlight html %} +Skip to main content +{% endhighlight %} + +{% highlight scss %} +// Usage as a mixin +.skip-navigation { + @include sr-only; + @include sr-only-focusable; +} +{% endhighlight %} diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md new file mode 100644 index 000000000..81b65d43d --- /dev/null +++ b/docs/utilities/sizing-and-positioning.md @@ -0,0 +1,28 @@ +--- +layout: docs +title: Sizing and positioning +group: utilities +--- + +## Fixed positioning + +The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined: + +{% highlight scss %} +.pos-f-t { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; +} +{% endhighlight %} + + +## Full width + +Easily make an element as wide as its parent using the `.w-100` utility class, which sets `width: 100%`. + +{% example html %} +Width = 100% +{% endexample %} diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md new file mode 100644 index 000000000..045c4b213 --- /dev/null +++ b/docs/utilities/spacing.md @@ -0,0 +1,69 @@ +--- +layout: docs +title: Spacing +group: utilities +--- + +Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`. + +The classes are named using the format: `{property}-{sides}-{size}` + +Where *property* is one of: + +* `m` - for classes that set `margin` +* `p` - for classes that set `padding` + +Where *sides* is one of: + +* `t` - for classes that set `margin-top` or `padding-top` +* `b` - for classes that set `margin-bottom` or `padding-bottom` +* `l` - for classes that set `margin-left` or `padding-left` +* `r` - for classes that set `margin-right` or `padding-right` +* `x` - for classes that set both `*-left` and `*-right` +* `y` - for classes that set both `*-top` and `*-bottom` +* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element + +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` or `$spacer-y` +* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5` +* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3` + +(You can add more sizes by adding entries to the `$spacers` Sass map variable.) + +Here are some representative examples of these classes: + +{% highlight scss %} +.m-t-0 { + margin-top: 0 !important; +} + +.m-l-1 { + margin-left: $spacer-x !important; +} + +.p-x-2 { + padding-left: ($spacer-x * 1.5) !important; + padding-right: ($spacer-x * 1.5) !important; +} + +.p-a-3 { + padding: ($spacer-y * 3) ($spacer-x * 3) !important; +} +{% endhighlight %} + +### Horizontal centering +Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`. + +
+
+ Centered element +
+
+ +{% highlight html %} +
+ Centered element +
+{% endhighlight %} diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md new file mode 100644 index 000000000..c5628dad1 --- /dev/null +++ b/docs/utilities/typography.md @@ -0,0 +1,58 @@ +--- +layout: docs +title: Typography +group: utilities +--- + +The following utilities can be used to add additional styles to texts. + +## Text alignment + +Easily realign text to components with text alignment classes. + +{% example html %} +

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 %} +

Left aligned text on all viewport sizes.

+

Center aligned text on all viewport sizes.

+

Right aligned text on all viewport sizes.

+ +

Left aligned text on viewports sized SM (small) or wider.

+

Left aligned text on viewports sized MD (medium) or wider.

+

Left aligned text on viewports sized LG (large) or wider.

+

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

+{% endexample %} + +## Text transform + +Transform text in components with text capitalization classes. + +{% example html %} +

Lowercased text.

+

Uppercased text.

+

CapiTaliZed text.

+{% endexample %} + +Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected. + +## Font weight and italics + +Quickly change the weight (boldness) of text or italicize text. + +{% example html %} +

Bold text.

+

Normal weight text.

+

Italic text.

+{% endexample %} -- cgit v1.2.3 From 0be876359ed4ed7c8a3d315a6ef9a04eede8d765 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 22:16:28 -0700 Subject: Update docs to use new spacing util class names --- docs/utilities/spacing.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 045c4b213..1ee1ab7fb 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -6,7 +6,7 @@ group: utilities Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`. -The classes are named using the format: `{property}-{sides}-{size}` +The classes are named using the format: `{property}{sides}-{size}` Where *property* is one of: @@ -35,35 +35,35 @@ Where *size* is one of: Here are some representative examples of these classes: {% highlight scss %} -.m-t-0 { +.mt-0 { margin-top: 0 !important; } -.m-l-1 { +.ml-1 { margin-left: $spacer-x !important; } -.p-x-2 { +.px-2 { padding-left: ($spacer-x * 1.5) !important; padding-right: ($spacer-x * 1.5) !important; } -.p-a-3 { +.p-3 { padding: ($spacer-y * 3) ($spacer-x * 3) !important; } {% endhighlight %} ### Horizontal centering -Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`. +Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
-
+
Centered element
{% highlight html %} -
+
Centered element
{% endhighlight %} -- cgit v1.2.3 From a96038b50aaa201271383c95bb117c14f3bc5efb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 22:18:40 -0700 Subject: Revamp background utilities and add new .text-white utility - Rather than mix multiple properties in our color utilities, this splits all color and all background utils into separate classes. - Adds new .text-white class to help lighten text color for darker backgrounds --- docs/utilities/colors.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/colors.md b/docs/utilities/colors.md index 62315e614..216941f95 100644 --- a/docs/utilities/colors.md +++ b/docs/utilities/colors.md @@ -13,9 +13,10 @@ 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.

+

Etiam porta sem malesuada ultricies vehicula.

{% endexample %} -Contextual text classes also work well on anchors with the provided hover and focus states. +Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.** {% example html %} Muted link @@ -26,15 +27,15 @@ Contextual text classes also work well on anchors with the provided hover and fo Danger link {% endexample %} -Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. +Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities. {% example html %} -
Nullam id dolor id nibh ultricies vehicula ut id elit.
-
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
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.
-
Cras mattis consectetur purus sit amet fermentum.
+
Nullam id dolor id nibh ultricies vehicula ut id elit.
+
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
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.
+
Cras mattis consectetur purus sit amet fermentum.
{% endexample %} {% callout info %} -- cgit v1.2.3 From 91992ac70a7fe9e9411580d0857132f57be59e5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 23:21:40 -0700 Subject: Add new border utils - Move and rename .img-rounded to .rounded, .img-circle to .rounded-circle - Add new .rounded-{direction} utils - New docs pages for border utils with TBD comments for the border property - Removes most image examples for rounding from the content/images docs in favor of new docs page --- docs/utilities/borders.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 docs/utilities/borders.md (limited to 'docs/utilities') diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md new file mode 100644 index 000000000..b47d95c97 --- /dev/null +++ b/docs/utilities/borders.md @@ -0,0 +1,29 @@ +--- +layout: docs +title: Borders +group: utilities +--- + +Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element. + +## Border-radius + +Add classes to an element to easily round its corners. + +
+ Example rounded image + Example top rounded image + Example right rounded image + Example bottom rounded image + Example left rounded image + Completely round image +
+ +{% highlight html %} +... +... +... +... +... +... +{% endhighlight %} -- cgit v1.2.3 From 3dc4b3647ce2b27b0216fe8103253ffe9633fde9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Sep 2016 00:54:10 -0700 Subject: Rename pull-*-{left|right} classes to .float-*-left and .float-*-right --- docs/utilities/clearfix.md | 4 ++-- docs/utilities/responsive-helpers.md | 22 +++++++++++----------- 2 files changed, 13 insertions(+), 13 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index 8ebf214d2..e63ba3cda 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t {% example html %}
- - + +
{% endexample %} diff --git a/docs/utilities/responsive-helpers.md b/docs/utilities/responsive-helpers.md index b9c76d59d..13ae8a56d 100644 --- a/docs/utilities/responsive-helpers.md +++ b/docs/utilities/responsive-helpers.md @@ -46,25 +46,25 @@ Aspect ratios can be customized with modifier classes. These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system. -Two similar non-responsive Sass mixins (`pull-left` and `pull-right`) are also available. +Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available. {% example html %} -
Float left on all viewport sizes

-
Float right on all viewport sizes

-
Don't float on all viewport sizes

- -
Float left on viewports sized SM (small) or wider

-
Float left on viewports sized MD (medium) or wider

-
Float left on viewports sized LG (large) or wider

-
Float left on viewports sized XL (extra-large) or wider

+
Float left on all viewport sizes

+
Float right on all viewport sizes

+
Don't float on all viewport sizes

+ +
Float left on viewports sized SM (small) or wider

+
Float left on viewports sized MD (medium) or wider

+
Float left on viewports sized LG (large) or wider

+
Float left on viewports sized XL (extra-large) or wider

{% endexample %} {% highlight scss %} // Related simple non-responsive mixins .element { - @include pull-left; + @include float-left; } .another-element { - @include pull-right; + @include float-right; } {% endhighlight %} -- cgit v1.2.3 From 2e69dfa8c1679238579ef6f5ec85deb755e4fb6d Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 4 Oct 2016 02:55:59 +1000 Subject: Fix broken/redirected links, moving to HTTPS where possible. (#20557) --- docs/utilities/display-property.md | 2 +- docs/utilities/screenreaders.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/display-property.md b/docs/utilities/display-property.md index 8b3f6f616..50ea29367 100644 --- a/docs/utilities/display-property.md +++ b/docs/utilities/display-property.md @@ -6,7 +6,7 @@ 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](../../layout/responsive-utilities/) instead. +To make an element `display: none`, use our [responsive utilities]({{ site.baseurl }}/layout/responsive-utilities/) instead. {% example html %}
Inline
diff --git a/docs/utilities/screenreaders.md b/docs/utilities/screenreaders.md index 576b0a18b..411f3ddb2 100644 --- a/docs/utilities/screenreaders.md +++ b/docs/utilities/screenreaders.md @@ -7,7 +7,7 @@ group: utilities Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. {% comment %} -Necessary for following [accessibility best practices](../getting-started/#accessibility). +Necessary for following [accessibility best practices]({{ site.baseurl }}/getting-started/#accessibility). {% endcomment %} {% highlight html %} -- cgit v1.2.3 From 909b84a289553417ef22264a9570a2a2d7ff4ad3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2016 16:35:16 -0700 Subject: Document the .bg-faded class Fixes #20550. --- 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 216941f95..f041f6947 100644 --- a/docs/utilities/colors.md +++ b/docs/utilities/colors.md @@ -36,6 +36,7 @@ Similar to the contextual text color classes, easily set the background of an el
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum.
+
Cras mattis consectetur purus sit amet fermentum.
{% endexample %} {% callout info %} -- cgit v1.2.3 From ea57c5108281ee77a4fbb513d40f253d928171c3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2016 17:46:45 -0700 Subject: document it a bit --- docs/utilities/sizing-and-positioning.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 81b65d43d..8881b177b 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -19,10 +19,16 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v {% endhighlight %} -## Full width +## Width and height -Easily make an element as wide as its parent using the `.w-100` utility class, which sets `width: 100%`. +Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. {% example html %} Width = 100% {% endexample %} + +{% example html %} +
+
Full height
+
+{% endexample %} -- cgit v1.2.3 From 62a129184d144de67349ff300a315c42dadc8712 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Oct 2016 19:15:58 -0700 Subject: Add vertical-align utilities - Adds six new utils for vertical-align property - Documents the additional classes in the utils docs --- docs/utilities/vertical-align.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 docs/utilities/vertical-align.md (limited to 'docs/utilities') diff --git a/docs/utilities/vertical-align.md b/docs/utilities/vertical-align.md new file mode 100644 index 000000000..8e03e58a6 --- /dev/null +++ b/docs/utilities/vertical-align.md @@ -0,0 +1,33 @@ +--- +layout: docs +title: Vertical alignment +group: utilities +--- + +Change the alignment of elements with the [`vertical-alignment`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements. + +Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed. + +With inline elements: + +{% example html %} +baseline +top +middle +bottom +text-top +text-bottom +{% endexample %} + +With table cells: + +{% example html %} + + + + + + + +
baselinetopmiddlebottomtext-toptext-bottom
+{% endexample %} -- cgit v1.2.3 From 2e4fab63de2a476c11df12388f67b234732a2830 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Oct 2016 19:31:47 -0700 Subject: fix markup validation --- docs/utilities/vertical-align.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/vertical-align.md b/docs/utilities/vertical-align.md index 8e03e58a6..09ae115b0 100644 --- a/docs/utilities/vertical-align.md +++ b/docs/utilities/vertical-align.md @@ -23,11 +23,15 @@ With table cells: {% example html %} - - - - - - + + + + + + + + + +
baselinetopmiddlebottomtext-toptext-bottom
baselinetopmiddlebottomtext-toptext-bottom
{% endexample %} -- cgit v1.2.3 From 8e888796a64ba89b69fb1af7b8e295d050b17ca1 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Fri, 21 Oct 2016 09:36:09 +1100 Subject: Fix documentation for all-side spacing classes. --- docs/utilities/spacing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 1ee1ab7fb..f44d468f9 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -21,7 +21,7 @@ Where *sides* is one of: * `r` - for classes that set `margin-right` or `padding-right` * `x` - for classes that set both `*-left` and `*-right` * `y` - for classes that set both `*-top` and `*-bottom` -* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element +* blank - for classes that set a `margin` or `padding` on all 4 sides of the element Where *size* is one of: -- cgit v1.2.3 From f734814f6ba6c86673f771b073425ca6f7f72693 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 21:13:05 -0700 Subject: Make spacer utils responsive (#20926) * make spacer utils responsive by grid tier * update scale to add two levels, document them * change responsive spacing utils to avoid the xs abbreviation in the class name for that tier * update code snippet to match source * update usage in our docs * linter * docs updates --- docs/utilities/spacing.md | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index f44d468f9..53a6ab538 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -4,9 +4,13 @@ title: Spacing group: utilities --- -Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`. +Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`. -The classes are named using the format: `{property}{sides}-{size}` +## Notation + +Spacing utilities 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. + +The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`. Where *property* is one of: @@ -26,12 +30,16 @@ 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` or `$spacer-y` -* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5` -* `3` - (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-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` (You can add more sizes by adding entries to the `$spacers` Sass map variable.) +## Examples + Here are some representative examples of these classes: {% highlight scss %} @@ -40,16 +48,16 @@ Here are some representative examples of these classes: } .ml-1 { - margin-left: $spacer-x !important; + margin-left: ($spacer-x * .25) !important; } .px-2 { - padding-left: ($spacer-x * 1.5) !important; - padding-right: ($spacer-x * 1.5) !important; + padding-left: ($spacer-x * .5) !important; + padding-right: ($spacer-x * .5) !important; } .p-3 { - padding: ($spacer-y * 3) ($spacer-x * 3) !important; + padding: $spacer-y $spacer-x !important; } {% endhighlight %} -- cgit v1.2.3 From ffaad0a819c6cf1e21d9a9d313673f9d7a260584 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 21:27:56 -0700 Subject: Responsive display utilities (#20934) * Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name * make floats use the same format, add float-none mixin --- docs/utilities/clearfix.md | 4 ++-- docs/utilities/responsive-helpers.md | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index e63ba3cda..d1327566c 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t {% example html %}
- - + +
{% endexample %} diff --git a/docs/utilities/responsive-helpers.md b/docs/utilities/responsive-helpers.md index 13ae8a56d..35e7fcf2f 100644 --- a/docs/utilities/responsive-helpers.md +++ b/docs/utilities/responsive-helpers.md @@ -49,9 +49,9 @@ These utility classes float an element to the left or right, or disable floating Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available. {% example html %} -
Float left on all viewport sizes

-
Float right on all viewport sizes

-
Don't float on all viewport sizes

+
Float left on all viewport sizes

+
Float right on all viewport sizes

+
Don't float on all viewport sizes

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

-- cgit v1.2.3 From ab54151ed3faa9b27c6a9227a9bcb667719e1c5c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 23 Nov 2016 11:26:37 -0800 Subject: Fixes #21179: docs typos on pull/float action --- docs/utilities/clearfix.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index d1327566c..a023a79aa 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t {% example html %}
- - + +
{% endexample %} -- cgit v1.2.3 From 8d3f0995d12e11ba440d8bb03799f3f1349aec57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 23 Nov 2016 11:28:17 -0800 Subject: Fixes #21123: More specific definition of fixed-width block level for .mx-auto --- docs/utilities/spacing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 53a6ab538..91dab4f02 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -62,7 +62,7 @@ Here are some representative examples of these classes: {% endhighlight %} ### Horizontal centering -Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`. +Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
-- cgit v1.2.3 From 83c8bfa30d4d906ff7f2e37314e99e1098eb9bce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Nov 2016 14:01:06 -0800 Subject: Fixes #21195: Add more table of contents to pages with longer contents --- docs/utilities/spacing.md | 5 +++++ docs/utilities/typography.md | 5 +++++ 2 files changed, 10 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 91dab4f02..0a5132941 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -6,6 +6,11 @@ group: utilities Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Notation Spacing utilities 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. diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index c5628dad1..7db133d05 100644 --- a/docs/utilities/typography.md +++ b/docs/utilities/typography.md @@ -6,6 +6,11 @@ group: utilities The following utilities can be used to add additional styles to texts. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Text alignment Easily realign text to components with text alignment classes. -- cgit v1.2.3 From 095ea0b795a80530f7b5bd114fdd07c46893bfcb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 26 Nov 2016 16:44:16 -0800 Subject: Border utilities (#21213) * grunt * add border utilities for removing borders * clean up comments * add basic border docs * docs styles for border utils --- docs/utilities/borders.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md index b47d95c97..0088a2827 100644 --- a/docs/utilities/borders.md +++ b/docs/utilities/borders.md @@ -6,6 +6,20 @@ group: utilities Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element. +## Border + +Add classes to an element to remove all borders or some borders. + +
+{% example html %} + + + + + +{% endexample %} +
+ ## Border-radius Add classes to an element to easily round its corners. -- cgit v1.2.3 From dc52029beaff899242bdff8e9c00a932959609ba Mon Sep 17 00:00:00 2001 From: Ken Dale Date: Sat, 26 Nov 2016 19:47:53 -0500 Subject: Add .rounded-0 utility class (#21214) * Add rounded-0 class --- docs/utilities/borders.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md index 0088a2827..1eb716c1f 100644 --- a/docs/utilities/borders.md +++ b/docs/utilities/borders.md @@ -25,12 +25,13 @@ Add classes to an element to remove all borders or some borders. Add classes to an element to easily round its corners.
- Example rounded image - Example top rounded image - Example right rounded image - Example bottom rounded image - Example left rounded image - Completely round image + Example rounded image + Example top rounded image + Example right rounded image + Example bottom rounded image + Example left rounded image + Completely round image + Example non-rounded image (overrides rounding applied elsewhere)
{% highlight html %} @@ -40,4 +41,5 @@ Add classes to an element to easily round its corners. ... ... ... +... {% endhighlight %} -- cgit v1.2.3 From b1e8d60348ab84895b7b722487a03264a53aedfb Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sat, 26 Nov 2016 21:33:46 -0700 Subject: Remove 'xs' from text utilities (#21217) --- docs/utilities/typography.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index 7db133d05..42b61131e 100644 --- a/docs/utilities/typography.md +++ b/docs/utilities/typography.md @@ -30,9 +30,9 @@ Easily realign text to components with text alignment classes. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. {% example html %} -

Left aligned text on all viewport sizes.

-

Center aligned text on all viewport sizes.

-

Right aligned text on all viewport sizes.

+

Left aligned text on all viewport sizes.

+

Center aligned text on all viewport sizes.

+

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

-- cgit v1.2.3 From 585516db95c6528c396ef33c59f99c4f8bb8b42e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 27 Nov 2016 16:31:31 -0800 Subject: Add max-width 100% and max-height 100% utilities (#21221) --- docs/utilities/sizing-and-positioning.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 8881b177b..670b6f188 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -24,7 +24,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. {% example html %} -Width = 100% +Width 100% {% endexample %} {% example html %} @@ -32,3 +32,15 @@ Easily make an element as wide or as tall as its parent using the `.w-100` and `
Full height
{% endexample %} + +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. + +{% example html %} +Max-width 100% +{% endexample %} + +{% example html %} +
+
Max-height 100%
+
+{% endexample %} -- cgit v1.2.3 From 869bd23937448fdcbae37c1062d373ef3ae7722a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 27 Nov 2016 17:05:29 -0800 Subject: Update clearfix mixin (#21224) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update clearfix to use block instead of table display (also reorder properties for linting) * update docs snippet for clearfix mixin—was apparently still using Less syntax and had old clearfix hack (even before the block change in this PR) --- docs/utilities/clearfix.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index a023a79aa..49410df09 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -12,13 +12,10 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes {% highlight scss %} // Mixin itself -.clearfix() { - &:before, - &:after { - content: " "; - display: table; - } - &:after { +@mixin clearfix() { + &::after { + display: block; + content: ""; clear: both; } } -- cgit v1.2.3 From a3567a119df3434d879f766e18ba452b01871d37 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Mon, 5 Dec 2016 11:44:37 +1100 Subject: Documentation navigation fixes. (#21288) * Make /utilities/ redirect to /utilities/borders/. * Rewrite sidebar active link logic to ensure superstrings are not selected. --- docs/utilities/borders.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/utilities') diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md index 1eb716c1f..1f092c36a 100644 --- a/docs/utilities/borders.md +++ b/docs/utilities/borders.md @@ -2,6 +2,7 @@ layout: docs title: Borders group: utilities +redirect_from: "/utilities/" --- Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element. -- cgit v1.2.3 From d4217ea137c534dbbd7d32f58c5f700c63d5332c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 16:37:18 -0800 Subject: New width and height utils Adding 25%, 50%, and 75% to the mix for later use with cards --- docs/utilities/sizing-and-positioning.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 670b6f188..9e3f35ca1 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -21,15 +21,21 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v ## Width and height -Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. +Easily make an element as wide or as tall (relative to its parent) our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. {% example html %} -Width 100% +
Width 25%
+
Width 50%
+
Width 75%
+
Width 100%
{% endexample %} {% example html %}
-
Full height
+
Height 25%
+
Height 50%
+
Height 75%
+
Height 100%
{% endexample %} -- cgit v1.2.3 From f297282833c2af308783c527edaf8d6a7fd93917 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 21:18:33 -0800 Subject: typo --- docs/utilities/sizing-and-positioning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 9e3f35ca1..796eb8305 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -21,7 +21,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v ## Width and height -Easily make an element as wide or as tall (relative to its parent) our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. +Easily make an element as wide or as tall (relative to its parent) wit our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. {% example html %}
Width 25%
-- cgit v1.2.3 From 4b62a9390682feac7c5d1e260fd968ebaa7ded7c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 21:20:47 -0800 Subject: ugh --- docs/utilities/sizing-and-positioning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 796eb8305..a6de778ca 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -21,7 +21,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v ## Width and height -Easily make an element as wide or as tall (relative to its parent) wit our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. +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%`. {% example html %}
Width 25%
-- cgit v1.2.3 From 5464f4ab7e1ea5e6ef841609dbeb04d0436655db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 11:48:03 -0800 Subject: Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time. --- docs/utilities/flexbox.md | 196 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 docs/utilities/flexbox.md (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md new file mode 100644 index 000000000..324bfa2f0 --- /dev/null +++ b/docs/utilities/flexbox.md @@ -0,0 +1,196 @@ +--- +layout: docs +title: Flexbox +group: utilities +--- + +Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Enable flex behaviors + +Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties. Choose from the following options. + +| Class | property: value; | Description | +| --- | --- | --- | +| `.d-flex` | `display: flex;` | Creates a block-level element using the flexbox model. | +| `.d-inline-flex` | `display: inline-flex;` | Creates an inline-level element using the flexbox model. | + +{% example html %} +
I'm a flexbox container!
+{% endexample %} + +{% example html %} +
I'm an inline flexbox container!
+{% endexample %} + +Responsive variations also exist for `.d-flex` and `.d-inline-flex`. + + + + + + + + + + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + +
ClassDescription
+ .d{{ bp.abbr }}-flex + + Sets display: flex; on viewports {{ bp.min-width }} wide and up +
+ .d{{ bp.abbr }}-inline-flex + + Sets display: inline-flex; on viewports {{ bp.min-width }} wide and up +
+ +## Direction + +Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). + +Use `.flex-row` to set a horizontal direction. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +Use `.flex-column` to set a vertical direction. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +Responsive variations also exist for `.flex-row` and `.flex-column`. + + + + + + + + + + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + +
ClassDescription
+ .flex{{ bp.abbr }}-row + + Sets flex-direction: row; on viewports {{ bp.min-width }} wide and up +
+ .flex{{ bp.abbr }}-column + + Sets flex-direction: column; on viewports {{ bp.min-width }} wide and up +
+ +## Wrap + +Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. + + + + + + + + + + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + +
ClassDescription
+ .flex{{ bp.abbr }}-nowrap + + Sets flex-wrap: nowrap; on viewports {{ bp.min-width }} wide and up +
+ .flex{{ bp.abbr }}-wrap + + Sets flex-wrap: wrap; on viewports {{ bp.min-width }} wide and up +
-- cgit v1.2.3 From feb445376b98bf04ab3e7d294b200369e3c90f79 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 11:56:07 -0800 Subject: try out alt responsive variation lists --- docs/utilities/flexbox.md | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 324bfa2f0..a05c117e7 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -13,12 +13,7 @@ Quickly manage the layout, alignment, and sizing of grid columns, navigation, co ## Enable flex behaviors -Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties. Choose from the following options. - -| Class | property: value; | Description | -| --- | --- | --- | -| `.d-flex` | `display: flex;` | Creates a block-level element using the flexbox model. | -| `.d-inline-flex` | `display: inline-flex;` | Creates an inline-level element using the flexbox model. | +Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties. {% example html %}
I'm a flexbox container!
@@ -30,7 +25,11 @@ Apply `display` utilities to create a flexbox container and transform **direct c Responsive variations also exist for `.d-flex` and `.d-inline-flex`. - +{% for bp in site.data.breakpoints %} +- `.d{{ bp.abbr }}-flex` +- `.d{{ bp.abbr }}-inline-flex`{% endfor %} + +
@@ -87,7 +86,11 @@ Use `.flex-column` to set a vertical direction. Responsive variations also exist for `.flex-row` and `.flex-column`. - +{% for bp in site.data.breakpoints %} +- `.flex{{ bp.abbr }}-row` +- `.flex{{ bp.abbr }}-column`{% endfor %} + +
@@ -164,7 +167,11 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. - +{% for bp in site.data.breakpoints %} +- `.flex{{ bp.abbr }}-nowrap` +- `.flex{{ bp.abbr }}-wrap`{% endfor %} + +
-- cgit v1.2.3 From 90aa8a28a28a60d14e747cb1afe0531ab7107db7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 11:56:27 -0800 Subject: remove the table classes in favor of lists --- docs/utilities/flexbox.md | 93 ----------------------------------------------- 1 file changed, 93 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index a05c117e7..6b3d87050 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -29,37 +29,6 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`. - `.d{{ bp.abbr }}-flex` - `.d{{ bp.abbr }}-inline-flex`{% endfor %} - - - - - - - - - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - - - ## Direction Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). @@ -90,37 +59,6 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. - `.flex{{ bp.abbr }}-row` - `.flex{{ bp.abbr }}-column`{% endfor %} - - - - - - - - - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - - - ## Wrap Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. @@ -170,34 +108,3 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-nowrap` - `.flex{{ bp.abbr }}-wrap`{% endfor %} - - - - - - - - - - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - - -- cgit v1.2.3 From 4024dc7a5294e6bc37d31970de4f3a9718f4a728 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 12:40:55 -0800 Subject: indentation --- docs/utilities/flexbox.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 6b3d87050..2acd1fed4 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -65,21 +65,21 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( {% example html %}
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
{% endexample %} -- cgit v1.2.3 From 463e8bee76aa49cc443bf87120d2bee49b329146 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 12:54:01 -0800 Subject: document justify-content and align-items utils --- docs/utilities/flexbox.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 2acd1fed4..bc2a9cdb0 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -108,3 +108,68 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-nowrap` - `.flex{{ bp.abbr }}-wrap`{% endfor %} + +## Justify content + +Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + + +## Align items + +Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} -- cgit v1.2.3 From 7d47a0115864b2a5e429f52470323c79067d8c5e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 13:15:55 -0800 Subject: change presentation of those utils docs --- docs/utilities/flexbox.md | 103 ++++++++++++++++++++++++++++++---------------- 1 file changed, 68 insertions(+), 35 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index bc2a9cdb0..935922fb9 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -113,49 +113,82 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
-{% endexample %} + +{% highlight html %} +
...
+
...
+
...
+
...
+
...
+{% endhighlight %} ## Align items Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`. -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
-
-
Flex item
-
Flex item
-
Flex item
+ +{% highlight html %} +
...
+
...
+
...
+
...
+
...
+{% endhighlight %}
Flex item
-- cgit v1.2.3 From 75e756dfef1b4d99200b55f08f0ef942e074401e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 13:16:13 -0800 Subject: document align-content utils --- docs/utilities/flexbox.md | 155 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 142 insertions(+), 13 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 935922fb9..59d732f1c 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -189,20 +189,149 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
...
...
{% endhighlight %} + +## Align content + +Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. + +**Heads up!** This property has no affect on single rows of flex items. + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
-
-
Flex item
-
Flex item
-
Flex item
+{% highlight html %} +
+ ...
-
-
Flex item
-
Flex item
-
Flex item
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
-
-
Flex item
-
Flex item
-
Flex item
+{% highlight html %} +
...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
-{% endexample %} +{% highlight html %} +
...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
...
+{% endhighlight %} -- cgit v1.2.3 From 378aa6667bfe2ccc9f14cd3f767e8b24afc06bf5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 13:23:11 -0800 Subject: align-self docs --- docs/utilities/flexbox.md | 43 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 59d732f1c..8359bbe93 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -149,10 +149,9 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
...
{% endhighlight %} - ## Align items -Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`. +Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
@@ -190,6 +189,46 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
...
{% endhighlight %} +## Align self + +Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default). + +
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+ +{% highlight html %} +
Aligned flex item
+
Aligned flex item
+
Aligned flex item
+
Aligned flex item
+
Aligned flex item
+{% endhighlight %} + ## Align content Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. -- cgit v1.2.3 From 6fb2c18e141109fc8edaec7bfd376a33040ccf57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 12:33:42 -0800 Subject: add order docs --- docs/utilities/flexbox.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 8359bbe93..0c0cd5eed 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -229,6 +229,18 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Aligned flex item
{% endhighlight %} +## Order + +Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed. + +{% example html %} +
+
First flex item
+
Second flex item
+
Third flex item
+
+{% endexample %} + ## Align content Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. -- cgit v1.2.3 From f2f489c83790fcdeaf2fddd7773970f9fb0b2f8a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 17:46:35 -0800 Subject: stub out some docs --- docs/utilities/flexbox.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 0c0cd5eed..67bec7649 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -59,6 +59,19 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. - `.flex{{ bp.abbr }}-row` - `.flex{{ bp.abbr }}-column`{% endfor %} +## Auto margins + +Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + + ## Wrap Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. -- cgit v1.2.3 From f99d1796904cb0a28a926963dd5b8407cbbff72e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 18:03:16 -0800 Subject: reorder docs --- docs/utilities/flexbox.md | 125 +++++++++++++++++++++++----------------------- 1 file changed, 62 insertions(+), 63 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 67bec7649..eff4fb190 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -59,69 +59,6 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. - `.flex{{ bp.abbr }}-row` - `.flex{{ bp.abbr }}-column`{% endfor %} -## Auto margins - -Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so. - -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
-{% endexample %} - - -## Wrap - -Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. - -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-{% endexample %} - -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-{% endexample %} - -Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. - -{% for bp in site.data.breakpoints %} -- `.flex{{ bp.abbr }}-nowrap` -- `.flex{{ bp.abbr }}-wrap`{% endfor %} - ## Justify content Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. @@ -242,6 +179,68 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Aligned flex item
{% endhighlight %} +## Auto margins + +Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +## Wrap + +Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. + +{% for bp in site.data.breakpoints %} +- `.flex{{ bp.abbr }}-nowrap` +- `.flex{{ bp.abbr }}-wrap`{% endfor %} + ## Order Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed. -- cgit v1.2.3 From 4ca1a7f0773d1892723efc09e2ccb064dde309f5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 18:11:57 -0800 Subject: document it all, add align items examples --- docs/utilities/flexbox.md | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index eff4fb190..6686b5d59 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -181,14 +181,42 @@ Use `align-self` utilities on flexbox items to individually change their alignme ## Auto margins -Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so. +Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. + +### With justify-content + +Easily move all flex items to one side, but keep another on the opposite end by mixing `justify-content` with `margin-right: auto` or `margin-left: auto`. {% example html %} -
+
Flex item
Flex item
Flex item
+ +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +### With align-items + +Similarly, move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+ +
+
Flex item
+
Flex item
+
Flex item
+
{% endexample %} ## Wrap -- cgit v1.2.3 From d3cf4759b093befc78e996e26f2037c4f20db86b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Dec 2016 13:17:50 -0800 Subject: follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse --- docs/utilities/flexbox.md | 148 +++++++++++++++++++++++++++++++--------------- 1 file changed, 100 insertions(+), 48 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 6686b5d59..0acca4fad 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -33,23 +33,33 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`. Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). -Use `.flex-row` to set a horizontal direction. +Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side. {% example html %} -
-
Flex item
-
Flex item
-
Flex item
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
{% endexample %} -Use `.flex-column` to set a vertical direction. +Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side. {% example html %} -
-
Flex item
-
Flex item
-
Flex item
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
{% endexample %} @@ -57,7 +67,9 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-row` -- `.flex{{ bp.abbr }}-column`{% endfor %} +- `.flex{{ bp.abbr }}-row-reverse` +- `.flex{{ bp.abbr }}-column` +- `.flex{{ bp.abbr }}-column-reverse`{% endfor %} ## Justify content @@ -221,53 +233,93 @@ Similarly, move one flex item to the top or bottom of a container by mixing `ali ## Wrap -Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. +Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`. -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
-{% endexample %} +{% highlight html %} +
+ ... +
+{% endhighlight %} -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
+ ...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
+ ... +
+{% endhighlight %} + + +{% example html %} {% endexample %} Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-nowrap` -- `.flex{{ bp.abbr }}-wrap`{% endfor %} +- `.flex{{ bp.abbr }}-wrap` +- `.flex{{ bp.abbr }}-wrap-reverse`{% endfor %} ## Order -- cgit v1.2.3 From 8de5730c87cd87ecdb1c6de24924f3362d70d911 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Dec 2016 13:23:07 -0800 Subject: more flexbox docs --- docs/utilities/flexbox.md | 47 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 0acca4fad..9b6add5c4 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -63,7 +63,7 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
{% endexample %} -Responsive variations also exist for `.flex-row` and `.flex-column`. +Responsive variations also exist for `flex-direction`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-row` @@ -111,6 +111,15 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
...
{% endhighlight %} +Responsive variations also exist for `justify-content`. + +{% for bp in site.data.breakpoints %} +- `.justify-content{{ bp.abbr }}-start` +- `.justify-content{{ bp.abbr }}-end` +- `.justify-content{{ bp.abbr }}-center` +- `.justify-content{{ bp.abbr }}-between` +- `.justify-content{{ bp.abbr }}-around`{% endfor %} + ## Align items Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default). @@ -151,6 +160,15 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
...
{% endhighlight %} +Responsive variations also exist for `align-items`. + +{% for bp in site.data.breakpoints %} +- `.align-items{{ bp.abbr }}-start` +- `.align-items{{ bp.abbr }}-end` +- `.align-items{{ bp.abbr }}-center` +- `.align-items{{ bp.abbr }}-baseline` +- `.align-items{{ bp.abbr }}-stretch`{% endfor %} + ## Align self Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default). @@ -191,6 +209,15 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Aligned flex item
{% endhighlight %} +Responsive variations also exist for `align-self`. + +{% for bp in site.data.breakpoints %} +- `.align-self{{ bp.abbr }}-start` +- `.align-self{{ bp.abbr }}-end` +- `.align-self{{ bp.abbr }}-center` +- `.align-self{{ bp.abbr }}-baseline` +- `.align-self{{ bp.abbr }}-stretch`{% endfor %} + ## Auto margins Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. @@ -314,7 +341,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( {% example html %} {% endexample %} -Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. +Responsive variations also exist for `flex-wrap`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-nowrap` @@ -333,6 +360,13 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
{% endexample %} +Responsive variations also exist for `order`. + +{% for bp in site.data.breakpoints %} +- `.order{{ bp.abbr }}-first` +- `.order{{ bp.abbr }}-last` +- `.order{{ bp.abbr }}-unordered`{% endfor %} + ## Align content Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. @@ -478,3 +512,12 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe {% highlight html %}
...
{% endhighlight %} + +Responsive variations also exist for `align-content`. + +{% for bp in site.data.breakpoints %} +- `.align-content{{ bp.abbr }}-start` +- `.align-content{{ bp.abbr }}-end` +- `.align-content{{ bp.abbr }}-center` +- `.align-content{{ bp.abbr }}-around` +- `.align-content{{ bp.abbr }}-stretch`{% endfor %} -- cgit v1.2.3