Merge pull request #376 from primer/increase-spacing-scale

Increase spacing scale

modules/primer-marketing-support/README.md

@@ -9,17 +9,6 @@
 
 This repository is a module of the full [primer][primer] repository.
 
-## Documentation
-
-<!-- %docs
-title: Variables
-status: In review
--->
-
-Documentation & refactor coming very soon
-
-<!-- %enddocs -->
-
 ## Install
 
 This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `support` with this command.
@@ -38,6 +27,31 @@ The source files included are written in [Sass][sass] (`scss`) You can simply po
 
 You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
 
+## Documentation
+
+<!-- %docs
+title: Marketing support
+status: new release
+-->
+
+### Extended spacing scale
+This module extends the `primer-core` spacing scale for marketing site needs. These are useful for achieving bigger vertical spacing between sections on marketing sites.
+
+Starting where the `primer-core` spacing scale ends at spacer 6, the marketing scale first steps up with `8px` for spacer 7 then steps in increments of `16px` from spacer 8 up to 12.
+
+| Scale | Value |
+|-------|-------|
+| 7     | 48    |
+| 8     | 64    |
+| 9     | 80    |
+| 10    | 96    |
+| 11    | 112   |
+| 12    | 128   |
+
+See [primer-marketing-utilities](../primer-marketing-utilities) for related spacing utilities.
+
+<!-- %enddocs -->
+
 ## License
 
 MIT &copy; [GitHub](https://github.com/)

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

@@ -1,3 +1,14 @@
 // Type
 $alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
 $alt-mono-font: $mono-font;
+
+// Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
+// i.e. After 40px, we have 48, 64, 80, 96, etc.
+$spacer-7:  $spacer * 6;  // 48px
+$spacer-8:  $spacer * 8;  // 64px
+$spacer-9:  $spacer * 10; // 80px
+$spacer-10: $spacer * 12; // 96px
+$spacer-11: $spacer * 14; // 112px
+$spacer-12: $spacer * 16; // 128px
+
+$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11;

modules/primer-marketing-utilities/README.md

@@ -33,7 +33,7 @@ $ npm run build
 
 ## Documentation
 
-You can read more about utilities in the [docs folder](./docs/)
+You can read more about utilities in the [docs folder](./docs/).
 
 ## License
 

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

@@ -0,0 +1,35 @@
+---
+title: Marketing Margin
+status: New release
+status_issue: https://github.com/github/design-systems/issues/378
+---
+
+Marketing margin utilities extend [core margin utilities](../../primer-marketing-support/docs/spacing) across the y-axis only. The [marketing scale](../../primer-marketing-support) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
+
+## Y-axis margin utilities
+
+Use marketing margin utilities to apply margin to top, bottom, or both y-axis of an element. These utilities can change or override default margins, and can be used with a spacing scale of 7-12.
+
+```html
+<div class="margin-orange d-inline-block">
+  <div class="d-inline-block block-blue mt-7">.mt-7</div>
+</div>
+<div class="margin-orange d-inline-block">
+  <div class="d-inline-block block-blue mb-7">.mb-7</div>
+</div>
+<div class="margin-orange d-inline-block">
+  <div class="d-inline-block block-blue my-7">.my-7</div>
+</div>
+```
+
+## Responsive y-axis margin utilities
+
+All marketing margin utilities can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+
+```html
+<div class="d-inline-block margin-orange">
+  <div class="my-sm-7 mb-lg-9 d-inline-block block-blue">
+    .my-sm-7 .mb-lg-9
+  </div>
+</div>
+```

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

@@ -0,0 +1,35 @@
+---
+title: Marketing Padding
+status: New release
+status_issue: https://github.com/github/design-systems/issues/378
+---
+
+Marketing padding utilities extend [core margin utilities](../../primer-marketing-support/docs/spacing) across the y-axis only. The [marketing scale](../../primer-marketing-support) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
+
+## Y-axis padding utilities
+
+Use marketing padding utilities to apply padding to top, bottom, or both y-axis of an element. These utilities can change or override default padding, and can be used with a spacing scale of 7-12.
+
+```html
+<div class="margin-orange d-inline-block">
+  <div class="d-inline-block block-blue pt-7">.pt-7</div>
+</div>
+<div class="margin-orange d-inline-block">
+  <div class="d-inline-block block-blue pb-7">.pb-7</div>
+</div>
+<div class="margin-orange d-inline-block">
+  <div class="d-inline-block block-blue py-7">.py-7</div>
+</div>
+```
+
+## Responsive y-axis padding utilities
+
+All marketing padding utilities can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+
+```html
+<div class="d-inline-block margin-orange">
+  <div class="py-sm-7 pb-lg-9 d-inline-block block-blue">
+    .py-sm-7 .pb-lg-9
+  </div>
+</div>
+```

modules/primer-marketing-utilities/index.scss

@@ -1,5 +1,8 @@
 @import "primer-support/index.scss";
+@import "primer-marketing-support/index.scss";
 // utilities
 @import "./lib/filters.scss";
 @import "./lib/borders.scss";
 @import "./lib/layout.scss";
+@import "./lib/margin.scss";
+@import "./lib/padding.scss";

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

@@ -0,0 +1,41 @@
+// Margin spacer utilities for marketing
+// Utilities only added for y-direction margin (i.e. top & bottom)
+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
+@for $i from 1 through length($marketingSpacers) {
+  $size: #{nth($marketingSpacers, $i)};
+  $scale: #{$i + 6};  // 7, 8, 9, 10, 11
+
+  /* Set a #{$size} margin on the top */
+  .mt-#{$scale} { margin-top   : #{$size} !important; }
+  /* Set a #{$size} margin on the bottom */
+  .mb-#{$scale} { margin-bottom: #{$size} !important; }
+
+  /* Set a #{$size} margin on the top & bottom */
+  .my-#{$scale} {
+    margin-top   : #{$size} !important;
+    margin-bottom: #{$size} !important;
+  }
+}
+
+// Loop through the breakpoint values
+@each $breakpoint in map-keys($breakpoints) {
+
+  // Loop through the spacer values
+  @for $i from 1 through length($marketingSpacers) {
+    @include breakpoint($breakpoint) {
+      $size: #{nth($marketingSpacers, $i)}; // sm, md, lg, xl
+      $scale: #{$i + 6};  // 7, 8, 9, 10, 11
+
+      /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
+      .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
+      /* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
+      .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
+
+      /* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
+      .my-#{$breakpoint}-#{$scale} {
+        margin-top: #{$size} !important;
+        margin-bottom: #{$size} !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+// Padding spacer utilities for marketing
+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
+// stylelint-disable comment-empty-line-before
+@for $i from 1 through length($marketingSpacers) {
+  $size: #{nth($marketingSpacers, $i)};
+  $scale: #{$i + 6};  // 7, 8, 9, 10, 11
+
+  /* Set a #{$size} padding to the top */
+  .pt-#{$scale}  { padding-top   : #{$size} !important; }
+  /* Set a #{$size} padding to the bottom */
+  .pb-#{$scale}  { padding-bottom: #{$size} !important; }
+
+  /* Set a #{$size} padding to the top & bottom */
+  .py-#{$scale} {
+    padding-top: #{$size} !important;
+    padding-bottom: #{$size} !important;
+  }
+}
+
+// Responsive padding spacer utilities
+
+// Loop through the breakpoint values
+@each $breakpoint in map-keys($breakpoints) {
+
+  // Loop through the spacer values
+  @for $i from 1 through length($marketingSpacers) {
+    @include breakpoint($breakpoint) {
+      $size: #{nth($marketingSpacers, $i)}; // xs, sm, md, lg, xl
+      $scale: #{$i + 6};  // 7, 8, 9, 10, 11
+
+      /* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
+      .pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
+      /* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
+      .pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
+
+      /* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
+      .py-#{$breakpoint}-#{$scale} {
+        padding-top: #{$size} !important;
+        padding-bottom: #{$size} !important;
+      }
+    }
+  }
+}

modules/primer-marketing-utilities/stories.js

@@ -2,20 +2,72 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 
 storiesOf('Marketing utilities', module)
-.add('Responsive borders', () => (
-  <div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
-))
-.add('border-white-fade', () => (
-<div className='bg-blue text-white p-3'>
-  <span className='border border-white-fade p-2'>
-    .border-white-fade
-  </span>
-</div>
-))
-.add('Responsive position', () => (
-  <div className='position-relative p-6 bg-gray'>
-    <div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
-      .position-md-absolute
-    </div>
+  .add('Responsive borders', () => (
+    <div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
+  ))
+  .add('border-white-fade', () => (
+  <div className='bg-blue text-white p-3'>
+    <span className='border border-white-fade p-2'>
+      .border-white-fade
+    </span>
   </div>
-))
+  ))
+  .add('Responsive position', () => (
+    <div className='position-relative p-6 bg-gray'>
+      <div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
+        .position-md-absolute
+      </div>
+    </div>
+  ))
+  .add('Y directional margin', () => (
+    <div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block mt-7 bg-blue-light">.mt-7</div>
+      </div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block mb-7 bg-blue-light">.mb-7</div>
+      </div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block my-7 bg-blue-light">.my-7</div>
+      </div>
+    </div>
+  ))
+  .add('Y directional responsive margin', () => (
+    <div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block mt-sm-7 bg-blue-light">.mt-sm-7</div>
+      </div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block mb-md-7 bg-blue-light">.mb-md-7</div>
+      </div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block my-lg-7 bg-blue-light">.my-lg-7</div>
+      </div>
+    </div>
+  ))
+  .add('Y directional padding', () => (
+    <div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block pt-7 bg-blue-light">.pt-7</div>
+      </div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block pb-7 bg-blue-light">.pb-7</div>
+      </div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block py-7 bg-blue-light">.py-7</div>
+      </div>
+    </div>
+  ))
+  .add('Y directional responsive padding', () => (
+    <div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block pt-sm-7 bg-blue-light">.pt-sm-7</div>
+      </div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block pb-md-7 bg-blue-light">.pb-md-7</div>
+      </div>
+      <div className="d-inline-block mr-6">
+        <div className="d-inline-block py-lg-7 bg-blue-light">.py-lg-7</div>
+      </div>
+    </div>
+  ))

modules/primer-support/docs/spacing.md

@@ -21,6 +21,8 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
 
 The spacing scale is used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities, and via variables within components.
 
+See [primer-marketing-support](../primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../primer-marketing-utilities/docs/margin.md) and [padding](../primer-marketing-utilities/docs/padding.md).
+
 ## Em-based spacing
 Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values so that, in combination with typography and line-height, the total height lands on sensible numbers.