Updates to marketing utilities for positioning elements

modules/primer-marketing-support/lib/variables.scss

@@ -12,3 +12,4 @@ $spacer-11: $spacer * 14; // 112px
 $spacer-12: $spacer * 16; // 128px
 
 $marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
+$allSpacers: 0, $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;

modules/primer-marketing-utilities/docs/layout.md

@@ -31,3 +31,19 @@ Use responsive position utilities to adjust the position of an element at differ
   default
 </div>
 ```
+
+## Position elements with spacing utilities
+
+Position elements from all four element edges (`top`, `right`, `bottom`, and `left`) using any spacing utility from the global spacing scale and the marketing spacing scale (from `$spacer-1` to `$spacer-12`).
+
+Commonly used with `.position-absolute` to position decorative assets and shapes on marketing sites.
+
+Responsive breakpoints are also supported.
+
+```html
+<div className='position-relative p-6 bg-gray'>
+  <div className='position-absolute top-4 top-md-8 border bg-white p-2'>
+    .position-absolute
+  </div>
+</div>
+```

modules/primer-marketing-utilities/lib/layout.scss

@@ -15,3 +15,36 @@
     .position-#{$breakpoint}-fixed    { position: fixed !important; }
   }
 }
+
+// Utilities to position content
+@for $i from 1 through length($allSpacers) {
+  $size: #{nth($allSpacers, $i)};
+  $scale: #{$i - 1};
+  .top-#{$scale} { top: #{$size} !important; }
+  .right-#{$scale} { right: #{$size} !important; }
+  .bottom-#{$scale} { bottom: #{$size} !important; }
+  .left-#{$scale} { left: #{$size} !important; }
+  .top-n#{$scale} { top: -#{$size} !important; }
+  .right-n#{$scale} { right: -#{$size} !important; }
+  .bottom-n#{$scale} { bottom: -#{$size} !important; }
+  .left-n#{$scale} { left: -#{$size} !important; }
+}
+
+// Responsive utilities to position content
+@each $breakpoint in map-keys($breakpoints) {
+  // Loop through the spacer values
+  @for $i from 1 through length($allSpacers) {
+    @include breakpoint($breakpoint) {
+      $size: #{nth($allSpacers, $i)}; // sm, md, lg, xl
+      $scale: #{$i - 1};
+      .top-#{$breakpoint}-#{$scale} { top: #{$size} !important; }
+      .right-#{$breakpoint}-#{$scale} { right: #{$size} !important; }
+      .bottom-#{$breakpoint}-#{$scale} { bottom: #{$size} !important; }
+      .left-#{$breakpoint}-#{$scale} { left: #{$size} !important; }
+      .top-#{$breakpoint}-n#{$scale} { top: -#{$size} !important; }
+      .right-#{$breakpoint}-n#{$scale} { right: -#{$size} !important; }
+      .bottom-#{$breakpoint}-n#{$scale} { bottom: -#{$size} !important; }
+      .left-#{$breakpoint}-n#{$scale} { left: -#{$size} !important; }
+    }
+  }
+}

modules/primer-marketing-utilities/stories.js

@@ -71,3 +71,10 @@ storiesOf('Marketing utilities', module)
       </div>
     </div>
   ))
+  .add('Absolute position with spacing utils', () => (
+    <div className='position-relative p-6 bg-gray'>
+      <div className='position-absolute top-4 top-md-8 border bg-white p-2'>
+        .position-absolute
+      </div>
+    </div>
+  ))