primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-04 12:22:17 +03:00
Code Issues Projects Releases Wiki Activity

docs(primer-support): fix markup issues, code fmt

Browse Source
This commit is contained in:
Shawn Allen 2019-01-08 11:59:31 -08:00
parent d45ba99ea3
commit a650d0f87d
1 changed files with 2 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/primer-support/docs/breakpoints.md
View File

@ -17,7 +17,7 @@ We use abbreviations for each breakpoint to keep the class names concise. This a
| Large | lg | min-width: 1012px |
| Extra-large | xl | min-width: 1280px |
<small>**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized.</small>
**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized.
Responsive styles are available for [margin](../../utilities/margin/#responsive-margins), [padding](../../utilities/padding#responsive-padding), [layout](../../utilities/layout), [flexbox](../../utilities/flexbox#responsive-flex-utilities), and the [grid](../../objects/grid#responsive-grids) system.
@ -26,7 +26,6 @@ Responsive styles are available for [margin](../../utilities/margin/#responsive-
The above values are defined as variables, and then put into a Sass map that generates the media query mixin.
```scss
// breakpoints
$width-xs: 0;
$width-sm: 544px;
@ -44,7 +43,6 @@ $breakpoints: (
// Extra large screen / wide desktop
xl: $width-xl
) !default;
```
## Media query mixins
@ -52,7 +50,7 @@ Use media query mixins when you want to change CSS properties at a particular br
Media queries are scoped from each breakpoint and upwards. In the example below, the font size is `28px` until the viewport size meets the `lg` breakpoint, from there upwards—including through the `xl` breakpoint—the font size will be `32px`.
```
```scss
.styles {
font-size: 28px;
@include breakpoint(md) { font-size: 32px; }