From ca1c8cdba31644499370ed8a5a6979f00da67e05 Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Mon, 23 Oct 2017 14:44:47 -0700 Subject: [PATCH 01/14] increase spacing scale --- modules/primer-marketing-support/index.scss | 1 + .../primer-marketing-support/lib/layout.scss | 23 ++++++ modules/primer-marketing-utilities/index.scss | 2 + .../lib/margin.scss | 80 +++++++++++++++++++ .../lib/padding.scss | 67 ++++++++++++++++ 5 files changed, 173 insertions(+) create mode 100644 modules/primer-marketing-support/lib/layout.scss create mode 100644 modules/primer-marketing-utilities/lib/margin.scss create mode 100644 modules/primer-marketing-utilities/lib/padding.scss diff --git a/modules/primer-marketing-support/index.scss b/modules/primer-marketing-support/index.scss index eaa180c6..6552a724 100644 --- a/modules/primer-marketing-support/index.scss +++ b/modules/primer-marketing-support/index.scss @@ -1 +1,2 @@ @import "./lib/variables.scss"; +@import "./lib/layout.scss"; diff --git a/modules/primer-marketing-support/lib/layout.scss b/modules/primer-marketing-support/lib/layout.scss new file mode 100644 index 00000000..2699b330 --- /dev/null +++ b/modules/primer-marketing-support/lib/layout.scss @@ -0,0 +1,23 @@ +// Overrides $spacers variable from primer-support +// Increases standard spacing scale by 16px step increments after 40px +// i.e. After 40px, we have 72, 88, 104 and 120px +$spacers: ( + 0, + round($spacer / 2), + $spacer, + $spacer * 2, + $spacer * 3, + $spacer * 4, + $spacer * 5, + $spacer * 7, + $spacer * 9, + $spacer * 11, + $spacer * 13, + $spacer * 15 +) !default; + +// Adds aliases +$spacer-7: nth($spacers, 8) !default; // 72px +$spacer-8: nth($spacers, 9) !default; // 88px +$spacer-9: nth($spacers, 10) !default; // 104px +$spacer-10: nth($spacers, 11) !default; // 120px diff --git a/modules/primer-marketing-utilities/index.scss b/modules/primer-marketing-utilities/index.scss index 67a7d638..ed26f2c0 100644 --- a/modules/primer-marketing-utilities/index.scss +++ b/modules/primer-marketing-utilities/index.scss @@ -3,3 +3,5 @@ @import "./lib/filters.scss"; @import "./lib/borders.scss"; @import "./lib/layout.scss"; +@import "./lib/margin.scss"; +@import "./lib/padding.scss"; diff --git a/modules/primer-marketing-utilities/lib/margin.scss b/modules/primer-marketing-utilities/lib/margin.scss new file mode 100644 index 00000000..04da1ae2 --- /dev/null +++ b/modules/primer-marketing-utilities/lib/margin.scss @@ -0,0 +1,80 @@ +// Margin spacer utilities +// 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($spacers) { + $size: #{nth($spacers, $i)}; + $scale: #{$i - 1}; + + /* Set a #{$size} margin to all sides */ + .m-#{$scale} { margin : #{$size} !important; } + /* Set a #{$size} margin on the top */ + .mt-#{$scale} { margin-top : #{$size} !important; } + /* Set a #{$size} margin on the right */ + .mr-#{$scale} { margin-right : #{$size} !important; } + /* Set a #{$size} margin on the bottom */ + .mb-#{$scale} { margin-bottom: #{$size} !important; } + /* Set a #{$size} margin on the left */ + .ml-#{$scale} { margin-left : #{$size} !important; } + /* Set a negative #{$size} margin on top */ + .mt-n#{$scale} { margin-top : -#{$size} !important; } + /* Set a negative #{$size} margin on the right */ + .mr-n#{$scale} { margin-right : -#{$size} !important; } + /* Set a negative #{$size} margin on the bottom */ + .mb-n#{$scale} { margin-bottom: -#{$size} !important; } + /* Set a negative #{$size} margin on the left */ + .ml-n#{$scale} { margin-left : -#{$size} !important; } + + /* Set a #{$size} margin on the left & right */ + .mx-#{$scale} { + margin-right: #{$size} !important; + margin-left : #{$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($spacers) { + @include breakpoint($breakpoint) { + $size: #{nth($spacers, $i)}; // sm, md, lg, xl + $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6 + + /* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */ + .m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; } + /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */ + .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; } + /* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */ + .mr-#{$breakpoint}-#{$scale} { margin-right: #{$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 left at the breakpoint #{$breakpoint} */ + .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; } + /* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */ + .mt-#{$breakpoint}-n#{$scale} { margin-top : -#{$size} !important; } + /* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */ + .mr-#{$breakpoint}-n#{$scale} { margin-right : -#{$size} !important; } + /* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */ + .mb-#{$breakpoint}-n#{$scale} { margin-bottom: -#{$size} !important; } + /* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */ + .ml-#{$breakpoint}-n#{$scale} { margin-left : -#{$size} !important; } + + /* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */ + .mx-#{$breakpoint}-#{$scale} { + margin-right: #{$size} !important; + margin-left: #{$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; + } + } + } +} diff --git a/modules/primer-marketing-utilities/lib/padding.scss b/modules/primer-marketing-utilities/lib/padding.scss new file mode 100644 index 00000000..0f4ca32e --- /dev/null +++ b/modules/primer-marketing-utilities/lib/padding.scss @@ -0,0 +1,67 @@ +// 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($spacers) { + $size: #{nth($spacers, $i)}; + $scale: #{$i - 1}; + + /* Set a #{$size} padding to all sides */ + .p-#{$scale} { padding : #{$size} !important; } + /* 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; } + + /* Set a #{$size} padding to the left & right */ + .px-#{$scale} { + padding-right: #{$size} !important; + padding-left: #{$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($spacers) { + @include breakpoint($breakpoint) { + $size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl + $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6 + + /* 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 left & right at the #{$breakpoint} breakpoint */ + .px-#{$breakpoint}-#{$scale} { + padding-right: #{$size} !important; + padding-left: #{$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; + } + } + } +} From 78c5518cb280e0757daea2e5f435f2b9afd2b87c Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Mon, 23 Oct 2017 15:04:33 -0700 Subject: [PATCH 02/14] spacer index off --- modules/primer-marketing-support/lib/layout.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/modules/primer-marketing-support/lib/layout.scss b/modules/primer-marketing-support/lib/layout.scss index 2699b330..ffbf5725 100644 --- a/modules/primer-marketing-support/lib/layout.scss +++ b/modules/primer-marketing-support/lib/layout.scss @@ -17,7 +17,8 @@ $spacers: ( ) !default; // Adds aliases -$spacer-7: nth($spacers, 8) !default; // 72px -$spacer-8: nth($spacers, 9) !default; // 88px -$spacer-9: nth($spacers, 10) !default; // 104px -$spacer-10: nth($spacers, 11) !default; // 120px +$spacer-7: nth($spacers, 8) !default; // 56px +$spacer-7: nth($spacers, 9) !default; // 72px +$spacer-8: nth($spacers, 10) !default; // 88px +$spacer-9: nth($spacers, 11) !default; // 104px +$spacer-10: nth($spacers, 12) !default; // 120px From cb8ef3a63364e707232959a53f54c3b36feec90e Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Mon, 23 Oct 2017 15:25:47 -0700 Subject: [PATCH 03/14] spacer vars wrong number --- modules/primer-marketing-support/lib/layout.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/primer-marketing-support/lib/layout.scss b/modules/primer-marketing-support/lib/layout.scss index ffbf5725..d67f1b1a 100644 --- a/modules/primer-marketing-support/lib/layout.scss +++ b/modules/primer-marketing-support/lib/layout.scss @@ -18,7 +18,7 @@ $spacers: ( // Adds aliases $spacer-7: nth($spacers, 8) !default; // 56px -$spacer-7: nth($spacers, 9) !default; // 72px -$spacer-8: nth($spacers, 10) !default; // 88px -$spacer-9: nth($spacers, 11) !default; // 104px -$spacer-10: nth($spacers, 12) !default; // 120px +$spacer-8: nth($spacers, 9) !default; // 72px +$spacer-9: nth($spacers, 10) !default; // 88px +$spacer-10: nth($spacers, 11) !default; // 104px +$spacer-11: nth($spacers, 12) !default; // 120px From f802e428d92f39dc84b8cfba6db0483025e7d1f5 Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Wed, 1 Nov 2017 14:42:00 -0700 Subject: [PATCH 04/14] add new variables explicitly, remove x directional spacing from loop --- modules/primer-marketing-support/index.scss | 1 - .../primer-marketing-support/lib/layout.scss | 24 --------- .../lib/variables.scss | 11 ++++ .../lib/margin.scss | 53 +++---------------- .../lib/padding.scss | 34 ++---------- 5 files changed, 23 insertions(+), 100 deletions(-) delete mode 100644 modules/primer-marketing-support/lib/layout.scss diff --git a/modules/primer-marketing-support/index.scss b/modules/primer-marketing-support/index.scss index 6552a724..eaa180c6 100644 --- a/modules/primer-marketing-support/index.scss +++ b/modules/primer-marketing-support/index.scss @@ -1,2 +1 @@ @import "./lib/variables.scss"; -@import "./lib/layout.scss"; diff --git a/modules/primer-marketing-support/lib/layout.scss b/modules/primer-marketing-support/lib/layout.scss deleted file mode 100644 index d67f1b1a..00000000 --- a/modules/primer-marketing-support/lib/layout.scss +++ /dev/null @@ -1,24 +0,0 @@ -// Overrides $spacers variable from primer-support -// Increases standard spacing scale by 16px step increments after 40px -// i.e. After 40px, we have 72, 88, 104 and 120px -$spacers: ( - 0, - round($spacer / 2), - $spacer, - $spacer * 2, - $spacer * 3, - $spacer * 4, - $spacer * 5, - $spacer * 7, - $spacer * 9, - $spacer * 11, - $spacer * 13, - $spacer * 15 -) !default; - -// Adds aliases -$spacer-7: nth($spacers, 8) !default; // 56px -$spacer-8: nth($spacers, 9) !default; // 72px -$spacer-9: nth($spacers, 10) !default; // 88px -$spacer-10: nth($spacers, 11) !default; // 104px -$spacer-11: nth($spacers, 12) !default; // 120px diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index cd2ceb3d..2cf9e395 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/modules/primer-marketing-support/lib/variables.scss @@ -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 standard spacing scale by 16px step increments after 40px +// i.e. After 40px, we have 56, 72, 88, etc. +$spacer-7: $spacer * 7; // 56px +$spacer-8: $spacer * 9; // 72px +$spacer-9: $spacer * 11; // 88px +$spacer-10: $spacer * 13; // 104px +$spacer-11: $spacer * 15; // 120px + +$marketingSpacers: $spacer7, $spacer-8, $spacer-9, $spacer-10, $spacer-11; diff --git a/modules/primer-marketing-utilities/lib/margin.scss b/modules/primer-marketing-utilities/lib/margin.scss index 04da1ae2..cc77ec06 100644 --- a/modules/primer-marketing-utilities/lib/margin.scss +++ b/modules/primer-marketing-utilities/lib/margin.scss @@ -1,33 +1,14 @@ -// Margin spacer utilities +// 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($spacers) { - $size: #{nth($spacers, $i)}; +@for $i from 1 through length($marketingSpacers) { + $size: #{nth($marketingSpacers, $i)}; $scale: #{$i - 1}; - /* Set a #{$size} margin to all sides */ - .m-#{$scale} { margin : #{$size} !important; } /* Set a #{$size} margin on the top */ .mt-#{$scale} { margin-top : #{$size} !important; } - /* Set a #{$size} margin on the right */ - .mr-#{$scale} { margin-right : #{$size} !important; } /* Set a #{$size} margin on the bottom */ .mb-#{$scale} { margin-bottom: #{$size} !important; } - /* Set a #{$size} margin on the left */ - .ml-#{$scale} { margin-left : #{$size} !important; } - /* Set a negative #{$size} margin on top */ - .mt-n#{$scale} { margin-top : -#{$size} !important; } - /* Set a negative #{$size} margin on the right */ - .mr-n#{$scale} { margin-right : -#{$size} !important; } - /* Set a negative #{$size} margin on the bottom */ - .mb-n#{$scale} { margin-bottom: -#{$size} !important; } - /* Set a negative #{$size} margin on the left */ - .ml-n#{$scale} { margin-left : -#{$size} !important; } - - /* Set a #{$size} margin on the left & right */ - .mx-#{$scale} { - margin-right: #{$size} !important; - margin-left : #{$size} !important; - } /* Set a #{$size} margin on the top & bottom */ .my-#{$scale} { @@ -40,35 +21,15 @@ @each $breakpoint in map-keys($breakpoints) { // Loop through the spacer values - @for $i from 1 through length($spacers) { + @for $i from 1 through length($marketingSpacers) { @include breakpoint($breakpoint) { - $size: #{nth($spacers, $i)}; // sm, md, lg, xl - $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6 + $size: #{nth($marketingSpacers, $i)}; // sm, md, lg, xl + $scale: #{$i + 6}; // 7, 8, 9, 10, 11 - /* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */ - .m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; } /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */ .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; } - /* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */ - .mr-#{$breakpoint}-#{$scale} { margin-right: #{$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 left at the breakpoint #{$breakpoint} */ - .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; } - /* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */ - .mt-#{$breakpoint}-n#{$scale} { margin-top : -#{$size} !important; } - /* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */ - .mr-#{$breakpoint}-n#{$scale} { margin-right : -#{$size} !important; } - /* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */ - .mb-#{$breakpoint}-n#{$scale} { margin-bottom: -#{$size} !important; } - /* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */ - .ml-#{$breakpoint}-n#{$scale} { margin-left : -#{$size} !important; } - - /* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */ - .mx-#{$breakpoint}-#{$scale} { - margin-right: #{$size} !important; - margin-left: #{$size} !important; - } /* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */ .my-#{$breakpoint}-#{$scale} { diff --git a/modules/primer-marketing-utilities/lib/padding.scss b/modules/primer-marketing-utilities/lib/padding.scss index 0f4ca32e..04d83df2 100644 --- a/modules/primer-marketing-utilities/lib/padding.scss +++ b/modules/primer-marketing-utilities/lib/padding.scss @@ -1,26 +1,14 @@ // 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($spacers) { - $size: #{nth($spacers, $i)}; +@for $i from 1 through length($marketingSpacers) { + $size: #{nth($marketingSpacers, $i)}; $scale: #{$i - 1}; - /* Set a #{$size} padding to all sides */ - .p-#{$scale} { padding : #{$size} !important; } /* 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; } - - /* Set a #{$size} padding to the left & right */ - .px-#{$scale} { - padding-right: #{$size} !important; - padding-left: #{$size} !important; - } /* Set a #{$size} padding to the top & bottom */ .py-#{$scale} { @@ -35,27 +23,15 @@ @each $breakpoint in map-keys($breakpoints) { // Loop through the spacer values - @for $i from 1 through length($spacers) { + @for $i from 1 through length($marketingSpacers) { @include breakpoint($breakpoint) { - $size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl - $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6 + $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 left & right at the #{$breakpoint} breakpoint */ - .px-#{$breakpoint}-#{$scale} { - padding-right: #{$size} !important; - padding-left: #{$size} !important; - } /* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */ .py-#{$breakpoint}-#{$scale} { From 839ce8d202103c312b32a71f96fcea6127a8229b Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Wed, 1 Nov 2017 14:51:38 -0700 Subject: [PATCH 05/14] -_- --- modules/primer-marketing-support/lib/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index 2cf9e395..13a39da2 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/modules/primer-marketing-support/lib/variables.scss @@ -11,4 +11,4 @@ $spacer-9: $spacer * 11; // 88px $spacer-10: $spacer * 13; // 104px $spacer-11: $spacer * 15; // 120px -$marketingSpacers: $spacer7, $spacer-8, $spacer-9, $spacer-10, $spacer-11; +$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11; From 3692d95da64678d70544f39f13cf5cb577236937 Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Wed, 1 Nov 2017 14:59:33 -0700 Subject: [PATCH 06/14] add primer marketing support dependency --- modules/primer-marketing-utilities/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/primer-marketing-utilities/index.scss b/modules/primer-marketing-utilities/index.scss index ed26f2c0..31d936b8 100644 --- a/modules/primer-marketing-utilities/index.scss +++ b/modules/primer-marketing-utilities/index.scss @@ -1,4 +1,5 @@ @import "primer-support/index.scss"; +@import "primer-marketing-support/index.scss"; // utilities @import "./lib/filters.scss"; @import "./lib/borders.scss"; From d1e34551f9c90cc467a2e6c1d3cfdf671613ce6b Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Wed, 1 Nov 2017 15:09:59 -0700 Subject: [PATCH 07/14] rm extra line space --- modules/primer-marketing-support/lib/variables.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index 13a39da2..4736a062 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/modules/primer-marketing-support/lib/variables.scss @@ -2,7 +2,6 @@ $alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif; $alt-mono-font: $mono-font; - // Increases standard spacing scale by 16px step increments after 40px // i.e. After 40px, we have 56, 72, 88, etc. $spacer-7: $spacer * 7; // 56px From e12c3e210373a8ec5262056493389d9bc0c18dd2 Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Thu, 2 Nov 2017 10:39:09 -0700 Subject: [PATCH 08/14] forgot to update these scale vars too --- modules/primer-marketing-utilities/lib/margin.scss | 2 +- modules/primer-marketing-utilities/lib/padding.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-marketing-utilities/lib/margin.scss b/modules/primer-marketing-utilities/lib/margin.scss index cc77ec06..40f20bac 100644 --- a/modules/primer-marketing-utilities/lib/margin.scss +++ b/modules/primer-marketing-utilities/lib/margin.scss @@ -3,7 +3,7 @@ // 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 - 1}; + $scale: #{$i + 6}; // 7, 8, 9, 10, 11 /* Set a #{$size} margin on the top */ .mt-#{$scale} { margin-top : #{$size} !important; } diff --git a/modules/primer-marketing-utilities/lib/padding.scss b/modules/primer-marketing-utilities/lib/padding.scss index 04d83df2..d31bd732 100644 --- a/modules/primer-marketing-utilities/lib/padding.scss +++ b/modules/primer-marketing-utilities/lib/padding.scss @@ -3,7 +3,7 @@ // stylelint-disable comment-empty-line-before @for $i from 1 through length($marketingSpacers) { $size: #{nth($marketingSpacers, $i)}; - $scale: #{$i - 1}; + $scale: #{$i + 6}; // 7, 8, 9, 10, 11 /* Set a #{$size} padding to the top */ .pt-#{$scale} { padding-top : #{$size} !important; } From 728215f180a84a4ed13b156c0a83948807767112 Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Thu, 2 Nov 2017 15:00:59 -0700 Subject: [PATCH 09/14] add docs, and mention extended scale in primer-support docs too --- modules/primer-marketing-support/README.md | 29 ++++++++------ modules/primer-marketing-utilities/README.md | 2 +- .../primer-marketing-utilities/docs/margin.md | 38 +++++++++++++++++++ .../docs/padding.md | 38 +++++++++++++++++++ modules/primer-support/docs/spacing.md | 2 + 5 files changed, 97 insertions(+), 12 deletions(-) create mode 100644 modules/primer-marketing-utilities/docs/margin.md create mode 100644 modules/primer-marketing-utilities/docs/padding.md diff --git a/modules/primer-marketing-support/README.md b/modules/primer-marketing-support/README.md index 1350f8c5..2d53afad 100644 --- a/modules/primer-marketing-support/README.md +++ b/modules/primer-marketing-support/README.md @@ -9,17 +9,6 @@ This repository is a module of the full [primer][primer] repository. -## Documentation - - - -Documentation & refactor coming very soon - - - ## Install This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `support` with this command. @@ -38,6 +27,24 @@ 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 + +### Extended spacing scale +This module includes extra variables that extend the Primer spacing scale for marketing site needs. +Starting from where the `primer-core` spacing scale ends, we are stepping up by 16px increments... + +| Scale | Value | +|-------|-------| +| 7 | 56 | +| 8 | 72 | +| 9 | 88 | +| 10 | 104 | +| 11 | 120 | + +This is useful for when we want to achieve bigger vertical spacing between sections on marketing sites. + +See [primer-marketing-utilities](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-utilities) for related spacing utilities. + ## License MIT © [GitHub](https://github.com/) diff --git a/modules/primer-marketing-utilities/README.md b/modules/primer-marketing-utilities/README.md index c3789379..f45970aa 100644 --- a/modules/primer-marketing-utilities/README.md +++ b/modules/primer-marketing-utilities/README.md @@ -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 diff --git a/modules/primer-marketing-utilities/docs/margin.md b/modules/primer-marketing-utilities/docs/margin.md new file mode 100644 index 00000000..daca557d --- /dev/null +++ b/modules/primer-marketing-utilities/docs/margin.md @@ -0,0 +1,38 @@ +--- +title: Margin +status: New release +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. +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 + +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. + +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 +
+
.mt-7
+
+
+
.mb-7
+
+
+
.my-7
+
+``` + +## Responsive y-directional margins + +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. + +```html +
+
+ .my-sm-7 .mb-lg-9 +
+
+``` diff --git a/modules/primer-marketing-utilities/docs/padding.md b/modules/primer-marketing-utilities/docs/padding.md new file mode 100644 index 00000000..6cab2d6a --- /dev/null +++ b/modules/primer-marketing-utilities/docs/padding.md @@ -0,0 +1,38 @@ +--- +title: Padding +status: New release +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. +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 + +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. + +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 +
+
.pt-7
+
+
+
.pb-7
+
+
+
.py-7
+
+``` + +## Responsive y-directional padding + +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. + +```html +
+
+ .py-sm-7 .pb-lg-9 +
+
+``` diff --git a/modules/primer-support/docs/spacing.md b/modules/primer-support/docs/spacing.md index 9aa44810..c8659760 100644 --- a/modules/primer-support/docs/spacing.md +++ b/modules/primer-support/docs/spacing.md @@ -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](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-directional spacing utilities for [margin](https://github.com/primer/primer-css/blob/master/modules/primer-marketing-utilities/docs/margin.md) and [padding](https://github.com/primer/primer-css/blob/master/modules/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. From 4b6e983b3791dbe373ecbb739eb82e468b1fc603 Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Fri, 3 Nov 2017 13:19:51 -0700 Subject: [PATCH 10/14] add stories.js for storybook --- modules/primer-marketing-utilities/stories.js | 84 +++++++++++++++---- 1 file changed, 68 insertions(+), 16 deletions(-) diff --git a/modules/primer-marketing-utilities/stories.js b/modules/primer-marketing-utilities/stories.js index cc8ee4c2..c88c13b0 100644 --- a/modules/primer-marketing-utilities/stories.js +++ b/modules/primer-marketing-utilities/stories.js @@ -2,20 +2,72 @@ import React from 'react' import { storiesOf } from '@storybook/react' storiesOf('Marketing utilities', module) -.add('Responsive borders', () => ( -
.border-top-0
-)) -.add('border-white-fade', () => ( -
- - .border-white-fade - -
-)) -.add('Responsive position', () => ( -
-
- .position-md-absolute -
+ .add('Responsive borders', () => ( +
.border-top-0
+ )) + .add('border-white-fade', () => ( +
+ + .border-white-fade +
-)) + )) + .add('Responsive position', () => ( +
+
+ .position-md-absolute +
+
+ )) + .add('Y directional margin', () => ( +
+
+
.mt-7
+
+
+
.mb-7
+
+
+
.my-7
+
+
+ )) + .add('Y directional responsive margin', () => ( +
+
+
.mt-sm-7
+
+
+
.mb-md-7
+
+
+
.my-lg-7
+
+
+ )) + .add('Y directional padding', () => ( +
+
+
.pt-7
+
+
+
.pb-7
+
+
+
.py-7
+
+
+ )) + .add('Y directional responsive padding', () => ( +
+
+
.pt-sm-7
+
+
+
.pb-md-7
+
+
+
.py-lg-7
+
+
+ )) From 7ab3261bbffa63423eeaa84543a69d8fe27320b4 Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Fri, 17 Nov 2017 11:59:02 -0800 Subject: [PATCH 11/14] update docs with new copy and new scale --- modules/primer-marketing-support/README.md | 25 ++++++++++++------- .../primer-marketing-utilities/docs/margin.md | 15 +++++------ .../docs/padding.md | 15 +++++------ 3 files changed, 28 insertions(+), 27 deletions(-) diff --git a/modules/primer-marketing-support/README.md b/modules/primer-marketing-support/README.md index 2d53afad..3445b874 100644 --- a/modules/primer-marketing-support/README.md +++ b/modules/primer-marketing-support/README.md @@ -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._ + + ## Documentation ### Extended spacing scale -This module includes extra variables that extend the Primer spacing scale for marketing site needs. -Starting from where the `primer-core` spacing scale ends, we are stepping up by 16px increments... +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 | 56 | -| 8 | 72 | -| 9 | 88 | -| 10 | 104 | -| 11 | 120 | +| 7 | 48 | +| 8 | 64 | +| 9 | 80 | +| 10 | 96 | +| 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. + ## License diff --git a/modules/primer-marketing-utilities/docs/margin.md b/modules/primer-marketing-utilities/docs/margin.md index daca557d..12baa6d8 100644 --- a/modules/primer-marketing-utilities/docs/margin.md +++ b/modules/primer-marketing-utilities/docs/margin.md @@ -1,17 +1,14 @@ --- -title: Margin +title: Marketing Margin status: New release 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. -See [primer-marketing-support](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-support) for the extended marketing 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. -## 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. - -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. +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
@@ -25,9 +22,9 @@ Note: The marketing spacing scale extends the core 0-6 scale. See [primer-market
``` -## 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
diff --git a/modules/primer-marketing-utilities/docs/padding.md b/modules/primer-marketing-utilities/docs/padding.md index 6cab2d6a..71ce6997 100644 --- a/modules/primer-marketing-utilities/docs/padding.md +++ b/modules/primer-marketing-utilities/docs/padding.md @@ -1,17 +1,14 @@ --- -title: Padding +title: Marketing Padding status: New release 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. -See [primer-marketing-support](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-support) for the extended marketing 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. -## 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. - -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. +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
@@ -25,9 +22,9 @@ Note: The marketing spacing scale extends the core 0-6 scale. See [primer-market
``` -## 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
From 20553517dfc6d22030245c87eafe3cc33b36e42c Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Fri, 17 Nov 2017 12:02:46 -0800 Subject: [PATCH 12/14] update scale --- .../primer-marketing-support/lib/variables.scss | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index 4736a062..da433e1e 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/modules/primer-marketing-support/lib/variables.scss @@ -2,12 +2,13 @@ $alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif; $alt-mono-font: $mono-font; -// Increases standard spacing scale by 16px step increments after 40px -// i.e. After 40px, we have 56, 72, 88, etc. -$spacer-7: $spacer * 7; // 56px -$spacer-8: $spacer * 9; // 72px -$spacer-9: $spacer * 11; // 88px -$spacer-10: $spacer * 13; // 104px -$spacer-11: $spacer * 15; // 120px +// Increases standard spacing 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; From 7c8b3be162835cc4d51fedbb9f74d6f9036198ed Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Fri, 17 Nov 2017 12:15:27 -0800 Subject: [PATCH 13/14] use `primer-core` language and fix links --- modules/primer-marketing-support/lib/variables.scss | 2 +- modules/primer-support/docs/spacing.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index da433e1e..130f3690 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/modules/primer-marketing-support/lib/variables.scss @@ -2,7 +2,7 @@ $alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif; $alt-mono-font: $mono-font; -// Increases standard spacing scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12 +// 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 diff --git a/modules/primer-support/docs/spacing.md b/modules/primer-support/docs/spacing.md index c8659760..2aa58b26 100644 --- a/modules/primer-support/docs/spacing.md +++ b/modules/primer-support/docs/spacing.md @@ -21,7 +21,7 @@ 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](https://github.com/primer/primer-css/tree/master/modules/primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-directional spacing utilities for [margin](https://github.com/primer/primer-css/blob/master/modules/primer-marketing-utilities/docs/margin.md) and [padding](https://github.com/primer/primer-css/blob/master/modules/primer-marketing-utilities/docs/padding.md). +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. From 7b558446b259d527a438918c6cceea38a813481f Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Wed, 6 Dec 2017 10:13:11 -0800 Subject: [PATCH 14/14] add title and status to readme --- modules/primer-marketing-support/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/modules/primer-marketing-support/README.md b/modules/primer-marketing-support/README.md index 3445b874..8b3b8f03 100644 --- a/modules/primer-marketing-support/README.md +++ b/modules/primer-marketing-support/README.md @@ -27,13 +27,13 @@ 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 + + ### 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.