diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md index 0fa7215aae8d..49b7ba9a3500 100644 --- a/docs/components/jumbotron.md +++ b/docs/components/jumbotron.md @@ -13,7 +13,7 @@ A lightweight, flexible component that can optionally extend the entire viewport

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

-
+

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index b998490d3af1..846330604246 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -46,7 +46,7 @@ Media components can also be nested.

Media heading

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. -
+
Generic placeholder image @@ -124,7 +124,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

Media heading

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.

-
+
Generic placeholder image @@ -132,7 +132,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

Nested media heading

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. -
+
Generic placeholder image @@ -146,7 +146,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
-
+
Generic placeholder image @@ -159,7 +159,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
-
  • +

  • Media heading

    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. diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index f44d468f931a..53a6ab538a8f 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -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 %} diff --git a/scss/_variables.scss b/scss/_variables.scss index 5f02e78dad68..6efe0982b3c9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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) ) diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 99c98f87bdf7..9c13b6022fc6 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -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; + } + } + + } } } }