Commit 2f21403a authored by Mark Otto's avatar Mark Otto Committed by Mark Otto
Browse files

Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376)

parent 11c2c07e
Showing with 5 additions and 12 deletions
+5 -12
...@@ -4,16 +4,9 @@ title: Sizing ...@@ -4,16 +4,9 @@ title: Sizing
group: utilities group: utilities
--- ---
Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Easily make an element as tall (relative to its parent) with our height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Mix and match with our existing grid classes for controlling `width`.
Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. 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 %}
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
{% endexample %}
{% example html %} {% example html %}
<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
...@@ -24,7 +17,7 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl ...@@ -24,7 +17,7 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
</div> </div>
{% endexample %} {% endexample %}
You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. Use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
{% example html %} {% example html %}
<img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%"> <img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
......
...@@ -148,7 +148,7 @@ $spacers: ( ...@@ -148,7 +148,7 @@ $spacers: (
5: ($spacer * 3) 5: ($spacer * 3)
) !default; ) !default;
// This variable affects the `.h-*` and `.w-*` classes. // This variable affects the `.h-*` classes.
$sizes: ( $sizes: (
25: 25%, 25: 25%,
50: 50%, 50: 50%,
......
// Width and height // Width and height
@each $prop, $abbrev in (width: w, height: h) { @each $prop, $abbrev in (height: h) {
@each $size, $length in $sizes { @each $size, $length in $sizes {
.#{$abbrev}-#{$size} { #{$prop}: $length !important; } .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment