Merge pull request #545 from primer/responsive-variants

Simplify responsive utilities with $responsive-variants
primer · Oct 18, 2018 · 6a2d256 · 6a2d256
2 parents 6f49e82 + 4cfa9b8
commit 6a2d256
Show file tree

Hide file tree

Showing 16 changed files with 6,425 additions and 4,516 deletions.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -1,9 +1,5 @@
 ## Contributing
 
-[fork]: https://github.com/primer/primer/fork
-[pr]: https://github.com/primer/primer/compare
-[style]: https://styleguide.github.com/primer/principles/
-
 Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
 
 ## Using the issue tracker
@@ -185,3 +181,7 @@ This section is targeted at maintainers of primer, to instruct them on the proce
 - [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)
 - [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
 - [GitHub Help](https://help.github.com)
+
+[fork]: https://github.com/primer/primer/fork
+[pr]: https://github.com/primer/primer/compare
+[style]: https://styleguide.github.com/primer/principles/
diff --git a/modules/primer-layout/lib/grid-offset.scss b/modules/primer-layout/lib/grid-offset.scss
@@ -1,30 +1,19 @@
 // Optional offset options to work with grid.scss
 
 // Offset Columns
-.offset-1 { margin-left: (1 / 12 * 100%); }
-.offset-2 { margin-left: (2 / 12 * 100%); }
-.offset-3 { margin-left: (3 / 12 * 100%); }
-.offset-4 { margin-left: (4 / 12 * 100%); }
-.offset-5 { margin-left: (5 / 12 * 100%); }
-.offset-6 { margin-left: (6 / 12 * 100%); }
-.offset-7 { margin-left: (7 / 12 * 100%); }
-.offset-8 { margin-left: (8 / 12 * 100%); }
-.offset-9 { margin-left: (9 / 12 * 100%); }
-.offset-10 { margin-left: (10 / 12 * 100%); }
-.offset-11 { margin-left: (11 / 12 * 100%); }
 
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    .offset-#{$breakpoint}-1 { margin-left: (1 / 12 * 100%); }
-    .offset-#{$breakpoint}-2 { margin-left: (2 / 12 * 100%); }
-    .offset-#{$breakpoint}-3 { margin-left: (3 / 12 * 100%); }
-    .offset-#{$breakpoint}-4 { margin-left: (4 / 12 * 100%); }
-    .offset-#{$breakpoint}-5 { margin-left: (5 / 12 * 100%); }
-    .offset-#{$breakpoint}-6 { margin-left: (6 / 12 * 100%); }
-    .offset-#{$breakpoint}-7 { margin-left: (7 / 12 * 100%); }
-    .offset-#{$breakpoint}-8 { margin-left: (8 / 12 * 100%); }
-    .offset-#{$breakpoint}-9 { margin-left: (9 / 12 * 100%); }
-    .offset-#{$breakpoint}-10 { margin-left: (10 / 12 * 100%); }
-    .offset-#{$breakpoint}-11 { margin-left: (11 / 12 * 100%); }
+    .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
+    .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
+    .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
+    .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
+    .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
+    .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
+    .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
+    .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
+    .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
+    .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
+    .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
   }
 }
diff --git a/modules/primer-marketing-utilities/docs/borders.md b/modules/primer-marketing-utilities/docs/borders.md
@@ -7,16 +7,6 @@ The following border utilities are meant to used in addition to those within pri
 
 {:toc}
 
-## Responsive borders
-
-Top, right, bottom, and left border utilities are can be used responsively to add or remove borders to an element at different screensizes.
-
-```html
-<div class="border-top border-sm-right border-md-bottom border-lg-top-0">
-  .border-top-0
-</div>
-```
-
 ## Border Colors
 
 ### White border with alpha transparency

diff --git a/modules/primer-marketing-utilities/lib/borders.scss b/modules/primer-marketing-utilities/lib/borders.scss
@@ -1,20 +1,6 @@
 // Border utilities
-// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
-
-// Responsive border utilities
-
-@each $breakpoint in map-keys($breakpoints) {
-  @include breakpoint($breakpoint) {
-    .border-#{$breakpoint}-top      { border-top: $border !important; }
-    .border-#{$breakpoint}-right    { border-right: $border !important; }
-    .border-#{$breakpoint}-bottom   { border-bottom: $border !important; }
-    .border-#{$breakpoint}-left     { border-left: $border !important; }
-    .border-#{$breakpoint}-top-0    { border-top: 0 !important; }
-    .border-#{$breakpoint}-right-0  { border-right: 0 !important; }
-    .border-#{$breakpoint}-bottom-0 { border-bottom: 0 !important; }
-    .border-#{$breakpoint}-left-0   { border-left: 0 !important; }
-  }
-}
 
 /* Use with .border to turn the border rgba white 0.15 */
-.border-white-fade { border-color: $white-fade-15 !important; }
+.border-white-fade {
+  border-color: $white-fade-15 !important;
+}
diff --git a/modules/primer-support/docs/breakpoints.md b/modules/primer-support/docs/breakpoints.md
@@ -58,3 +58,29 @@ Media queries are scoped from each breakpoint and upwards. In the example below,
   @include breakpoint(md) { font-size: 32px; }
 }
 ```
+
+## Responsive variants
+The `$responsive-variants` variable is a mapping of breakpoints to classname variants, and should be used like so:
+
+```scss
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    // Note: the first iteration gets `$variant == ""`
+    .overflow#{$variant}-auto { overflow: auto; }
+  }
+}
+```
+
+The resulting CSS would be:
+
+```css
+.overflow-auto { overflow: auto; }
+@media (min-width: 544px) { .overflow-sm-auto { overflow: auto; } }
+@media (min-width: 768px) { .overflow-md-auto { overflow: auto; } }
+@media (min-width: 1012px) { .overflow-lg-auto { overflow: auto; } }
+@media (min-width: 1280px) { .overflow-xl-auto { overflow: auto; } }
+```
+
+#### Caution!
+1. Don't precede the `#{$variation}` interpolation with a hyphen because the first value of `$variant` will be an empty string.
+1. For consistency, please put the `@include breakpoint($breakpoint)` call directly inside the `$responsive-variants` loop. This will help keep file sizes small by "batching" selectors in shared `@media` queries.
diff --git a/modules/primer-support/lib/mixins/layout.scss b/modules/primer-support/lib/mixins/layout.scss
@@ -1,21 +1,27 @@
 // Responsive media queries
 
 @mixin breakpoint($breakpoint) {
-  // Retrieves the value from the key
-  $value: map-get($breakpoints, $breakpoint);
-
-  // If the key exists in the map
-  @if $value != null {
-    // Prints a media query based on the value
-    @media (min-width: $value) {
-      @content;
-    }
+  @if $breakpoint == "" {
+    @content;
   }
 
-  // If the key doesn't exist in the map
   @else {
-    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-      + "Please make sure it is defined in `$breakpoints` map.";
+    // Retrieves the value from the key
+    $value: map-get($breakpoints, $breakpoint);
+
+    // If the key exists in the map
+    @if $value != null {
+      // Prints a media query based on the value
+      @media (min-width: $value) {
+        @content;
+      }
+    }
+
+    // If the key doesn't exist in the map
+    @else {
+      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Please make sure it is defined in `$breakpoints` map.";
+    }
   }
 }
 

diff --git a/modules/primer-support/lib/variables/layout.scss b/modules/primer-support/lib/variables/layout.scss
@@ -65,3 +65,8 @@ $breakpoints: (
   // Extra large screen / wide desktop
   xl: $width-xl
 ) !default;
+
+$responsive-variants: ("": "");
+@each $key in map-keys($breakpoints) {
+  $responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
+}
diff --git a/modules/primer-utilities/docs/borders.md b/modules/primer-utilities/docs/borders.md
@@ -86,6 +86,7 @@ Override default border colors with blue, green, red, purple, yellow, and gray b
 ```
 
 ### Borders with alpha transparency
+
 Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
 
 ```html
@@ -125,3 +126,30 @@ Use the following utilities to add or remove rounded corners: `rounded-0` remove
   .circle
 </div>
 ```
+
+You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
+
+```html
+<div class="border rounded-top mb-2">
+  .rounded-top
+</div>
+<div class="border rounded-right mb-2">
+  .rounded-right
+</div>
+<div class="border rounded-bottom mb-2">
+  .rounded-bottom
+</div>
+<div class="border rounded-left mb-2">
+  .rounded-left
+</div>
+```
+
+## Responsive borders
+
+Top, right, bottom, and left border utilities are can be used responsively to add or remove borders to an element at different screensizes.
+
+```html
+<div class="border-top border-sm-right border-md-bottom border-lg-top-0">
+  .border-top-0
+</div>
+```
diff --git a/modules/primer-utilities/lib/borders.scss b/modules/primer-utilities/lib/borders.scss
@@ -1,65 +1,100 @@
 // Border utilities
 // stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
 
-/* Add a gray border */
-.border        { border: $border !important; }
-/* Add a gray border to the top */
-.border-top    { border-top: $border !important; }
-/* Add a gray border to the right */
-.border-right  { border-right: $border !important; }
-/* Add a gray border to the bottom */
-.border-bottom { border-bottom: $border !important; }
-/* Add a gray border to the left */
-.border-left   { border-left: $border !important; }
+/* Add a gray border on all sides */
+.border { border: $border !important; }
+
 /* Add a gray border to the left and right */
 .border-y {
   border-top: $border !important;
   border-bottom: $border !important;
 }
 
+/* Remove borders from all sides */
+.border-0 { border: 0 !important; }
+
 .border-dashed { border-style: dashed !important; }
 
 /* Use with .border to turn the border blue */
-.border-blue       { border-color: $border-blue !important; }
+.border-blue        { border-color: $border-blue !important; }
 /* Use with .border to turn the border blue-light */
 .border-blue-light  { border-color: $border-blue-light !important; }
 /* Use with .border to turn the border green */
-.border-green        { border-color: $border-green !important; }
+.border-green       { border-color: $border-green !important; }
 /* Use with .border to turn the border green light */
 .border-green-light { border-color: $border-green-light !important; }
 /* Use with .border to turn the border red */
-.border-red        { border-color: $border-red !important; }
+.border-red         { border-color: $border-red !important; }
 /* Use with .border to turn the border red-light */
 .border-red-light   { border-color: $border-red-light !important; }
 /* Use with .border to turn the border purple */
-.border-purple  { border-color: $border-purple !important; }
+.border-purple      { border-color: $border-purple !important; }
 /* Use with .border to turn the border yellow */
-.border-yellow  { border-color: $border-yellow !important; }
+.border-yellow      { border-color: $border-yellow !important; }
 /* Use with .border to turn the border gray-light */
-.border-gray-light { border-color: $border-gray-light !important; }
+.border-gray-light  { border-color: $border-gray-light !important; }
 /* Use with .border to turn the border gray-dark */
-.border-gray-dark  { border-color: $border-gray-dark !important; }
+.border-gray-dark   { border-color: $border-gray-dark !important; }
 /* Use with .border to turn the border rgba black 0.15 */
-.border-black-fade { border-color: $border-black-fade !important; }
+.border-black-fade  { border-color: $border-black-fade !important; }
+
+$edges: (
+  top: (top-left, top-right),
+  right: (top-right, bottom-right),
+  bottom: (bottom-right, bottom-left),
+  left: (bottom-left, top-left)
+);
+
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* Add a gray border */
+    /* Add a gray border to the top */
+    .border#{$variant}-top    { border-top: $border !important; }
+    /* Add a gray border to the right */
+    .border#{$variant}-right  { border-right: $border !important; }
+    /* Add a gray border to the bottom */
+    .border#{$variant}-bottom { border-bottom: $border !important; }
+    /* Add a gray border to the left */
+    .border#{$variant}-left   { border-left: $border !important; }
+
+    /* Remove the top border */
+    .border#{$variant}-top-0    { border-top: 0 !important; }
+    /* Remove the right border */
+    .border#{$variant}-right-0  { border-right: 0 !important; }
+    /* Remove the bottom border */
+    .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
+    /* Remove the left border */
+    .border#{$variant}-left-0   { border-left: 0 !important; }
 
-// Without borders
-/* Remove all borders */
-.border-0        { border: 0 !important; }
-/* Remove the top border */
-.border-top-0    { border-top: 0 !important; }
-/* Remove the right border */
-.border-right-0  { border-right: 0 !important; }
-/* Remove the bottom border */
-.border-bottom-0 { border-bottom: 0 !important; }
-/* Remove the left border */
-.border-left-0   { border-left: 0 !important; }
+    // Rounded corners
+    /* Remove the border-radius */
+    .rounded#{$variant}-0 { border-radius: 0 !important; }
+    /* Add a border-radius to all corners */
+    .rounded#{$variant}-1 { border-radius: $border-radius !important; }
+    /* Add a 2x border-radius to all corners */
+    .rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
+
+    @each $edge, $corners in $edges {
+      .rounded#{$variant}-#{$edge}-0 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: 0;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-1 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-2 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius * 2;
+        }
+      }
+    }
+  }
+}
 
-// Rounded corners
-/* Remove the border-radius */
-.rounded-0 { border-radius: 0 !important; }
-/* Add a border-radius to all corners */
-.rounded-1 { border-radius: $border-radius !important; }
-/* Add a 2x border-radius to all corners */
-.rounded-2 { border-radius: $border-radius * 2 !important; }
 /* Add a 50% border-radius to make something into a circle */
 .circle { border-radius: 50% !important; }