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-support](https://npm.im/primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/utilities/marketing-margin) and [padding](/utilities/marketing-padding).
@ -24,7 +24,20 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities.
See [primer-marketing-support](/support/marketing-variables) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/utilities/marketing-margin) and [padding](/utilities/marketing-padding).
### Extended spacing scale
These are primarily useful for achieving bigger vertical spacing between sections. This scale first steps up with `8px` for spacer 7, then steps in increments of `16px` from spacer 8 up to 12.
| Variable | Scale | Value |
| ------------ |-------|-------|
| `$spacer-7` | 7 | 48px |
| `$spacer-8` | 8 | 64px |
| `$spacer-9` | 9 | 80px |
| `$spacer-10` | 10 | 96px |
| `$spacer-11` | 11 | 112px |
| `$spacer-12` | 12 | 128px |
The extended spacing scale is used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities along the Y-axis, as well as for single side spacing utilities (top, right, bottom, left).
Margin utilities are based on a global [spacing scale](/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
## Naming convention
Since margin utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
@ -17,21 +16,26 @@ Since margin utilities have many variations and will be used in many places, we
| Shorthand | Description |
| --- | --- |
| m | margin |
| t | top |
| r | right |
| b | bottom |
| l | left |
| x | horizontal, left & right |
| y | vertical, top & bottom |
| 0 | 0 |
| 1 | 4px |
| 2 | 8px |
| 3 | 16px |
| 4 | 24px |
| 5 | 32px |
| 6 | 40px |
| m | margin |
| t | top |
| r | right |
| b | bottom |
| l | left |
| x | horizontal, left & right |
| y | vertical, top & bottom |
| 0 | 0 |
| 1 | 4px |
| 2 | 8px |
| 3 | 16px |
| 4 | 24px |
| 5 | 32px |
| 6 | 40px |
| 7 | 48px |
| 8 | 64px |
| 9 | 80px |
| 10 | 96px |
| 11 | 112px |
| 12 | 128px |
## Uniform margins
@ -39,13 +43,13 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
@ -78,8 +95,8 @@ Use `mx-auto`to center block elements with a set width.
Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
```html live
<divclass="bg-yellow border">
<pclass="mb-0 bg-gray p-1">No bottom margin on this paragraph.</p>
<divclass="color-bg-warning border">
<pclass="mb-0 color-bg-secondary p-1">No bottom margin on this paragraph.</p>
</div>
```
@ -88,8 +105,8 @@ Reset margins built into typography elements or other components with `m-0`, `mt
All margin utilities can be adjusted per [breakpoint](/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
@ -97,14 +114,28 @@ All margin utilities can be adjusted per [breakpoint](/objects/grid#breakpoints)
## Negative margins
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`, where `spacer` runs from `1` to `6`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
@ -29,7 +29,7 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
## 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/).
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/spacing/#extended-spacing-scale).
Marketing margin utilities extend [core margin utilities](/utilities/margin). The [marketing scale](/support/marketing-variables#extended-spacing-scale) starts from spacer `7` up to `12`.
**Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
Marketing padding utilities extend [core padding utilities](/utilities/padding). The [marketing scale](/support/marketing-variables#extended-spacing-scale) starts from spacer `7` up to `12`. All directions and their responsive variants are supported, except for `px`.
The extended directional padding scale starts from spacer `7` and goes up to `12`. All directions and their responsive variants are supported, except for `px`.
All padding utilities can be adjusted per [breakpoint](/support/breakpoints) using the following formula: <br/>`p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.