Merge pull request #639 from primer/trosage/offset-columns

Added support for negative offset columns with responsive support

script/selector-diff-report

@@ -5,15 +5,17 @@ function log() {
     echo "$@" 1>&2
 }
 
+function warn() {
+    echo "$@" 1>&2
+}
+
 pkg="@primer/css"
 path="dist/stats/primer.json"
-log "Pulling the old $path from unpkg.com..."
+warn "Pulling the old $path from unpkg.com..."
 curl -sL "https://unpkg.com/$pkg/$path" > before.json
 
-if [[ ! -f $path ]]; then
-    log "Building the stats locally..."
-    npm run dist
-fi
+warn "Building the stats locally..."
+npm run --silent dist
 cp $path after.json
 
 function list_selectors() {
@@ -24,10 +26,6 @@ key=".selectors.values[]"
 jq -r $key before.json > before.txt
 jq -r $key after.json > after.txt
 
-function warn() {
-    echo "$@" 1>&2
-}
-
 warn "[selector report] diff:"
 (diff before.txt after.txt | tee selector-diff.log) || log "(no diff!)"
 warn "[selector report] end"

src/marketing/utilities/docs/layout.md

@@ -24,3 +24,14 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
   <div class="border bg-white position-lg-absolute left-lg-1">.left-lg-1</div>
 </div>
 ```
+
+## Negative offset columns
+
+Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/marketing-variables/).
+
+```html
+<div class="clearfix">
+  <div class="offset-n1 col-3 border p-3">.offset-n1</div>
+  <div class="offset-n2 col-3 border p-3">.offset-n2</div>
+</div>
+```

src/marketing/utilities/layout.scss

@@ -18,3 +18,12 @@
     }
   }
 }
+
+// Negative offset columns
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @for $offset from 1 through 7 {
+      .offset#{$variant}-n#{$offset} { margin-left: -($offset / 12 * 100%); }
+    }
+  }
+}