From fa0227fe0eeab368fbf088741835e16ddace6549 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2016 20:37:02 -0700 Subject: [PATCH 1/7] make spacer utils responsive by grid tier --- scss/utilities/_spacing.scss | 42 ++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 99c98f87bdf7..efab53de5b25 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -10,25 +10,29 @@ 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) { + .#{$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; } + + // Axes + .#{$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; + } + } } } } From e4c4045e1c997ce90c5854962a9e4941bb79a8f1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Oct 2016 19:55:21 -0700 Subject: [PATCH 2/7] update scale to add two levels, document them --- docs/utilities/spacing.md | 10 ++++++---- scss/_variables.scss | 12 ++++++++++-- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 1ee1ab7fb49d..5de6857aecaa 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -4,7 +4,7 @@ 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 `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. Classes are built from a default Sass map ranging from `.25rem` to `3rem`. The classes are named using the format: `{property}{sides}-{size}` @@ -26,9 +26,11 @@ 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.) diff --git a/scss/_variables.scss b/scss/_variables.scss index c1bcbdc2c0ea..84c3f453ef06 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -85,14 +85,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) ) From f715c4a61088aaac04f0746f51c4835e803c2afb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 20:58:14 -0700 Subject: [PATCH 3/7] change responsive spacing utils to avoid the xs abbreviation in the class name for that tier --- scss/utilities/_spacing.scss | 49 +++++++++++++++++++++++++----------- 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index efab53de5b25..3a54a063d885 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -17,21 +17,42 @@ $length-y: map-get($lengths, y); @include media-breakpoint-up($breakpoint) { - .#{$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; } - - // Axes - .#{$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; + $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; + } } + } } } From 6115671831b5a0e2d1641591b7f63d34702fd7ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 20:58:27 -0700 Subject: [PATCH 4/7] update code snippet to match source --- docs/utilities/spacing.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 2e78a6d46b9d..e38ae9e5ea9b 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -42,16 +42,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 %} From 31dd7b51468d38c84a7607ffe6f1e40042041624 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 20:58:43 -0700 Subject: [PATCH 5/7] update usage in our docs --- docs/components/jumbotron.md | 2 +- docs/layout/media-object.md | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) 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. From 5ead17e518e04422c318cd9387751f50e87dd311 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 20:59:47 -0700 Subject: [PATCH 6/7] linter --- scss/utilities/_spacing.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 3a54a063d885..9c13b6022fc6 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -38,7 +38,7 @@ } } @else { // xs - .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides + .#{$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; } From 1916e2b25ec39f6eb51fec80e14c0af60f046da5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 21:12:32 -0700 Subject: [PATCH 7/7] docs updates --- docs/utilities/spacing.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index e38ae9e5ea9b..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. Classes are built from a default Sass map ranging from `.25rem` to `3rem`. +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: @@ -34,6 +38,8 @@ Where *size* is one of: (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 %}