Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve margin/padding docs #1012

Merged
merged 7 commits into from
Jan 23, 2020
Merged

Improve margin/padding docs #1012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
77ae07e
Fix link to "spacing scale"
simurai Jan 3, 2020
e20330c
Improve padding docs
simurai Jan 3, 2020
fd9a278
Fix more links
simurai Jan 3, 2020
a523e34
Simplify marketing padding utilities
simurai Jan 3, 2020
628e4e2
Improve margin docs
simurai Jan 3, 2020
04fd885
Simplify marketing margin
simurai Jan 3, 2020
64e0f95
Mention exception
simurai Jan 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 31 additions & 50 deletions docs/content/utilities/margin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ source: 'https://github.com/primer/css/blob/master/src/utilities/margin.scss'
bundle: utilities
---

Margin utilities are based on a global [spacing scale](/css/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.
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

Expand All @@ -32,33 +32,20 @@ Since margin utilities have many variations and will be used in many places, we
| 5 | 32px |
| 6 | 40px |

_**Note:** The blue in the examples represents the element, and the orange represents the margin_

## Uniform margins

Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6.

```html live
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue m-0">.m-0</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue m-1">.m-1</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue m-2">.m-2</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue m-3">.m-3</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue m-4">.m-4</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue m-5">.m-5</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue m-6">.m-6</div>
<div class="d-flex flex-items-baseline flex-justify-around">
<div class="bg-yellow"><div class="m-0 p-1 bg-gray">.m-0</div></div>
<div class="bg-yellow"><div class="m-1 p-1 bg-gray">.m-1</div></div>
<div class="bg-yellow"><div class="m-2 p-1 bg-gray">.m-2</div></div>
<div class="bg-yellow"><div class="m-3 p-1 bg-gray">.m-3</div></div>
<div class="bg-yellow"><div class="m-4 p-1 bg-gray">.m-4</div></div>
<div class="bg-yellow"><div class="m-5 p-1 bg-gray">.m-5</div></div>
<div class="bg-yellow"><div class="m-6 p-1 bg-gray">.m-6</div></div>
</div>
```

Expand All @@ -67,23 +54,13 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
Use directional utilities to apply margin to an individual side, or the X and Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 0-6.

```html live
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue mt-3">.mt-3</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue mr-3">.mr-3</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue mb-3">.mb-3</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue ml-3">.ml-3</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue my-3">.my-3</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue mx-3">.mx-3</div>
<div class="d-flex flex-items-baseline flex-justify-around">
<div class="bg-yellow"><div class="mt-3 p-1 bg-gray">.mt-3</div></div>
<div class="bg-yellow"><div class="mr-3 p-1 bg-gray">.mr-3</div></div>
<div class="bg-yellow"><div class="mb-3 p-1 bg-gray">.mb-3</div></div>
<div class="bg-yellow"><div class="ml-3 p-1 bg-gray">.ml-3</div></div>
<div class="bg-yellow"><div class="mx-3 p-1 bg-gray">.mx-3</div></div>
<div class="bg-yellow"><div class="my-3 p-1 bg-gray">.my-3</div></div>
</div>
```

Expand All @@ -92,26 +69,28 @@ Use directional utilities to apply margin to an individual side, or the X and Y
Use `mx-auto`to center block elements with a set width.

```html live
<div class="margin-orange">
<div class="block-blue mx-auto text-center" style="width: 5rem;">.mx-auto</div>
<div class="bg-yellow">
<div class="mx-auto bg-gray text-center" style="max-width: 500px;">.mx-auto</div>
</div>
```

## Reset margins
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
<p class="mb-0 block-blue">No bottom margin on this paragraph.</p>
<div class="bg-yellow border">
<p class="mb-0 bg-gray p-1">No bottom margin on this paragraph.</p>
</div>
```

## Responsive margins

All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
All margin utilities, except `mx-auto`, 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.

```html live
<div class="d-inline-block margin-orange">
<div class="mx-sm-2 mx-lg-4 d-inline-block block-blue">
.mx-sm-2 .mx-lg-4
<div class="bg-yellow d-inline-block">
<div class="mx-sm-2 mx-md-4 bg-gray p-1">
.mx-sm-2 .mx-md-4
</div>
</div>
```
Expand All @@ -121,9 +100,11 @@ All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/css/ob
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]`.

```html live
<div class="d-inline-block margin-orange p-3">
<div class="d-inline-block block-blue mt-n4 mr-lg-n4">
.mt-n4 .mr-lg-n6
<div class="d-flex flex-justify-center">
<div class="bg-yellow">
<div class="m-3 ml-n4 ml-md-n6 border-left border-red bg-gray p-2">
.m-3 .ml-n4 .ml-md-n6
</div>
</div>
</div>
```
34 changes: 8 additions & 26 deletions docs/content/utilities/marketing-margin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,15 @@ source: 'https://github.com/primer/css/blob/master/src/marketing/utilities/margi
bundle: marketing-utilities
---

Marketing margin utilities extend [core margin utilities](/css/support/spacing) across the y-axis only. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) 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.
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`.


## 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 live
<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](/css/objects/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
**Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.

```html live
<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>
<div class="bg-yellow d-inline-block"><div class="mt-7 p-1 bg-gray">.mb-7</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-8 p-1 bg-gray">.mb-8</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-9 p-1 bg-gray">.mb-9</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-10 p-1 bg-gray">.mb-10</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-11 p-1 bg-gray">.mb-11</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-12 p-1 bg-gray">.mb-12</div></div>
```
42 changes: 7 additions & 35 deletions docs/content/utilities/marketing-padding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,13 @@ source: 'https://github.com/primer/css/tree/master/src/marketing/utilities/paddi
bundle: marketing-utilities
---

Marketing padding utilities extend [core margin utilities](/css/utilities/margin) across the x and y axis. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) 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.

## Padding utilities

Use marketing padding utilities to apply padding to top, right, bottom, left, x-axis, or 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 live
<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 pr-7">.pr-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 pl-7">.pl-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue px-7">.px-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue py-7">.py-7</div>
</div>
```

## Responsive padding utilities

All marketing padding utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
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`.

```html live
<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>
<div class="pt-7 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-7</div></div>
<div class="pt-8 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-8</div></div>
<div class="pt-9 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-9</div></div>
<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
<div class="pt-11 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-11</div></div>
<div class="pt-12 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
```
80 changes: 28 additions & 52 deletions docs/content/utilities/padding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ source: 'https://github.com/primer/css/tree/master/src/utilities/padding.scss'
bundle: utilities
---

Padding utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
Padding 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 could share the same properties, and allows to achieve many different page layouts using the same styles.




## Shorthand

Expand Down Expand Up @@ -38,76 +38,52 @@ _**Note:** The blue in the examples below represents the element, and the green
Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6.

```html live
<div class="padding-green d-inline-block p-0">
<div class="d-inline-block block-blue">.p-0</div>
</div>
<div class="padding-green d-inline-block p-1">
<div class="d-inline-block block-blue">.p-1</div>
</div>
<div class="padding-green d-inline-block p-2">
<div class="d-inline-block block-blue">.p-2</div>
</div>
<div class="padding-green d-inline-block p-3">
<div class="d-inline-block block-blue">.p-3</div>
</div>
<div class="padding-green d-inline-block p-4">
<div class="d-inline-block block-blue">.p-4</div>
</div>
<div class="padding-green d-inline-block p-5">
<div class="d-inline-block block-blue">.p-5</div>
</div>
<div class="padding-green d-inline-block p-6">
<div class="d-inline-block block-blue">.p-6</div>
</div>
<div class="p-0 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-0</div></div>
<div class="p-1 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-1</div></div>
<div class="p-2 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-2</div></div>
<div class="p-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-3</div></div>
<div class="p-4 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-4</div></div>
<div class="p-5 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-5</div></div>
<div class="p-6 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-6</div></div>
```

## Directional padding

Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6.

```html live
<div class="padding-green d-inline-block pt-3">
<div class="d-inline-block block-blue">.pt-3</div>
</div>
<div class="padding-green d-inline-block pr-3">
<div class="d-inline-block block-blue">.pr-3</div>
</div>
<div class="padding-green d-inline-block pb-3">
<div class="d-inline-block block-blue">.pb-3</div>
</div>
<div class="padding-green d-inline-block pl-3">
<div class="d-inline-block block-blue">.pl-3</div>
</div>
<div class="padding-green d-inline-block py-3">
<div class="d-inline-block block-blue">.py-3</div>
</div>
<div class="padding-green d-inline-block px-3">
<div class="d-inline-block block-blue">.px-3</div>
</div>
<div class="pt-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-3</div></div>
<div class="pr-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.pr-3</div></div>
<div class="pb-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.pb-3</div></div>
<div class="pl-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.pl-3</div></div>
<div class="py-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.py-3</div></div>
<div class="px-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.px-3</div></div>
```

## Responsive padding

All padding utilities can be adjusted per [breakpoint](/css/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
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.

```html live
<div class="px-sm-2 px-lg-4 d-inline-block padding-green">
<div class="d-inline-block block-blue">
.px-sm-2 .px-lg-4
</div>
<div class="px-sm-2 px-md-4 bg-yellow d-inline-block">
<div class="bg-gray p-1">.px-sm-2 .px-md-4</div>
</div>
```

## Responsive container padding

`.p-responsive` is a padding class that adds padding on the left and right sides of an element. On small screens, it gives the element padding of `$spacer-3`, on mid-sized screens it gives the element padding of `$spacer-6`, and on large screens, it gives the element padding of `$spacer-3`.
`.p-responsive` is a padding class that adds padding on the left and right sides of an element. It is intended to be used with [container styles](/objects/grid#containers).

It is intended to be used with [container styles](/css/objects/grid#containers)
- On **0 to sm** screens, it gives the element padding of `$spacer-3`
- On **sm to lg** screens it gives the element padding of `$spacer-6`
- On **lg and wider** screens, it gives the element padding of `$spacer-3`

It's the equvilent of adding the `.px-3 .px-sm-6 .px-lg-3` utility classes.

```html live
<div class="container-lg p-responsive">
<div class="border">
.container-lg .p-responsive
</div>
<div class="p-responsive bg-yellow">
<div class="bg-gray p-1">.p-responsive</div>
</div>
```

> Note: Since the example is shown in an `iframe` it won't show the change to `$spacer-3` for the `lg` breakpoint.