diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md index 782186c977..eabb4653ac 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% diff --git a/scss/_variables.scss b/scss/_variables.scss index beb8b9c131..f517797faa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -148,7 +148,7 @@ $spacers: ( 5: ($spacer * 3) ) !default; -// This variable affects the `.h-*` classes. +// This variable affects the `.h-*` and `.w-*` classes. $sizes: ( 25: 25%, 50: 50%, diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss index 9b4acf2268..a7dc3e49b8 100644 --- a/scss/utilities/_sizing.scss +++ b/scss/utilities/_sizing.scss @@ -1,6 +1,6 @@ // Width and height -@each $prop, $abbrev in (height: h) { +@each $prop, $abbrev in (width: w, height: h) { @each $size, $length in $sizes { .#{$abbrev}-#{$size} { #{$prop}: $length !important; } }