mirror of
https://github.com/primer/css.git
synced 2024-09-20 13:17:29 +03:00
Merge pull request #376 from primer/increase-spacing-scale
Increase spacing scale
This commit is contained in:
commit
6ffd8ae099
@ -9,17 +9,6 @@
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
|
||||
## Documentation
|
||||
|
||||
<!-- %docs
|
||||
title: Variables
|
||||
status: In review
|
||||
-->
|
||||
|
||||
Documentation & refactor coming very soon
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `support` with this command.
|
||||
@ -38,6 +27,31 @@ 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._
|
||||
|
||||
## Documentation
|
||||
|
||||
<!-- %docs
|
||||
title: Marketing support
|
||||
status: new release
|
||||
-->
|
||||
|
||||
### Extended spacing scale
|
||||
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-utilities](../primer-marketing-utilities) for related spacing utilities.
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
## License
|
||||
|
||||
MIT © [GitHub](https://github.com/)
|
||||
|
@ -1,3 +1,14 @@
|
||||
// Type
|
||||
$alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
|
||||
$alt-mono-font: $mono-font;
|
||||
|
||||
// Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
|
||||
// i.e. After 40px, we have 48, 64, 80, 96, etc.
|
||||
$spacer-7: $spacer * 6; // 48px
|
||||
$spacer-8: $spacer * 8; // 64px
|
||||
$spacer-9: $spacer * 10; // 80px
|
||||
$spacer-10: $spacer * 12; // 96px
|
||||
$spacer-11: $spacer * 14; // 112px
|
||||
$spacer-12: $spacer * 16; // 128px
|
||||
|
||||
$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11;
|
||||
|
@ -33,7 +33,7 @@ $ npm run build
|
||||
|
||||
## Documentation
|
||||
|
||||
You can read more about utilities in the [docs folder](./docs/)
|
||||
You can read more about utilities in the [docs folder](./docs/).
|
||||
|
||||
## License
|
||||
|
||||
|
35
modules/primer-marketing-utilities/docs/margin.md
Normal file
35
modules/primer-marketing-utilities/docs/margin.md
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Marketing Margin
|
||||
status: New release
|
||||
status_issue: https://github.com/github/design-systems/issues/378
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
## 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
|
||||
<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](/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
|
||||
<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>
|
||||
```
|
35
modules/primer-marketing-utilities/docs/padding.md
Normal file
35
modules/primer-marketing-utilities/docs/padding.md
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Marketing Padding
|
||||
status: New release
|
||||
status_issue: https://github.com/github/design-systems/issues/378
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
## Y-axis padding utilities
|
||||
|
||||
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.
|
||||
|
||||
```html
|
||||
<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 pb-7">.pb-7</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue py-7">.py-7</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive y-axis padding utilities
|
||||
|
||||
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
|
||||
<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>
|
||||
```
|
@ -1,5 +1,8 @@
|
||||
@import "primer-support/index.scss";
|
||||
@import "primer-marketing-support/index.scss";
|
||||
// utilities
|
||||
@import "./lib/filters.scss";
|
||||
@import "./lib/borders.scss";
|
||||
@import "./lib/layout.scss";
|
||||
@import "./lib/margin.scss";
|
||||
@import "./lib/padding.scss";
|
||||
|
41
modules/primer-marketing-utilities/lib/margin.scss
Normal file
41
modules/primer-marketing-utilities/lib/margin.scss
Normal file
@ -0,0 +1,41 @@
|
||||
// Margin spacer utilities for marketing
|
||||
// Utilities only added for y-direction margin (i.e. top & bottom)
|
||||
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
|
||||
@for $i from 1 through length($marketingSpacers) {
|
||||
$size: #{nth($marketingSpacers, $i)};
|
||||
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
||||
|
||||
/* Set a #{$size} margin on the top */
|
||||
.mt-#{$scale} { margin-top : #{$size} !important; }
|
||||
/* Set a #{$size} margin on the bottom */
|
||||
.mb-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
|
||||
/* Set a #{$size} margin on the top & bottom */
|
||||
.my-#{$scale} {
|
||||
margin-top : #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through the breakpoint values
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
|
||||
// Loop through the spacer values
|
||||
@for $i from 1 through length($marketingSpacers) {
|
||||
@include breakpoint($breakpoint) {
|
||||
$size: #{nth($marketingSpacers, $i)}; // sm, md, lg, xl
|
||||
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
||||
|
||||
/* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
|
||||
.mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
|
||||
/* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
|
||||
.mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
|
||||
/* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
|
||||
.my-#{$breakpoint}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
43
modules/primer-marketing-utilities/lib/padding.scss
Normal file
43
modules/primer-marketing-utilities/lib/padding.scss
Normal file
@ -0,0 +1,43 @@
|
||||
// Padding spacer utilities for marketing
|
||||
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
|
||||
// stylelint-disable comment-empty-line-before
|
||||
@for $i from 1 through length($marketingSpacers) {
|
||||
$size: #{nth($marketingSpacers, $i)};
|
||||
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
||||
|
||||
/* Set a #{$size} padding to the top */
|
||||
.pt-#{$scale} { padding-top : #{$size} !important; }
|
||||
/* Set a #{$size} padding to the bottom */
|
||||
.pb-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
|
||||
/* Set a #{$size} padding to the top & bottom */
|
||||
.py-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive padding spacer utilities
|
||||
|
||||
// Loop through the breakpoint values
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
|
||||
// Loop through the spacer values
|
||||
@for $i from 1 through length($marketingSpacers) {
|
||||
@include breakpoint($breakpoint) {
|
||||
$size: #{nth($marketingSpacers, $i)}; // xs, sm, md, lg, xl
|
||||
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
||||
|
||||
/* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
|
||||
.pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
|
||||
/* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
|
||||
.pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
|
||||
/* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
|
||||
.py-#{$breakpoint}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -2,20 +2,72 @@ import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
storiesOf('Marketing utilities', module)
|
||||
.add('Responsive borders', () => (
|
||||
<div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
|
||||
))
|
||||
.add('border-white-fade', () => (
|
||||
<div className='bg-blue text-white p-3'>
|
||||
<span className='border border-white-fade p-2'>
|
||||
.border-white-fade
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
.add('Responsive position', () => (
|
||||
<div className='position-relative p-6 bg-gray'>
|
||||
<div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
|
||||
.position-md-absolute
|
||||
</div>
|
||||
.add('Responsive borders', () => (
|
||||
<div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
|
||||
))
|
||||
.add('border-white-fade', () => (
|
||||
<div className='bg-blue text-white p-3'>
|
||||
<span className='border border-white-fade p-2'>
|
||||
.border-white-fade
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
))
|
||||
.add('Responsive position', () => (
|
||||
<div className='position-relative p-6 bg-gray'>
|
||||
<div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
|
||||
.position-md-absolute
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Y directional margin', () => (
|
||||
<div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block mt-7 bg-blue-light">.mt-7</div>
|
||||
</div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block mb-7 bg-blue-light">.mb-7</div>
|
||||
</div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block my-7 bg-blue-light">.my-7</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Y directional responsive margin', () => (
|
||||
<div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block mt-sm-7 bg-blue-light">.mt-sm-7</div>
|
||||
</div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block mb-md-7 bg-blue-light">.mb-md-7</div>
|
||||
</div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block my-lg-7 bg-blue-light">.my-lg-7</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Y directional padding', () => (
|
||||
<div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block pt-7 bg-blue-light">.pt-7</div>
|
||||
</div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block pb-7 bg-blue-light">.pb-7</div>
|
||||
</div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block py-7 bg-blue-light">.py-7</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('Y directional responsive padding', () => (
|
||||
<div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block pt-sm-7 bg-blue-light">.pt-sm-7</div>
|
||||
</div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block pb-md-7 bg-blue-light">.pb-md-7</div>
|
||||
</div>
|
||||
<div className="d-inline-block mr-6">
|
||||
<div className="d-inline-block py-lg-7 bg-blue-light">.py-lg-7</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
|
@ -21,6 +21,8 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
|
||||
|
||||
The spacing scale is used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities, and via variables within components.
|
||||
|
||||
See [primer-marketing-support](../primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../primer-marketing-utilities/docs/margin.md) and [padding](../primer-marketing-utilities/docs/padding.md).
|
||||
|
||||
## Em-based spacing
|
||||
Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values so that, in combination with typography and line-height, the total height lands on sensible numbers.
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user