Skip to content

Commit

Permalink
Make spacer utils responsive (#20926)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@mdo
mdo authored Nov 1, 2016
1 parent a7f1b59 commit f734814
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 36 deletions.
2 changes: 1 addition & 1 deletion docs/components/jumbotron.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions docs/layout/media-object.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -124,15 +124,15 @@ 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>
<div class="media-body">
<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">
Expand All @@ -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">
Expand All @@ -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.
Expand Down
26 changes: 17 additions & 9 deletions docs/utilities/spacing.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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 %}
Expand All @@ -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 %}

Expand Down
12 changes: 10 additions & 2 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
)
Expand Down
63 changes: 44 additions & 19 deletions scss/utilities/_spacing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

.#{$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; }

// 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;
@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);

@include media-breakpoint-up($breakpoint) {
$min: breakpoint-min($breakpoint, $grid-breakpoints);

@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;
}
}

}
}
}
}
Expand Down

0 comments on commit f734814

Please sign in to comment.