mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
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
This commit is contained in:
Mark Otto
GitHub
parent
a7f1b59959
commit
f734814f6b
@ -13,7 +13,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
|
||||
<div class="jumbotron">
|
||||
<h1 class="display-3">Hello, world!</h1>
|
||||
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
||||
<hr class="my-2">
|
||||
<hr class="my-4">
|
||||
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
||||
<p class="lead">
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
|
||||
|
||||
@ -46,7 +46,7 @@ Media components can also be nested.
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<div class="media mt-2">
|
||||
<div class="media mt-3">
|
||||
<a class="media-left" href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
@ -124,7 +124,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
|
||||
<!-- Nested media object -->
|
||||
<div class="media mt-2">
|
||||
<div class="media mt-3">
|
||||
<a class="media-left" href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
@ -132,7 +132,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
<!-- Nested media object -->
|
||||
<div class="media mt-2">
|
||||
<div class="media mt-3">
|
||||
<div class="media-left">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
@ -146,7 +146,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nested media object -->
|
||||
<div class="media mt-2">
|
||||
<div class="media mt-3">
|
||||
<div class="media-left">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
@ -159,7 +159,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media mt-2">
|
||||
<li class="media mt-3">
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
|
||||
@ -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 %}
|
||||
|
||||
|
||||
@ -135,14 +135,22 @@ $spacers: (
|
||||
y: 0
|
||||
),
|
||||
1: (
|
||||
x: ($spacer-x * .25),
|
||||
y: ($spacer-y * .25)
|
||||
),
|
||||
2: (
|
||||
x: ($spacer-x * .5),
|
||||
y: ($spacer-y * .5)
|
||||
),
|
||||
3: (
|
||||
x: $spacer-x,
|
||||
y: $spacer-y
|
||||
),
|
||||
2: (
|
||||
4: (
|
||||
x: ($spacer-x * 1.5),
|
||||
y: ($spacer-y * 1.5)
|
||||
),
|
||||
3: (
|
||||
5: (
|
||||
x: ($spacer-x * 3),
|
||||
y: ($spacer-y * 3)
|
||||
)
|
||||
|
||||
@ -10,25 +10,50 @@
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $lengths in $spacers {
|
||||
$length-x: map-get($lengths, x);
|
||||
$length-y: map-get($lengths, y);
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $lengths in $spacers {
|
||||
$length-x: map-get($lengths, x);
|
||||
$length-y: map-get($lengths, y);
|
||||
|
||||
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
|
||||
.#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
|
||||
.#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
|
||||
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
|
||||
.#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$min: breakpoint-min($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Axes
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length-x !important;
|
||||
#{$prop}-left: $length-x !important;
|
||||
}
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length-y !important;
|
||||
#{$prop}-bottom: $length-y !important;
|
||||
@if $min {
|
||||
// everything else
|
||||
@media (min-width: $min) {
|
||||
.#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
|
||||
.#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; }
|
||||
.#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; }
|
||||
.#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
|
||||
.#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; }
|
||||
.#{$abbrev}x-#{$breakpoint}-#{$size} {
|
||||
#{$prop}-right: $length-x !important;
|
||||
#{$prop}-left: $length-x !important;
|
||||
}
|
||||
.#{$abbrev}y-#{$breakpoint}-#{$size} {
|
||||
#{$prop}-top: $length-y !important;
|
||||
#{$prop}-bottom: $length-y !important;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// xs
|
||||
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
|
||||
.#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
|
||||
.#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
|
||||
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
|
||||
.#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length-x !important;
|
||||
#{$prop}-left: $length-x !important;
|
||||
}
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length-y !important;
|
||||
#{$prop}-bottom: $length-y !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user