Skip to content

Commit 6ffd8ae

Browse files
broccolinibroccolini
authored
Merge pull request #376 from primer/increase-spacing-scale
Increase spacing scale
2 parents 3637e04 + 7b55844 commit 6ffd8ae

File tree

10 files changed

+264
-28
lines changed

10 files changed

+264
-28
lines changed

‎modules/primer-marketing-support/README.md‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,6 @@
99
1010
This repository is a module of the full [primer][primer] repository.
1111

12-
## Documentation
13-
14-
<!-- %docs
15-
title: Variables
16-
status: In review
17-
-->
18-
19-
Documentation & refactor coming very soon
20-
21-
<!-- %enddocs -->
22-
2312
## Install
2413

2514
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
3827

3928
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._
4029

30+
## Documentation
31+
32+
<!-- %docs
33+
title: Marketing support
34+
status: new release
35+
-->
36+
37+
### Extended spacing scale
38+
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.
39+
40+
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.
41+
42+
| Scale | Value |
43+
|-------|-------|
44+
| 7 | 48 |
45+
| 8 | 64 |
46+
| 9 | 80 |
47+
| 10 | 96 |
48+
| 11 | 112 |
49+
| 12 | 128 |
50+
51+
See [primer-marketing-utilities](../primer-marketing-utilities) for related spacing utilities.
52+
53+
<!-- %enddocs -->
54+
4155
## License
4256

4357
MIT &copy; [GitHub](https://github.com/)

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

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

‎modules/primer-marketing-utilities/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ $ npm run build
3333

3434
## Documentation
3535

36-
You can read more about utilities in the [docs folder](./docs/)
36+
You can read more about utilities in the [docs folder](./docs/).
3737

3838
## License
3939

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Marketing Margin
3+
status: New release
4+
status_issue: https://github.com/github/design-systems/issues/378
5+
---
6+
7+
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.
8+
9+
## Y-axis margin utilities
10+
11+
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.
12+
13+
```html
14+
<div class="margin-orange d-inline-block">
15+
<div class="d-inline-block block-blue mt-7">.mt-7</div>
16+
</div>
17+
<div class="margin-orange d-inline-block">
18+
<div class="d-inline-block block-blue mb-7">.mb-7</div>
19+
</div>
20+
<div class="margin-orange d-inline-block">
21+
<div class="d-inline-block block-blue my-7">.my-7</div>
22+
</div>
23+
```
24+
25+
## Responsive y-axis margin utilities
26+
27+
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.
28+
29+
```html
30+
<div class="d-inline-block margin-orange">
31+
<div class="my-sm-7 mb-lg-9 d-inline-block block-blue">
32+
.my-sm-7 .mb-lg-9
33+
</div>
34+
</div>
35+
```

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Marketing Padding
3+
status: New release
4+
status_issue: https://github.com/github/design-systems/issues/378
5+
---
6+
7+
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.
8+
9+
## Y-axis padding utilities
10+
11+
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.
12+
13+
```html
14+
<div class="margin-orange d-inline-block">
15+
<div class="d-inline-block block-blue pt-7">.pt-7</div>
16+
</div>
17+
<div class="margin-orange d-inline-block">
18+
<div class="d-inline-block block-blue pb-7">.pb-7</div>
19+
</div>
20+
<div class="margin-orange d-inline-block">
21+
<div class="d-inline-block block-blue py-7">.py-7</div>
22+
</div>
23+
```
24+
25+
## Responsive y-axis padding utilities
26+
27+
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.
28+
29+
```html
30+
<div class="d-inline-block margin-orange">
31+
<div class="py-sm-7 pb-lg-9 d-inline-block block-blue">
32+
.py-sm-7 .pb-lg-9
33+
</div>
34+
</div>
35+
```

‎modules/primer-marketing-utilities/index.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
@import "primer-support/index.scss";
2+
@import "primer-marketing-support/index.scss";
23
// utilities
34
@import "./lib/filters.scss";
45
@import "./lib/borders.scss";
56
@import "./lib/layout.scss";
7+
@import "./lib/margin.scss";
8+
@import "./lib/padding.scss";

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Margin spacer utilities for marketing
2+
// Utilities only added for y-direction margin (i.e. top & bottom)
3+
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
4+
@for $i from 1 through length($marketingSpacers) {
5+
$size: #{nth($marketingSpacers, $i)};
6+
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
7+
8+
/* Set a #{$size} margin on the top */
9+
.mt-#{$scale} { margin-top : #{$size} !important; }
10+
/* Set a #{$size} margin on the bottom */
11+
.mb-#{$scale} { margin-bottom: #{$size} !important; }
12+
13+
/* Set a #{$size} margin on the top & bottom */
14+
.my-#{$scale} {
15+
margin-top : #{$size} !important;
16+
margin-bottom: #{$size} !important;
17+
}
18+
}
19+
20+
// Loop through the breakpoint values
21+
@each $breakpoint in map-keys($breakpoints) {
22+
23+
// Loop through the spacer values
24+
@for $i from 1 through length($marketingSpacers) {
25+
@include breakpoint($breakpoint) {
26+
$size: #{nth($marketingSpacers, $i)}; // sm, md, lg, xl
27+
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
28+
29+
/* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
30+
.mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
31+
/* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
32+
.mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
33+
34+
/* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
35+
.my-#{$breakpoint}-#{$scale} {
36+
margin-top: #{$size} !important;
37+
margin-bottom: #{$size} !important;
38+
}
39+
}
40+
}
41+
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Padding spacer utilities for marketing
2+
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
3+
// stylelint-disable comment-empty-line-before
4+
@for $i from 1 through length($marketingSpacers) {
5+
$size: #{nth($marketingSpacers, $i)};
6+
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
7+
8+
/* Set a #{$size} padding to the top */
9+
.pt-#{$scale} { padding-top : #{$size} !important; }
10+
/* Set a #{$size} padding to the bottom */
11+
.pb-#{$scale} { padding-bottom: #{$size} !important; }
12+
13+
/* Set a #{$size} padding to the top & bottom */
14+
.py-#{$scale} {
15+
padding-top: #{$size} !important;
16+
padding-bottom: #{$size} !important;
17+
}
18+
}
19+
20+
// Responsive padding spacer utilities
21+
22+
// Loop through the breakpoint values
23+
@each $breakpoint in map-keys($breakpoints) {
24+
25+
// Loop through the spacer values
26+
@for $i from 1 through length($marketingSpacers) {
27+
@include breakpoint($breakpoint) {
28+
$size: #{nth($marketingSpacers, $i)}; // xs, sm, md, lg, xl
29+
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
30+
31+
/* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
32+
.pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
33+
/* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
34+
.pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
35+
36+
/* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
37+
.py-#{$breakpoint}-#{$scale} {
38+
padding-top: #{$size} !important;
39+
padding-bottom: #{$size} !important;
40+
}
41+
}
42+
}
43+
}

‎modules/primer-marketing-utilities/stories.js‎

Lines changed: 68 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,72 @@ import React from 'react'
22
import { storiesOf } from '@storybook/react'
33

44
storiesOf('Marketing utilities', module)
5-
.add('Responsive borders', () => (
6-
<div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
7-
))
8-
.add('border-white-fade', () => (
9-
<div className='bg-blue text-white p-3'>
10-
<span className='border border-white-fade p-2'>
11-
.border-white-fade
12-
</span>
13-
</div>
14-
))
15-
.add('Responsive position', () => (
16-
<div className='position-relative p-6 bg-gray'>
17-
<div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
18-
.position-md-absolute
19-
</div>
5+
.add('Responsive borders', () => (
6+
<div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
7+
))
8+
.add('border-white-fade', () => (
9+
<div className='bg-blue text-white p-3'>
10+
<span className='border border-white-fade p-2'>
11+
.border-white-fade
12+
</span>
2013
</div>
21-
))
14+
))
15+
.add('Responsive position', () => (
16+
<div className='position-relative p-6 bg-gray'>
17+
<div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
18+
.position-md-absolute
19+
</div>
20+
</div>
21+
))
22+
.add('Y directional margin', () => (
23+
<div>
24+
<div className="d-inline-block mr-6">
25+
<div className="d-inline-block mt-7 bg-blue-light">.mt-7</div>
26+
</div>
27+
<div className="d-inline-block mr-6">
28+
<div className="d-inline-block mb-7 bg-blue-light">.mb-7</div>
29+
</div>
30+
<div className="d-inline-block mr-6">
31+
<div className="d-inline-block my-7 bg-blue-light">.my-7</div>
32+
</div>
33+
</div>
34+
))
35+
.add('Y directional responsive margin', () => (
36+
<div>
37+
<div className="d-inline-block mr-6">
38+
<div className="d-inline-block mt-sm-7 bg-blue-light">.mt-sm-7</div>
39+
</div>
40+
<div className="d-inline-block mr-6">
41+
<div className="d-inline-block mb-md-7 bg-blue-light">.mb-md-7</div>
42+
</div>
43+
<div className="d-inline-block mr-6">
44+
<div className="d-inline-block my-lg-7 bg-blue-light">.my-lg-7</div>
45+
</div>
46+
</div>
47+
))
48+
.add('Y directional padding', () => (
49+
<div>
50+
<div className="d-inline-block mr-6">
51+
<div className="d-inline-block pt-7 bg-blue-light">.pt-7</div>
52+
</div>
53+
<div className="d-inline-block mr-6">
54+
<div className="d-inline-block pb-7 bg-blue-light">.pb-7</div>
55+
</div>
56+
<div className="d-inline-block mr-6">
57+
<div className="d-inline-block py-7 bg-blue-light">.py-7</div>
58+
</div>
59+
</div>
60+
))
61+
.add('Y directional responsive padding', () => (
62+
<div>
63+
<div className="d-inline-block mr-6">
64+
<div className="d-inline-block pt-sm-7 bg-blue-light">.pt-sm-7</div>
65+
</div>
66+
<div className="d-inline-block mr-6">
67+
<div className="d-inline-block pb-md-7 bg-blue-light">.pb-md-7</div>
68+
</div>
69+
<div className="d-inline-block mr-6">
70+
<div className="d-inline-block py-lg-7 bg-blue-light">.py-lg-7</div>
71+
</div>
72+
</div>
73+
))

‎modules/primer-support/docs/spacing.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
2121

2222
The spacing scale is used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities, and via variables within components.
2323

24+
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).
25+
2426
## Em-based spacing
2527
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.
2628

0 commit comments

Comments
 (0)