]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Drop width from sizing utils given .col- classes can do the same thing (follow up...
authorMark Otto <markdotto@gmail.com>
Sat, 8 Apr 2017 21:01:38 +0000 (14:01 -0700)
committerMark Otto <markd.otto@gmail.com>
Sat, 8 Apr 2017 21:23:47 +0000 (14:23 -0700)
docs/utilities/sizing.md
scss/_variables.scss
scss/utilities/_sizing.scss

index eabb4653ac13e40c77b70babc81f1512a65e09d4..782186c97716d84fa96cb9a1b5fb9a993ecbff35 100644 (file)
@@ -4,16 +4,9 @@ title: Sizing
 group: utilities
 ---
 
-Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default.
+Easily make an element as tall (relative to its parent) with our height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Mix and match with our existing grid classes for controlling `width`.
 
-Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here.
-
-{% example html %}
-<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 %}
+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 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
 </div>
 {% 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 %}
 <img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
index dfbe891a56d10e4e65576fe111d8d6ba3965100c..be8caa3424b053a82169b18c5504866b1ae1c2e6 100644 (file)
@@ -148,7 +148,7 @@ $spacers: (
   5: ($spacer * 3)
 ) !default;
 
-// This variable affects the `.h-*` and `.w-*` classes.
+// This variable affects the `.h-*` classes.
 $sizes: (
   25: 25%,
   50: 50%,
index a7dc3e49b8e1c9f280ae7815c4ae02ef63dbacf7..9b4acf2268b9fc48133b7bf3012ccc036a196ed0 100644 (file)
@@ -1,6 +1,6 @@
 // Width and height
 
-@each $prop, $abbrev in (width: w, height: h) {
+@each $prop, $abbrev in (height: h) {
   @each $size, $length in $sizes {
     .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
   }