Skip to content

Commit 6a2d256

Browse files
shawnbotshawnbot
authored
Merge pull request #545 from primer/responsive-variants
Simplify responsive utilities with $responsive-variants
2 parents 6f49e82 + 4cfa9b8 commit 6a2d256

File tree

16 files changed

+6425
-4516
lines changed

16 files changed

+6425
-4516
lines changed

‎.github/CONTRIBUTING.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
## Contributing
22

3-
[fork]: https://github.com/primer/primer/fork
4-
[pr]: https://github.com/primer/primer/compare
5-
[style]: https://styleguide.github.com/primer/principles/
6-
73
Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
84

95
## Using the issue tracker
@@ -185,3 +181,7 @@ This section is targeted at maintainers of primer, to instruct them on the proce
185181
- [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)
186182
- [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
187183
- [GitHub Help](https://help.github.com)
184+
185+
[fork]: https://github.com/primer/primer/fork
186+
[pr]: https://github.com/primer/primer/compare
187+
[style]: https://styleguide.github.com/primer/principles/

‎modules/primer-layout/lib/grid-offset.scss‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
11
// Optional offset options to work with grid.scss
22

33
// Offset Columns
4-
.offset-1 { margin-left: (1 / 12 * 100%); }
5-
.offset-2 { margin-left: (2 / 12 * 100%); }
6-
.offset-3 { margin-left: (3 / 12 * 100%); }
7-
.offset-4 { margin-left: (4 / 12 * 100%); }
8-
.offset-5 { margin-left: (5 / 12 * 100%); }
9-
.offset-6 { margin-left: (6 / 12 * 100%); }
10-
.offset-7 { margin-left: (7 / 12 * 100%); }
11-
.offset-8 { margin-left: (8 / 12 * 100%); }
12-
.offset-9 { margin-left: (9 / 12 * 100%); }
13-
.offset-10 { margin-left: (10 / 12 * 100%); }
14-
.offset-11 { margin-left: (11 / 12 * 100%); }
154

16-
@each $breakpoint in map-keys($breakpoints) {
5+
@each $breakpoint, $variant in $responsive-variants {
176
@include breakpoint($breakpoint) {
18-
.offset-#{$breakpoint}-1 { margin-left: (1 / 12 * 100%); }
19-
.offset-#{$breakpoint}-2 { margin-left: (2 / 12 * 100%); }
20-
.offset-#{$breakpoint}-3 { margin-left: (3 / 12 * 100%); }
21-
.offset-#{$breakpoint}-4 { margin-left: (4 / 12 * 100%); }
22-
.offset-#{$breakpoint}-5 { margin-left: (5 / 12 * 100%); }
23-
.offset-#{$breakpoint}-6 { margin-left: (6 / 12 * 100%); }
24-
.offset-#{$breakpoint}-7 { margin-left: (7 / 12 * 100%); }
25-
.offset-#{$breakpoint}-8 { margin-left: (8 / 12 * 100%); }
26-
.offset-#{$breakpoint}-9 { margin-left: (9 / 12 * 100%); }
27-
.offset-#{$breakpoint}-10 { margin-left: (10 / 12 * 100%); }
28-
.offset-#{$breakpoint}-11 { margin-left: (11 / 12 * 100%); }
7+
.offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
8+
.offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
9+
.offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
10+
.offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
11+
.offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
12+
.offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
13+
.offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
14+
.offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
15+
.offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
16+
.offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
17+
.offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
2918
}
3019
}

‎modules/primer-marketing-utilities/docs/borders.md‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,6 @@ The following border utilities are meant to used in addition to those within pri
77

88
{:toc}
99

10-
## Responsive borders
11-
12-
Top, right, bottom, and left border utilities are can be used responsively to add or remove borders to an element at different screensizes.
13-
14-
```html
15-
<div class="border-top border-sm-right border-md-bottom border-lg-top-0">
16-
.border-top-0
17-
</div>
18-
```
19-
2010
## Border Colors
2111

2212
### White border with alpha transparency

‎modules/primer-marketing-utilities/lib/borders.scss‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,6 @@
11
// Border utilities
2-
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
3-
4-
// Responsive border utilities
5-
6-
@each $breakpoint in map-keys($breakpoints) {
7-
@include breakpoint($breakpoint) {
8-
.border-#{$breakpoint}-top { border-top: $border !important; }
9-
.border-#{$breakpoint}-right { border-right: $border !important; }
10-
.border-#{$breakpoint}-bottom { border-bottom: $border !important; }
11-
.border-#{$breakpoint}-left { border-left: $border !important; }
12-
.border-#{$breakpoint}-top-0 { border-top: 0 !important; }
13-
.border-#{$breakpoint}-right-0 { border-right: 0 !important; }
14-
.border-#{$breakpoint}-bottom-0 { border-bottom: 0 !important; }
15-
.border-#{$breakpoint}-left-0 { border-left: 0 !important; }
16-
}
17-
}
182

193
/* Use with .border to turn the border rgba white 0.15 */
20-
.border-white-fade { border-color: $white-fade-15 !important; }
4+
.border-white-fade {
5+
border-color: $white-fade-15 !important;
6+
}

‎modules/primer-support/docs/breakpoints.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,29 @@ Media queries are scoped from each breakpoint and upwards. In the example below,
5858
@include breakpoint(md) { font-size: 32px; }
5959
}
6060
```
61+
62+
## Responsive variants
63+
The `$responsive-variants` variable is a mapping of breakpoints to classname variants, and should be used like so:
64+
65+
```scss
66+
@each $breakpoint, $variant in $responsive-variants {
67+
@include breakpoint($breakpoint) {
68+
// Note: the first iteration gets `$variant == ""`
69+
.overflow#{$variant}-auto { overflow: auto; }
70+
}
71+
}
72+
```
73+
74+
The resulting CSS would be:
75+
76+
```css
77+
.overflow-auto { overflow: auto; }
78+
@media (min-width: 544px) { .overflow-sm-auto { overflow: auto; } }
79+
@media (min-width: 768px) { .overflow-md-auto { overflow: auto; } }
80+
@media (min-width: 1012px) { .overflow-lg-auto { overflow: auto; } }
81+
@media (min-width: 1280px) { .overflow-xl-auto { overflow: auto; } }
82+
```
83+
84+
#### Caution!
85+
1. Don't precede the `#{$variation}` interpolation with a hyphen because the first value of `$variant` will be an empty string.
86+
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.

‎modules/primer-support/lib/mixins/layout.scss‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
11
// Responsive media queries
22

33
@mixin breakpoint($breakpoint) {
4-
// Retrieves the value from the key
5-
$value: map-get($breakpoints, $breakpoint);
6-
7-
// If the key exists in the map
8-
@if $value != null {
9-
// Prints a media query based on the value
10-
@media (min-width: $value) {
11-
@content;
12-
}
4+
@if $breakpoint == "" {
5+
@content;
136
}
147

15-
// If the key doesn't exist in the map
168
@else {
17-
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
18-
+ "Please make sure it is defined in `$breakpoints` map.";
9+
// Retrieves the value from the key
10+
$value: map-get($breakpoints, $breakpoint);
11+
12+
// If the key exists in the map
13+
@if $value != null {
14+
// Prints a media query based on the value
15+
@media (min-width: $value) {
16+
@content;
17+
}
18+
}
19+
20+
// If the key doesn't exist in the map
21+
@else {
22+
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
23+
+ "Please make sure it is defined in `$breakpoints` map.";
24+
}
1925
}
2026
}
2127

‎modules/primer-support/lib/variables/layout.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,8 @@ $breakpoints: (
6565
// Extra large screen / wide desktop
6666
xl: $width-xl
6767
) !default;
68+
69+
$responsive-variants: ("": "");
70+
@each $key in map-keys($breakpoints) {
71+
$responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
72+
}

‎modules/primer-utilities/docs/borders.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ Override default border colors with blue, green, red, purple, yellow, and gray b
8686
```
8787

8888
### Borders with alpha transparency
89+
8990
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)`.
9091

9192
```html
@@ -125,3 +126,30 @@ Use the following utilities to add or remove rounded corners: `rounded-0` remove
125126
.circle
126127
</div>
127128
```
129+
130+
You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
131+
132+
```html
133+
<div class="border rounded-top mb-2">
134+
.rounded-top
135+
</div>
136+
<div class="border rounded-right mb-2">
137+
.rounded-right
138+
</div>
139+
<div class="border rounded-bottom mb-2">
140+
.rounded-bottom
141+
</div>
142+
<div class="border rounded-left mb-2">
143+
.rounded-left
144+
</div>
145+
```
146+
147+
## Responsive borders
148+
149+
Top, right, bottom, and left border utilities are can be used responsively to add or remove borders to an element at different screensizes.
150+
151+
```html
152+
<div class="border-top border-sm-right border-md-bottom border-lg-top-0">
153+
.border-top-0
154+
</div>
155+
```

‎modules/primer-utilities/lib/borders.scss‎

Lines changed: 71 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,100 @@
11
// Border utilities
22
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
33

4-
/* Add a gray border */
5-
.border { border: $border !important; }
6-
/* Add a gray border to the top */
7-
.border-top { border-top: $border !important; }
8-
/* Add a gray border to the right */
9-
.border-right { border-right: $border !important; }
10-
/* Add a gray border to the bottom */
11-
.border-bottom { border-bottom: $border !important; }
12-
/* Add a gray border to the left */
13-
.border-left { border-left: $border !important; }
4+
/* Add a gray border on all sides */
5+
.border { border: $border !important; }
6+
147
/* Add a gray border to the left and right */
158
.border-y {
169
border-top: $border !important;
1710
border-bottom: $border !important;
1811
}
1912

13+
/* Remove borders from all sides */
14+
.border-0 { border: 0 !important; }
15+
2016
.border-dashed { border-style: dashed !important; }
2117

2218
/* Use with .border to turn the border blue */
23-
.border-blue { border-color: $border-blue !important; }
19+
.border-blue { border-color: $border-blue !important; }
2420
/* Use with .border to turn the border blue-light */
2521
.border-blue-light { border-color: $border-blue-light !important; }
2622
/* Use with .border to turn the border green */
27-
.border-green { border-color: $border-green !important; }
23+
.border-green { border-color: $border-green !important; }
2824
/* Use with .border to turn the border green light */
2925
.border-green-light { border-color: $border-green-light !important; }
3026
/* Use with .border to turn the border red */
31-
.border-red { border-color: $border-red !important; }
27+
.border-red { border-color: $border-red !important; }
3228
/* Use with .border to turn the border red-light */
3329
.border-red-light { border-color: $border-red-light !important; }
3430
/* Use with .border to turn the border purple */
35-
.border-purple { border-color: $border-purple !important; }
31+
.border-purple { border-color: $border-purple !important; }
3632
/* Use with .border to turn the border yellow */
37-
.border-yellow { border-color: $border-yellow !important; }
33+
.border-yellow { border-color: $border-yellow !important; }
3834
/* Use with .border to turn the border gray-light */
39-
.border-gray-light { border-color: $border-gray-light !important; }
35+
.border-gray-light { border-color: $border-gray-light !important; }
4036
/* Use with .border to turn the border gray-dark */
41-
.border-gray-dark { border-color: $border-gray-dark !important; }
37+
.border-gray-dark { border-color: $border-gray-dark !important; }
4238
/* Use with .border to turn the border rgba black 0.15 */
43-
.border-black-fade { border-color: $border-black-fade !important; }
39+
.border-black-fade { border-color: $border-black-fade !important; }
40+
41+
$edges: (
42+
top: (top-left, top-right),
43+
right: (top-right, bottom-right),
44+
bottom: (bottom-right, bottom-left),
45+
left: (bottom-left, top-left)
46+
);
47+
48+
@each $breakpoint, $variant in $responsive-variants {
49+
@include breakpoint($breakpoint) {
50+
/* Add a gray border */
51+
/* Add a gray border to the top */
52+
.border#{$variant}-top { border-top: $border !important; }
53+
/* Add a gray border to the right */
54+
.border#{$variant}-right { border-right: $border !important; }
55+
/* Add a gray border to the bottom */
56+
.border#{$variant}-bottom { border-bottom: $border !important; }
57+
/* Add a gray border to the left */
58+
.border#{$variant}-left { border-left: $border !important; }
59+
60+
/* Remove the top border */
61+
.border#{$variant}-top-0 { border-top: 0 !important; }
62+
/* Remove the right border */
63+
.border#{$variant}-right-0 { border-right: 0 !important; }
64+
/* Remove the bottom border */
65+
.border#{$variant}-bottom-0 { border-bottom: 0 !important; }
66+
/* Remove the left border */
67+
.border#{$variant}-left-0 { border-left: 0 !important; }
4468

45-
// Without borders
46-
/* Remove all borders */
47-
.border-0 { border: 0 !important; }
48-
/* Remove the top border */
49-
.border-top-0 { border-top: 0 !important; }
50-
/* Remove the right border */
51-
.border-right-0 { border-right: 0 !important; }
52-
/* Remove the bottom border */
53-
.border-bottom-0 { border-bottom: 0 !important; }
54-
/* Remove the left border */
55-
.border-left-0 { border-left: 0 !important; }
69+
// Rounded corners
70+
/* Remove the border-radius */
71+
.rounded#{$variant}-0 { border-radius: 0 !important; }
72+
/* Add a border-radius to all corners */
73+
.rounded#{$variant}-1 { border-radius: $border-radius !important; }
74+
/* Add a 2x border-radius to all corners */
75+
.rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
76+
77+
@each $edge, $corners in $edges {
78+
.rounded#{$variant}-#{$edge}-0 {
79+
@each $corner in $corners {
80+
border-#{$corner}-radius: 0;
81+
}
82+
}
83+
84+
.rounded#{$variant}-#{$edge}-1 {
85+
@each $corner in $corners {
86+
border-#{$corner}-radius: $border-radius;
87+
}
88+
}
89+
90+
.rounded#{$variant}-#{$edge}-2 {
91+
@each $corner in $corners {
92+
border-#{$corner}-radius: $border-radius * 2;
93+
}
94+
}
95+
}
96+
}
97+
}
5698

57-
// Rounded corners
58-
/* Remove the border-radius */
59-
.rounded-0 { border-radius: 0 !important; }
60-
/* Add a border-radius to all corners */
61-
.rounded-1 { border-radius: $border-radius !important; }
62-
/* Add a 2x border-radius to all corners */
63-
.rounded-2 { border-radius: $border-radius * 2 !important; }
6499
/* Add a 50% border-radius to make something into a circle */
65100
.circle { border-radius: 50% !important; }

0 commit comments

Comments
 (0)