primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 12:42:32 +03:00
Code Issues Projects Releases Wiki Activity

update docs with new copy and new scale

Browse Source
This commit is contained in:
Catherine Bui 2017-11-17 11:59:02 -08:00
parent 4b6e983b37
commit 7ab3261bbf
3 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
modules/primer-marketing-support/README.md
View File

@ -27,23 +27,30 @@ The source files included are written in [Sass][sass] (`scss`) You can simply po
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._ 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._
<!-- %docs
title:
status:
-->
## Documentation ## Documentation
### Extended spacing scale ### Extended spacing scale
This module includes extra variables that extend the Primer spacing scale for marketing site needs. 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 from where the `primer-core` spacing scale ends, we are stepping up by 16px increments...
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 | | Scale | Value |
|-------|-------| |-------|-------|
| 7 | 56 | | 7 | 48 |
| 8 | 72 | | 8 | 64 |
| 9 | 88 | | 9 | 80 |
| 10 | 104 | | 10 | 96 |
| 11 | 120 | | 11 | 112 |
| 12 | 128 |
This is useful for when we want to achieve bigger vertical spacing between sections on marketing sites. See [primer-marketing-utilities](../primer-marketing-utilities) for related spacing utilities.
See [primer-marketing-utilities](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-utilities) for related spacing utilities. <!-- %enddocs -->
## License ## License

15
modules/primer-marketing-utilities/docs/margin.md
View File

@ -1,17 +1,14 @@
--- ---
title: Margin title: Marketing Margin
status: New release status: New release
status_issue: https://github.com/github/design-systems/issues/378 status_issue: https://github.com/github/design-systems/issues/378
--- ---
Margin spacing utilities can be applied to elements to achieve bigger y-directional spaces beyond the `primer-core` spacing scale. 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.
See [primer-marketing-support](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-support) for the extended marketing spacing scale.
## Y-Directional margin spacing ## Y-axis margin utilities
Use y-directional utilities to apply margin to the top, bottom or Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 7-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.
Note: The marketing spacing scale extends the core 0-6 scale. See [primer-marketing-support](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-support) for the extended marketing spacing scale.
```html ```html
<div class="margin-orange d-inline-block"> <div class="margin-orange d-inline-block">
@ -25,9 +22,9 @@ Note: The marketing spacing scale extends the core 0-6 scale. See [primer-market
</div> </div>
``` ```
## Responsive y-directional margins ## Responsive y-axis margin utilities
All y-directional 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. 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.
```html ```html
<div class="d-inline-block margin-orange"> <div class="d-inline-block margin-orange">

15
modules/primer-marketing-utilities/docs/padding.md
View File

@ -1,17 +1,14 @@
--- ---
title: Padding title: Marketing Padding
status: New release status: New release
status_issue: https://github.com/github/design-systems/issues/378 status_issue: https://github.com/github/design-systems/issues/378
--- ---
Padding spacing utilities can be applied to elements to achieve bigger y-directional spaces beyond the `primer-core` spacing scale. 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.
See [primer-marketing-support](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-support) for the extended marketing spacing scale.
## Y-Directional padding spacing ## Y-axis padding utilities
Use y-directional utilities to apply padding to the top, bottom or Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 7-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.
Note: The marketing spacing scale extends the core 0-6 scale. See [primer-marketing-support](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-support) for the extended marketing spacing scale.
```html ```html
<div class="margin-orange d-inline-block"> <div class="margin-orange d-inline-block">
@ -25,9 +22,9 @@ Note: The marketing spacing scale extends the core 0-6 scale. See [primer-market
</div> </div>
``` ```
## Responsive y-directional padding ## Responsive y-axis padding utilities
All y-directional 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. 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.
```html ```html
<div class="d-inline-block margin-orange"> <div class="d-inline-block margin-orange">