primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-06 05:33:07 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1012 from primer/padding

Browse Source 
Improve margin/padding docs
This commit is contained in:
simurai 2020-01-23 13:20:10 +09:00 committed by GitHub
commit c8510aead5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
docs/content/utilities/margin.md
View File

@ -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
@ -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>
```
@ -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>
```
@ -92,8 +69,8 @@ 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>
```
@ -101,17 +78,19 @@ 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
<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>
```
@ -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
docs/content/utilities/marketing-margin.md
View File

@ -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.
**Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
```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.
```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
docs/content/utilities/marketing-padding.md
View File

@ -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.
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="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.
```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
docs/content/utilities/padding.md
View File

@ -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
@ -38,27 +38,13 @@ _**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
@ -66,48 +52,38 @@ Use uniform spacing utilities to apply equal padding to all sides of an element.
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.