primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-28 22:01:43 +03:00
Code Issues Projects Releases Wiki Activity

fix padding links

Browse Source
This commit is contained in:
Emily 2018-05-07 09:23:39 -07:00
parent df57376e99
commit 9bad625607
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/primer-utilities/docs/padding.md
View File

@ -3,7 +3,7 @@ title: Padding
status: Stable status: Stable
--- ---
Padding utilities are based on a global [spacing scale](/styleguide/css/styles/core/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.
{:toc} {:toc}
@ -85,7 +85,7 @@ Use directional utilities to apply padding to an individual side, or the X and Y
## Responsive padding ## Responsive padding
All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/core/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 ```html
<div class="px-sm-2 px-lg-4 d-inline-block padding-green"> <div class="px-sm-2 px-lg-4 d-inline-block padding-green">
@ -99,7 +99,7 @@ All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/co
`.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. 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`.
It is intended to be used with [container styles](/styleguide/css/styles/core/objects/grid#containers) It is intended to be used with [container styles](../../objects/grid#containers)
```html ```html
<div class="container-lg p-responsive"> <div class="container-lg p-responsive">