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

feat(marketing-utilities): add responsive edge position utilities

Browse Source
This commit is contained in:
Shawn Allen 2019-01-23 15:24:45 -08:00 committed by GitHub
commit c9e70d2fac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 146 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/pages/css/.gitignore vendored
View File

@ -35,6 +35,7 @@ utilities/layout.md
utilities/margin.md
utilities/marketing-borders.md
utilities/marketing-filters.md
utilities/marketing-layout.md
utilities/marketing-margin.md
utilities/marketing-padding.md
utilities/marketing-type.md

1
docs/test/urls.js
View File

@ -30,7 +30,6 @@ const exceptions = {
'/packages/primer-product': removed,
'/principles/HTML': moved('/principles/html'),
'/principles/SCSS': moved('/principles/scss'),
'/utilities/marketing-layout': moved('/utilities/layout'),
'/whats_new': redirect('https://github.com/primer/primer/releases'),
'/whats_new/changelog': removed,
'/whats_new/changelog/archived_changelog': removed,

28
modules/primer-marketing-support/lib/variables.scss
View File

@ -29,3 +29,31 @@ $spacer-11: $spacer * 14; // 112px
$spacer-12: $spacer * 16; // 128px
$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
$allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
$marketing-spacers: (
7: $spacer-7,
8: $spacer-8,
9: $spacer-9,
10: $spacer-10,
11: $spacer-11,
12: $spacer-12,
) !default;
$marketing-all-spacers: map-merge(
(
1: $spacer-1,
2: $spacer-2,
3: $spacer-3,
4: $spacer-4,
5: $spacer-5,
6: $spacer-6,
),
$marketing-spacers,
) !default;
$marketing-position-variants: (
"": "",
md: "-md",
lg: "-lg",
) !default;

28
modules/primer-marketing-utilities/docs/layout.md Normal file
View File

@ -0,0 +1,28 @@
---
title: Marketing Layout
sort_title: Layout Marketing
path: utilities/marketing-layout
status: Stable
---
Marketing layout utilities build on top of [primer-core utilities](/css/utilities/layout#position), adding the option of responsive positioning.
{:toc}
## Position elements with spacing utilities
Position elements from all four element edges (`top`, `right`, `bottom`, and `left`) using any spacing utility from the global spacing scale and the marketing spacing scale (from `$spacer-1` to `$spacer-12`), including negative and 0 values.
Commonly used with `.position-absolute` to position decorative assets and shapes on marketing sites.
In an effort to reduce css bloat, responsive breakpoints are only supported for `md` and `lg` breakpoints. There is no support for `sm` and `xl` breakpoints.
```html
<div class="position-relative p-6 bg-gray">
<div class="position-absolute top-2 top-md-0 top-lg-8 border bg-white p-2">
<span class="d-md-none">.top-2</span>
<span class="d-none d-md-inline d-lg-none">.top-md-0</span>
<span class="d-none d-lg-inline">.top-lg-8</span>
</div>
</div>
```

1
modules/primer-marketing-utilities/index.scss
View File

@ -3,5 +3,6 @@
// utilities
@import "./lib/filters.scss";
@import "./lib/borders.scss";
@import "./lib/layout.scss";
@import "./lib/margin.scss";
@import "./lib/padding.scss";

20
modules/primer-marketing-utilities/lib/layout.scss Normal file
View File

@ -0,0 +1,20 @@
// Layout utilities
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
// Responsive utilities to position content
// No utilities for sm and xl breakpoints
@each $breakpoint, $variant in $marketing-position-variants {
@include breakpoint($breakpoint) {
@each $scale, $size in $marketing-all-spacers {
.top#{$variant}-#{$scale} { top: $size !important; }
.right#{$variant}-#{$scale} { right: $size !important; }
.bottom#{$variant}-#{$scale} { bottom: $size !important; }
.left#{$variant}-#{$scale} { left: $size !important; }
.top#{$variant}-n#{$scale} { top: -$size !important; }
.right#{$variant}-n#{$scale} { right: -$size !important; }
.bottom#{$variant}-n#{$scale} { bottom: -$size !important; }
.left#{$variant}-n#{$scale} { left: -$size !important; }
}
}
}

39
modules/primer-marketing-utilities/lib/margin.scss
View File

@ -1,40 +1,17 @@
// 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; }
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@each $scale, $size in $marketing-spacers {
/* Set a #{$size} margin on the top & bottom */
.my-#{$scale} {
margin-top : #{$size} !important;
margin-bottom: #{$size} !important;
}
}
.mt#{$variant}-#{$scale} { margin-top: $size !important; }
.mb#{$variant}-#{$scale} { 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;
.my#{$variant}-#{$scale} {
margin-top: $size !important;
margin-bottom: $size !important;
}
}
}

51
modules/primer-marketing-utilities/lib/padding.scss
View File

@ -1,54 +1,15 @@
// 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 for all sides */
.p-#{$scale} { padding: #{$size} !important; }
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@each $scale, $size in $marketing-spacers {
/* Set a #{$size} padding to the top */
.pt-#{$scale} { padding-top: #{$size} !important; }
/* Set a #{$size} padding to the right */
.pr-#{$scale} { padding-right: #{$size} !important; }
/* Set a #{$size} padding to the bottom */
.pb-#{$scale} { padding-bottom: #{$size} !important; }
/* Set a #{$size} padding to the left */
.pl-#{$scale} { padding-left: #{$size} !important; }
.pt#{$variant}-#{$scale} { padding-top: #{$size} !important; }
.pb#{$variant}-#{$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 all sides at the #{$breakpoint} breakpoint */
.p-#{$breakpoint}-#{$scale} { padding: #{$size} !important; }
/* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
.pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
/* Set a #{$size} padding to the right at the #{$breakpoint} breakpoint */
.pr-#{$breakpoint}-#{$scale} { padding-right: #{$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 left at the #{$breakpoint} breakpoint */
.pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
/* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
.py-#{$breakpoint}-#{$scale} {
.py#{$variant}-#{$scale} {
padding-top: #{$size} !important;
padding-bottom: #{$size} !important;
}

7
modules/primer-marketing-utilities/stories.js
View File

@ -71,3 +71,10 @@ storiesOf('Marketing utilities', module)
</div>
</div>
))
.add('Position with spacing utils', () => (
<div className='position-relative p-6 bg-gray'>
<div className='position-absolute top-2 top-md-0 top-lg-8 border bg-white p-2'>
.position-absolute
</div>
</div>
))

94
package-lock.json generated
View File

@ -850,7 +850,7 @@
"integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==",
"requires": {
"browserslist": "2.11.3",
"caniuse-lite": "1.0.30000929",
"caniuse-lite": "1.0.30000930",
"normalize-range": "0.1.2",
"num2fraction": "1.2.2",
"postcss": "6.0.23",
@ -2175,8 +2175,8 @@
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz",
"integrity": "sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==",
"requires": {
"caniuse-lite": "1.0.30000929",
"electron-to-chromium": "1.3.105"
"caniuse-lite": "1.0.30000930",
"electron-to-chromium": "1.3.106"
}
}
}
@ -2826,8 +2826,8 @@
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
"integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
"requires": {
"caniuse-lite": "1.0.30000929",
"electron-to-chromium": "1.3.105"
"caniuse-lite": "1.0.30000930",
"electron-to-chromium": "1.3.106"
}
},
"buf-compare": {
@ -3080,7 +3080,7 @@
"integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
"requires": {
"browserslist": "1.7.7",
"caniuse-db": "1.0.30000929",
"caniuse-db": "1.0.30000930",
"lodash.memoize": "4.1.2",
"lodash.uniq": "4.5.0"
},
@ -3090,21 +3090,21 @@
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
"integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
"requires": {
"caniuse-db": "1.0.30000929",
"electron-to-chromium": "1.3.105"
"caniuse-db": "1.0.30000930",
"electron-to-chromium": "1.3.106"
}
}
}
},
"caniuse-db": {
"version": "1.0.30000929",
"resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000929.tgz",
"integrity": "sha512-bap0KDH7KJ2Hc4zWb1bBJwsyl+76jOukW6TH8uxaVI7BrzF2CnibTj53ro7VZAHB+ucMlIGBC1rhG2BQY0ekeg=="
"version": "1.0.30000930",
"resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000930.tgz",
"integrity": "sha512-ULqXMweNcW3YOz3NY5hyMPz+HrbhpfdPXMLmsBCDuzzec9Esu6+K+dr5Jkf+MKARDjcrZjIoWprEYtC0PTx//A=="
},
"caniuse-lite": {
"version": "1.0.30000929",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000929.tgz",
"integrity": "sha512-n2w1gPQSsYyorSVYqPMqbSaz1w7o9ZC8VhOEGI9T5MfGDzp7sbopQxG6GaQmYsaq13Xfx/mkxJUWC1Dz3oZfzw=="
"version": "1.0.30000930",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000930.tgz",
"integrity": "sha512-KD+pw9DderBLB8CGqBzYyFWpnrPVOEjsjargU/CvkNyg60od3cxSPTcTeMPhxJhDbkQPWvOz5BAyBzNl/St9vg=="
},
"capture-stack-trace": {
"version": "1.0.1",
@ -3745,7 +3745,7 @@
"env-paths": "1.0.0",
"make-dir": "1.3.0",
"pkg-up": "2.0.0",
"write-file-atomic": "2.4.0"
"write-file-atomic": "2.4.2"
}
},
"config-chain": {
@ -3766,7 +3766,7 @@
"graceful-fs": "4.1.15",
"make-dir": "1.3.0",
"unique-string": "1.0.0",
"write-file-atomic": "2.4.0",
"write-file-atomic": "2.4.2",
"xdg-basedir": "3.0.0"
}
},
@ -4851,7 +4851,7 @@
"integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
"requires": {
"browserslist": "1.7.7",
"caniuse-db": "1.0.30000929",
"caniuse-db": "1.0.30000930",
"normalize-range": "0.1.2",
"num2fraction": "1.2.2",
"postcss": "5.2.18",
@ -4863,8 +4863,8 @@
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
"integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
"requires": {
"caniuse-db": "1.0.30000929",
"electron-to-chromium": "1.3.105"
"caniuse-db": "1.0.30000930",
"electron-to-chromium": "1.3.106"
}
},
"chalk": {
@ -5294,7 +5294,7 @@
"integrity": "sha1-GJLRC2Gpo1at2/K2FJM+gfi7ODQ=",
"requires": {
"browserslist": "1.7.7",
"caniuse-db": "1.0.30000929",
"caniuse-db": "1.0.30000930",
"css-rule-stream": "1.1.0",
"duplexer2": "0.0.2",
"jsonfilter": "1.1.2",
@ -5317,8 +5317,8 @@
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
"integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
"requires": {
"caniuse-db": "1.0.30000929",
"electron-to-chromium": "1.3.105"
"caniuse-db": "1.0.30000930",
"electron-to-chromium": "1.3.106"
}
},
"camelcase": {
@ -5645,9 +5645,9 @@
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
"electron-to-chromium": {
"version": "1.3.105",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.105.tgz",
"integrity": "sha512-MWZZTThmQR82yzSPOn0BJ2ayZL1l7QyQpS22Frkxn1se9ZJ1WlSwnH8/CeBVhv4IStRxUDBvypeNy2dqsKR6sQ=="
"version": "1.3.106",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.106.tgz",
"integrity": "sha512-eXX45p4q9CRxG0G8D3ZBZYSdN3DnrcZfrFvt6VUr1u7aKITEtRY/xwWzJ/UZcWXa7DMqPu/pYwuZ6Nm+bl0GmA=="
},
"elliptic": {
"version": "6.4.1",
@ -8195,7 +8195,7 @@
"requires": {
"assert-plus": "1.0.0",
"jsprim": "1.4.1",
"sshpk": "1.16.0"
"sshpk": "1.16.1"
}
},
"https-browserify": {
@ -9373,7 +9373,7 @@
"slash": "1.0.0",
"strong-log-transformer": "1.0.6",
"temp-write": "3.4.0",
"write-file-atomic": "2.4.0",
"write-file-atomic": "2.4.2",
"write-json-file": "2.3.0",
"write-pkg": "3.2.0",
"yargs": "8.0.2"
@ -12565,8 +12565,8 @@
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
"integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
"requires": {
"caniuse-db": "1.0.30000929",
"electron-to-chromium": "1.3.105"
"caniuse-db": "1.0.30000930",
"electron-to-chromium": "1.3.106"
}
},
"chalk": {
@ -13762,7 +13762,7 @@
"bundled": true,
"requires": {
"browserslist": "1.7.7",
"caniuse-db": "1.0.30000929",
"caniuse-db": "1.0.30000930",
"normalize-range": "0.1.2",
"num2fraction": "1.2.2",
"postcss": "5.2.18",
@ -13773,8 +13773,8 @@
"version": "1.7.7",
"bundled": true,
"requires": {
"caniuse-db": "1.0.30000929",
"electron-to-chromium": "1.3.105"
"caniuse-db": "1.0.30000930",
"electron-to-chromium": "1.3.106"
}
},
"chalk": {
@ -15653,9 +15653,9 @@
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
},
"sshpk": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.0.tgz",
"integrity": "sha512-Zhev35/y7hRMcID/upReIvRse+I9SVhyVre/KTJSJQWMz3C3+G+HpO7m1wK/yckEtujKZ7dS4hkVxAnmHaIGVQ==",
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
"integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
"requires": {
"asn1": "0.2.4",
"assert-plus": "1.0.0",
@ -16015,8 +16015,8 @@
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
"integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
"requires": {
"caniuse-db": "1.0.30000929",
"electron-to-chromium": "1.3.105"
"caniuse-db": "1.0.30000930",
"electron-to-chromium": "1.3.106"
}
},
"chalk": {
@ -16160,7 +16160,7 @@
"integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
"requires": {
"browserslist": "1.7.7",
"caniuse-db": "1.0.30000929",
"caniuse-db": "1.0.30000930",
"normalize-range": "0.1.2",
"num2fraction": "1.2.2",
"postcss": "5.2.18",
@ -16182,8 +16182,8 @@
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
"integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
"requires": {
"caniuse-db": "1.0.30000929",
"electron-to-chromium": "1.3.105"
"caniuse-db": "1.0.30000930",
"electron-to-chromium": "1.3.106"
}
},
"cosmiconfig": {
@ -16380,8 +16380,8 @@
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.4.1.tgz",
"integrity": "sha512-pEBxEXg7JwaakBXjATYw/D1YZh4QUSCX/Mnd/wnqSRPPSi1U39iDhDoKGoBUcraKdxDlrYqJxSI5nNvD+dWP2A==",
"requires": {
"caniuse-lite": "1.0.30000929",
"electron-to-chromium": "1.3.105",
"caniuse-lite": "1.0.30000930",
"electron-to-chromium": "1.3.106",
"node-releases": "1.1.3"
}
},
@ -16418,7 +16418,7 @@
"integrity": "sha512-FMptmRKtlEwlcP9KUQ1Vw4pdlcUchl5cWBZEfgZGDPO0WhiJ8sJf2UeuYO8FXlNmK45s3OyQvzJ7GIWzmDYEdQ==",
"requires": {
"browserslist": "4.4.1",
"caniuse-lite": "1.0.30000929",
"caniuse-lite": "1.0.30000930",
"css-rule-stream": "1.1.0",
"duplexer2": "0.0.2",
"jsonfilter": "1.1.2",
@ -18275,9 +18275,9 @@
}
},
"write-file-atomic": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.0.tgz",
"integrity": "sha512-rpYM0txDxd2GV1RJeyAEhDasBPUG51fFpSaW22JKulFA6mKrOYfht5mkq62TbTRfKdUDFj0b8TAz95+F5sc+Ow==",
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.2.tgz",
"integrity": "sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==",
"requires": {
"graceful-fs": "4.1.15",
"imurmurhash": "0.1.4",
@ -18299,7 +18299,7 @@
"make-dir": "1.3.0",
"pify": "3.0.0",
"sort-keys": "2.0.0",
"write-file-atomic": "2.4.0"
"write-file-atomic": "2.4.2"
},
"dependencies": {
"detect-indent": {