diff --git a/modules/primer-marketing-support/README.md b/modules/primer-marketing-support/README.md index 1350f8c577..8b3b8f0314 100644 --- a/modules/primer-marketing-support/README.md +++ b/modules/primer-marketing-support/README.md @@ -9,17 +9,6 @@ This repository is a module of the full [primer][primer] repository. -## Documentation - - - -Documentation & refactor coming very soon - - - ## 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 + + + +### 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. + + + ## License MIT © [GitHub](https://github.com/) diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index cd2ceb3d4e..130f36902b 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/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; diff --git a/modules/primer-marketing-utilities/README.md b/modules/primer-marketing-utilities/README.md index c378937932..f45970aa48 100644 --- a/modules/primer-marketing-utilities/README.md +++ b/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 diff --git a/modules/primer-marketing-utilities/docs/margin.md b/modules/primer-marketing-utilities/docs/margin.md new file mode 100644 index 0000000000..12baa6d8fb --- /dev/null +++ b/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 +
+
.mt-7
+
+
+
.mb-7
+
+
+
.my-7
+
+``` + +## 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 +
+
+ .my-sm-7 .mb-lg-9 +
+
+``` diff --git a/modules/primer-marketing-utilities/docs/padding.md b/modules/primer-marketing-utilities/docs/padding.md new file mode 100644 index 0000000000..71ce6997c0 --- /dev/null +++ b/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 +
+
.pt-7
+
+
+
.pb-7
+
+
+
.py-7
+
+``` + +## 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 +
+
+ .py-sm-7 .pb-lg-9 +
+
+``` diff --git a/modules/primer-marketing-utilities/index.scss b/modules/primer-marketing-utilities/index.scss index 67a7d638fb..31d936b800 100644 --- a/modules/primer-marketing-utilities/index.scss +++ b/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"; diff --git a/modules/primer-marketing-utilities/lib/margin.scss b/modules/primer-marketing-utilities/lib/margin.scss new file mode 100644 index 0000000000..40f20baca7 --- /dev/null +++ b/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; + } + } + } +} diff --git a/modules/primer-marketing-utilities/lib/padding.scss b/modules/primer-marketing-utilities/lib/padding.scss new file mode 100644 index 0000000000..d31bd73279 --- /dev/null +++ b/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; + } + } + } +} diff --git a/modules/primer-marketing-utilities/stories.js b/modules/primer-marketing-utilities/stories.js index cc8ee4c2d4..c88c13b0ba 100644 --- a/modules/primer-marketing-utilities/stories.js +++ b/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', () => ( -
.border-top-0
-)) -.add('border-white-fade', () => ( -
- - .border-white-fade - -
-)) -.add('Responsive position', () => ( -
-
- .position-md-absolute -
+ .add('Responsive borders', () => ( +
.border-top-0
+ )) + .add('border-white-fade', () => ( +
+ + .border-white-fade +
-)) + )) + .add('Responsive position', () => ( +
+
+ .position-md-absolute +
+
+ )) + .add('Y directional margin', () => ( +
+
+
.mt-7
+
+
+
.mb-7
+
+
+
.my-7
+
+
+ )) + .add('Y directional responsive margin', () => ( +
+
+
.mt-sm-7
+
+
+
.mb-md-7
+
+
+
.my-lg-7
+
+
+ )) + .add('Y directional padding', () => ( +
+
+
.pt-7
+
+
+
.pb-7
+
+
+
.py-7
+
+
+ )) + .add('Y directional responsive padding', () => ( +
+
+
.pt-sm-7
+
+
+
.pb-md-7
+
+
+
.py-lg-7
+
+
+ )) diff --git a/modules/primer-support/docs/spacing.md b/modules/primer-support/docs/spacing.md index 9aa448103c..2aa58b26e5 100644 --- a/modules/primer-support/docs/spacing.md +++ b/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.