mirror of
https://github.com/primer/css.git
synced 2024-09-21 05:39:15 +03:00
add support docs for breakpoints, color-system, spacing, and typography
This commit is contained in:
broccolini
parent
944bd61083
commit
737d343d91
60
modules/primer-support/docs/breakpoints.md
Normal file
60
modules/primer-support/docs/breakpoints.md
Normal file
@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Breakpoints
|
||||
status: Stable
|
||||
source: https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/mixins/layout.scss
|
||||
---
|
||||
|
||||
{:toc}
|
||||
|
||||
Our breakpoints are based on screen widths where our content starts to break. Since most of GitHub is currently a fixed-width with we use pixel widths to make it easy for us to match page widths for responsive and non-responsive pages. **Our breakpoints may change as we move more of the product into responsive layouts.**
|
||||
|
||||
We use abbreviations for each breakpoint to keep the class names concise. This abbreviated syntax is used consistently across responsive styles. Responsive styles allow you to change the styles properties at each breakpoint. For example, when using column widths for grid layouts, you can change specify that the width is 12 columns wide at the small breakpoint, and 6 columns wide from the large breakpoint: `<div class="col-sm-12 col-lg-6">...</div>`
|
||||
|
||||
| Breakpoint | Syntax | Description |
|
||||
| --- | --- | --- |
|
||||
| Small | sm | min-width: 544px |
|
||||
| Medium | md | min-width: 768px |
|
||||
| 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>
|
||||
|
||||
Responsive styles are available for [margin](./utilities/margin#responsive-margin), [padding](./utilities/padding#responsive-padding), [layout](./utilities/layout), [flexbox](.utilities/flexbox#responsive-flex-utilities), and the [grid](./objects/grid#responsive-grids) system.
|
||||
|
||||
## Breakpoint variables
|
||||
|
||||
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;
|
||||
$width-md: 768px;
|
||||
$width-lg: 1012px;
|
||||
$width-xl: 1280px;
|
||||
|
||||
$breakpoints: (
|
||||
// Small screen / phone
|
||||
sm: $width-sm,
|
||||
// Medium screen / tablet
|
||||
md: $width-md,
|
||||
// Large screen / desktop (980 + (12 * 2)) <= container + gutters
|
||||
lg: $width-lg,
|
||||
// Extra large screen / wide desktop
|
||||
xl: $width-xl
|
||||
) !default;
|
||||
|
||||
```
|
||||
|
||||
## Media query mixins
|
||||
Use media query mixins when you want to change CSS properties at a particular breakpoint. The media query mixin works by passing in a breakpoint value, such as `breakpoint(md)`.
|
||||
|
||||
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`.
|
||||
|
||||
```
|
||||
.styles {
|
||||
font-size: 28px;
|
||||
@include breakpoint(md) { font-size: 32px; }
|
||||
}
|
||||
```
|
||||
392
modules/primer-support/docs/color-system.md
Normal file
392
modules/primer-support/docs/color-system.md
Normal file
@ -0,0 +1,392 @@
|
||||
---
|
||||
title: Color system
|
||||
status_issue: https://github.com/github/design-systems/issues/301
|
||||
status: New release
|
||||
source: https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/color-system.scss
|
||||
---
|
||||
|
||||
{:toc}
|
||||
|
||||
## Color palette
|
||||
|
||||
<div class="markdown-no-margin mb-6 d-flex h5">
|
||||
<div class="gray-500 d-flex color-square mr-2">
|
||||
<p class="p-3 flex-self-end text-white">Gray</p>
|
||||
</div>
|
||||
<div class="blue-500 d-flex color-square mr-2">
|
||||
<p class="p-3 flex-self-end text-white">Blue</p>
|
||||
</div>
|
||||
<div class="green-500 d-flex color-square mr-2">
|
||||
<p class="p-3 flex-self-end text-white">Green</p>
|
||||
</div>
|
||||
<div class="purple-500 d-flex color-square mr-2">
|
||||
<p class="p-3 flex-self-end text-white">Purple</p>
|
||||
</div>
|
||||
<div class="yellow-500 d-flex color-square mr-2">
|
||||
<p class="p-3 flex-self-end">Yellow</p>
|
||||
</div>
|
||||
<div class="orange-500 d-flex color-square mr-2">
|
||||
<p class="p-3 flex-self-end">Orange</p>
|
||||
</div>
|
||||
<div class="red-500 d-flex color-square mr-2">
|
||||
<p class="p-3 flex-self-end text-white">Red</p>
|
||||
</div>
|
||||
<div class="bg-white d-flex color-square border border-gray-dark">
|
||||
<p class="p-3 flex-self-end">White</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Color variables
|
||||
|
||||
<div class="d-flex flex-wrap gutter">
|
||||
|
||||
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
||||
<h3>Gray</h3>
|
||||
<div class="gray-500 my-2 p-3">
|
||||
<p class="text-white f00-light pb-3">Gray</p>
|
||||
<div class="d-flex text-white">
|
||||
<p class="h4 flex-auto">$gray-500</p>
|
||||
<p class="text-right text-mono flex-auto">#6a737d</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gray-000 h4">
|
||||
<p class="p-3">$gray-000</p>
|
||||
</div>
|
||||
<div class="gray-100 h4">
|
||||
<p class="p-3">$gray-100</p>
|
||||
</div>
|
||||
<div class="gray-200 h4">
|
||||
<p class="p-3">$gray-200</p>
|
||||
</div>
|
||||
<div class="gray-300 h4">
|
||||
<p class="p-3">$gray-300</p>
|
||||
</div>
|
||||
<div class="gray-400 h4">
|
||||
<p class="p-3">$gray-400</p>
|
||||
</div>
|
||||
<div class="gray-500 h4">
|
||||
<p class="p-3 text-white">$gray-500</p>
|
||||
</div>
|
||||
<div class="gray-600 h4">
|
||||
<p class="p-3 text-white">$gray-600</p>
|
||||
</div>
|
||||
<div class="gray-700 h4">
|
||||
<p class="p-3 text-white">$gray-700</p>
|
||||
</div>
|
||||
<div class="gray-800 h4">
|
||||
<p class="p-3 text-white">$gray-800</p>
|
||||
</div>
|
||||
<div class="gray-900 h4">
|
||||
<p class="p-3 text-white">$gray-900</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
||||
<h3>Blue</h3>
|
||||
<div class="blue-500 my-2 p-3">
|
||||
<p class="text-white f00-light pb-3">Blue</p>
|
||||
<div class="d-flex text-white">
|
||||
<p class="h4 flex-auto">$blue-500</p>
|
||||
<p class="text-right text-mono flex-auto">#0366d6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue-000 h4">
|
||||
<p class="p-3">$blue-000</p>
|
||||
</div>
|
||||
<div class="blue-100 h4">
|
||||
<p class="p-3">$blue-100</p>
|
||||
</div>
|
||||
<div class="blue-200 h4">
|
||||
<p class="p-3">$blue-200</p>
|
||||
</div>
|
||||
<div class="blue-300 h4">
|
||||
<p class="p-3">$blue-300</p>
|
||||
</div>
|
||||
<div class="blue-400 h4">
|
||||
<p class="p-3">$blue-400</p>
|
||||
</div>
|
||||
<div class="blue-500 h4">
|
||||
<p class="p-3 text-white">$blue-500</p>
|
||||
</div>
|
||||
<div class="blue-600 h4">
|
||||
<p class="p-3 text-white">$blue-600</p>
|
||||
</div>
|
||||
<div class="blue-700 h4">
|
||||
<p class="p-3 text-white">$blue-700</p>
|
||||
</div>
|
||||
<div class="blue-800 h4">
|
||||
<p class="p-3 text-white">$blue-800</p>
|
||||
</div>
|
||||
<div class="blue-900 h4">
|
||||
<p class="p-3 text-white">$blue-900</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
||||
<h3>Green</h3>
|
||||
<div class="green-500 my-2 p-3">
|
||||
<p class="text-white f00-light pb-3">Green</p>
|
||||
<div class="d-flex text-white">
|
||||
<p class="h4 flex-auto">$green-500</p>
|
||||
<p class="text-right text-mono flex-auto">#28a745</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="green-000 h4">
|
||||
<p class="p-3">$green-000</p>
|
||||
</div>
|
||||
<div class="green-100 h4">
|
||||
<p class="p-3">$green-100</p>
|
||||
</div>
|
||||
<div class="green-200 h4">
|
||||
<p class="p-3">$green-200</p>
|
||||
</div>
|
||||
<div class="green-300 h4">
|
||||
<p class="p-3">$green-300</p>
|
||||
</div>
|
||||
<div class="green-400 h4">
|
||||
<p class="p-3">$green-400</p>
|
||||
</div>
|
||||
<div class="green-500 h4">
|
||||
<p class="p-3 text-white">$green-500</p>
|
||||
</div>
|
||||
<div class="green-600 h4">
|
||||
<p class="p-3 text-white">$green-600</p>
|
||||
</div>
|
||||
<div class="green-700 h4">
|
||||
<p class="p-3 text-white">$green-700</p>
|
||||
</div>
|
||||
<div class="green-800 h4">
|
||||
<p class="p-3 text-white">$green-800</p>
|
||||
</div>
|
||||
<div class="green-900 h4">
|
||||
<p class="p-3 text-white">$green-900</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
||||
<h3>Purple</h3>
|
||||
<div class="purple-500 text-white my-2 p-3">
|
||||
<p class="f00-light pb-3">Purple</p>
|
||||
<div class="d-flex">
|
||||
<p class="h4 flex-auto">$purple-500</p>
|
||||
<p class="text-right text-mono flex-auto">#6f42c1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="purple-000 h4">
|
||||
<p class="p-3">$purple-000</p>
|
||||
</div>
|
||||
<div class="purple-100 h4">
|
||||
<p class="p-3">$purple-100</p>
|
||||
</div>
|
||||
<div class="purple-200 h4">
|
||||
<p class="p-3">$purple-200</p>
|
||||
</div>
|
||||
<div class="purple-300 h4">
|
||||
<p class="p-3">$purple-300</p>
|
||||
</div>
|
||||
<div class="purple-400 h4">
|
||||
<p class="p-3">$purple-400</p>
|
||||
</div>
|
||||
<div class="purple-500 h4">
|
||||
<p class="p-3 text-white">$purple-500</p>
|
||||
</div>
|
||||
<div class="purple-600 h4">
|
||||
<p class="p-3 text-white">$purple-600</p>
|
||||
</div>
|
||||
<div class="purple-700 h4">
|
||||
<p class="p-3 text-white">$purple-700</p>
|
||||
</div>
|
||||
<div class="purple-800 h4">
|
||||
<p class="p-3 text-white">$purple-800</p>
|
||||
</div>
|
||||
<div class="purple-900 h4">
|
||||
<p class="p-3 text-white">$purple-900</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
||||
<h3>Yellow</h3>
|
||||
<div class="yellow-500 my-2 p-3">
|
||||
<p class="f00-light pb-3">Yellow</p>
|
||||
<div class="d-flex">
|
||||
<p class="h4 flex-auto">$yellow-500</p>
|
||||
<p class="text-right text-mono flex-auto">#ffd93d</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yellow-000 h4">
|
||||
<p class="p-3">$yellow-000</p>
|
||||
</div>
|
||||
<div class="yellow-100 h4">
|
||||
<p class="p-3">$yellow-100</p>
|
||||
</div>
|
||||
<div class="yellow-200 h4">
|
||||
<p class="p-3">$yellow-200</p>
|
||||
</div>
|
||||
<div class="yellow-300 h4">
|
||||
<p class="p-3">$yellow-300</p>
|
||||
</div>
|
||||
<div class="yellow-400 h4">
|
||||
<p class="p-3">$yellow-400</p>
|
||||
</div>
|
||||
<div class="yellow-500 h4">
|
||||
<p class="p-3">$yellow-500</p>
|
||||
</div>
|
||||
<div class="yellow-600 h4">
|
||||
<p class="p-3">$yellow-600</p>
|
||||
</div>
|
||||
<div class="yellow-700 h4">
|
||||
<p class="p-3">$yellow-700</p>
|
||||
</div>
|
||||
<div class="yellow-800 h4">
|
||||
<p class="p-3 text-white">$yellow-800</p>
|
||||
</div>
|
||||
<div class="yellow-900 h4">
|
||||
<p class="p-3 text-white">$yellow-900</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
||||
<h3>Orange</h3>
|
||||
<div class="orange-500 my-2 p-3 text-white">
|
||||
<p class="f00-light pb-3">Orange</p>
|
||||
<div class="d-flex">
|
||||
<p class="h4 flex-auto">$orange-500</p>
|
||||
<p class="text-right text-mono flex-auto">#f66a0a</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="orange-000 h4">
|
||||
<p class="p-3">$orange-000</p>
|
||||
</div>
|
||||
<div class="orange-100 h4">
|
||||
<p class="p-3">$orange-100</p>
|
||||
</div>
|
||||
<div class="orange-200 h4">
|
||||
<p class="p-3">$orange-200</p>
|
||||
</div>
|
||||
<div class="orange-300 h4">
|
||||
<p class="p-3">$orange-300</p>
|
||||
</div>
|
||||
<div class="orange-400 h4">
|
||||
<p class="p-3">$orange-400</p>
|
||||
</div>
|
||||
<div class="orange-500 h4">
|
||||
<p class="p-3 text-white">$orange-500</p>
|
||||
</div>
|
||||
<div class="orange-600 h4">
|
||||
<p class="p-3 text-white">$orange-600</p>
|
||||
</div>
|
||||
<div class="orange-700 h4">
|
||||
<p class="p-3 text-white">$orange-700</p>
|
||||
</div>
|
||||
<div class="orange-800 h4">
|
||||
<p class="p-3 text-white">$orange-800</p>
|
||||
</div>
|
||||
<div class="orange-900 h4">
|
||||
<p class="p-3 text-white">$orange-900</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
||||
<h3>Red</h3>
|
||||
<div class="red-500 text-white my-2 p-3">
|
||||
<p class="f00-light pb-3">Red</p>
|
||||
<div class="d-flex">
|
||||
<p class="h4 flex-auto">$red-500</p>
|
||||
<p class="text-right text-mono flex-auto">#dc3545</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="red-000 h4">
|
||||
<p class="p-3">$red-000</p>
|
||||
</div>
|
||||
<div class="red-100 h4">
|
||||
<p class="p-3">$red-100</p>
|
||||
</div>
|
||||
<div class="red-200 h4">
|
||||
<p class="p-3">$red-200</p>
|
||||
</div>
|
||||
<div class="red-300 h4">
|
||||
<p class="p-3">$red-300</p>
|
||||
</div>
|
||||
<div class="red-400 h4">
|
||||
<p class="p-3">$red-400</p>
|
||||
</div>
|
||||
<div class="red-500 h4">
|
||||
<p class="p-3 text-white">$red-500</p>
|
||||
</div>
|
||||
<div class="red-600 h4">
|
||||
<p class="p-3 text-white">$red-600</p>
|
||||
</div>
|
||||
<div class="red-700 h4">
|
||||
<p class="p-3 text-white">$red-700</p>
|
||||
</div>
|
||||
<div class="red-800 h4">
|
||||
<p class="p-3 text-white">$red-800</p>
|
||||
</div>
|
||||
<div class="red-900 h4">
|
||||
<p class="p-3 text-white">$red-900</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 flex-column col-6">
|
||||
</div>
|
||||
<!-- Gray and fades (headings inside the markup) -->
|
||||
|
||||
<div class="mb-3 flex-column col-6 markdown-no-margin">
|
||||
<h3>Black fades</h3>
|
||||
<div class="black text-white my-2 p-3">
|
||||
<p class="f00-light pb-3">Black</p>
|
||||
<div class="d-flex pb-1">
|
||||
<p class="h4 flex-auto">$black</p>
|
||||
<p class="text-right text-mono flex-auto"><code>rgb(27,31,35)</code> #1b1f23</p>
|
||||
</div>
|
||||
<p class="f5 pt-3 border-top border-white">Black fades apply alpha transparency to the <strong>$black</strong> variable. The black color value has a slight blue hue to match our grays.</p>
|
||||
</div>
|
||||
<div class="black-fade-15">
|
||||
<p class="h4 p-3">$black-fade-15</p>
|
||||
</div>
|
||||
<div class="black-fade-30">
|
||||
<p class="h4 p-3">$black-fade-30</p>
|
||||
</div>
|
||||
<div class="black-fade-50">
|
||||
<p class="h4 p-3">$black-fade-50</p>
|
||||
</div>
|
||||
<div class="black-fade-70">
|
||||
<p class="h4 p-3 text-white">$black-fade-70</p>
|
||||
</div>
|
||||
<div class="black-fade-85">
|
||||
<p class="h4 p-3 text-white">$black-fade-85</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex-column col-6 markdown-no-margin">
|
||||
<h3>White fades</h3>
|
||||
<div class="bg-white border text-gray-dark my-2 p-3">
|
||||
<p class="f00-light pb-3">White</p>
|
||||
<div class="d-flex pb-1">
|
||||
<p class="h4 flex-auto">$white</p>
|
||||
<p class="text-right text-mono flex-auto"><code>rgb(255, 255, 255)</code> #fff</p>
|
||||
</div>
|
||||
<p class="f5 pt-3 border-top border-white">White fades apply alpha transparency to the <strong>$white</strong> variable, below these are shown overlaid on a dark gray background.</p>
|
||||
</div>
|
||||
<div class="bg-gray-dark pr-4">
|
||||
<div class="white-fade-15">
|
||||
<p class="h4 p-3 text-white">$white-fade-15</p>
|
||||
</div>
|
||||
<div class="white-fade-30">
|
||||
<p class="h4 p-3 text-white">$white-fade-30</p>
|
||||
</div>
|
||||
<div class="white-fade-50">
|
||||
<p class="h4 p-3">$white-fade-50</p>
|
||||
</div>
|
||||
<div class="white-fade-70">
|
||||
<p class="h4 p-3">$white-fade-70</p>
|
||||
</div>
|
||||
<div class="white-fade-85">
|
||||
<p class="h4 p-3">$white-fade-85</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
50
modules/primer-support/docs/spacing.md
Normal file
50
modules/primer-support/docs/spacing.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Spacing
|
||||
status: Stable
|
||||
source: https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/layout.scss
|
||||
---
|
||||
|
||||
{:toc}
|
||||
|
||||
## Spacing scale
|
||||
The spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of `8px`.
|
||||
|
||||
| Scale | Value |
|
||||
| --- | --- |
|
||||
| 0 | 0 |
|
||||
| 1 | 4px |
|
||||
| 2 | 8px |
|
||||
| 3 | 16px |
|
||||
| 4 | 24px |
|
||||
| 5 | 32px |
|
||||
| 6 | 40px |
|
||||
|
||||
The spacing scale is used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities, and via variables within components.
|
||||
|
||||
## 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.
|
||||
|
||||
We aim for whole numbers, however, GitHub's body font-size is 14px which is difficult to work with, so we sometimes can't achieve a whole number. Less desirable values are highlighted in <span class="text-red">red</span> below.
|
||||
|
||||
| Fraction | Y Padding (em) | Total height at 14px | Total height at 16px |
|
||||
| --- | --- | --- | --- |
|
||||
| 3/4 | .75 | 42 | 48 |
|
||||
| 1/2 | .5 | 35 | 40 |
|
||||
| 3/8 | .375 | <span class="text-red">31.5</span> | 36 |
|
||||
| 1/4 | .25 | 28 | 32 |
|
||||
| 1/8 | .125 | <span class="text-red">24.5</span> | 28 |
|
||||
|
||||
We recommend using the fractions shown above. To calculate values with other font-sizes or em values, we suggest using [Formula](http://jxnblk.com/formula/).
|
||||
|
||||
## Spacer Variables
|
||||
|
||||
These variables match the above scale and are encouraged to be used within components. They are also used in our [margin](./utilities/margin) and [padding utilities](./utilities/padding).
|
||||
|
||||
```scss
|
||||
$spacer-1: 4px;
|
||||
$spacer-2: 8px;
|
||||
$spacer-3: 16px;
|
||||
$spacer-4: 24px;
|
||||
$spacer-5: 32px;
|
||||
$spacer-6: 40px;
|
||||
```
|
||||
90
modules/primer-support/docs/typography.md
Normal file
90
modules/primer-support/docs/typography.md
Normal file
@ -0,0 +1,90 @@
|
||||
---
|
||||
title: Typography
|
||||
status_issue: https://github.com/github/design-systems/issues/329
|
||||
status: New release
|
||||
source: https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/typography.scss
|
||||
---
|
||||
|
||||
{:toc}
|
||||
|
||||
## Type Scale
|
||||
|
||||
The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
|
||||
|
||||
Font sizes are smaller on mobile and scale up at the `md` [breakpoint](#breakpoints) to be larger on desktop.
|
||||
|
||||
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 00 | 40px | 48px | 60 | 72 |
|
||||
| 0 | 32px | 40px | 50 | 60 |
|
||||
| 1 | 26px | 32px | 40 | 48 |
|
||||
| 2 | 22px | 24px | 30 | 36 |
|
||||
| 3 | 18px | 20px | 25 | 30 |
|
||||
| 4 | 16px | 16px | 20 | 24 |
|
||||
| 5 | 14px | 14px | 17.5 | 21 |
|
||||
| 6 | 12px | 12px | 15 | 18 |
|
||||
|
||||
The typography scale is used to create [typography utilities](./utilities/typography).
|
||||
|
||||
## Typography variables
|
||||
|
||||
#### Font size variables
|
||||
```scss
|
||||
// Heading sizes - mobile
|
||||
// h4—h6 remain the same size on both mobile & desktop
|
||||
$h00-size-mobile: 40px;
|
||||
$h0-size-mobile: 32px;
|
||||
$h1-size-mobile: 26px;
|
||||
$h2-size-mobile: 22px;
|
||||
$h3-size-mobile: 18px;
|
||||
|
||||
// Heading sizes - desktop
|
||||
$h00-size: 48px;
|
||||
$h0-size: 40px;
|
||||
$h1-size: 32px;
|
||||
$h2-size: 24px;
|
||||
$h3-size: 20px;
|
||||
$h4-size: 16px;
|
||||
$h5-size: 14px;
|
||||
$h6-size: 12px;
|
||||
```
|
||||
|
||||
#### Font weight variables
|
||||
```scss
|
||||
$font-weight-bold: 600 !default;
|
||||
$font-weight-light: 300 !default;
|
||||
```
|
||||
|
||||
#### Line height variables
|
||||
```scss
|
||||
$lh-condensed-ultra: 1 !default;
|
||||
$lh-condensed: 1.25 !default;
|
||||
$lh-default: 1.5 !default;
|
||||
```
|
||||
|
||||
## Typography Mixins
|
||||
Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](./utilities/typography#heading-utilities) which requires no additional CSS.
|
||||
|
||||
Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:
|
||||
|
||||
```scss
|
||||
.styles {
|
||||
@include h1;
|
||||
}
|
||||
```
|
||||
|
||||
Responsive heading mixins can be used to adjust the font-size between the `sm` and `lg` breakpoint. Only headings 1—3 are responsive. Heading 4—6 are small enough to remain the same between mobile and desktop. Responsive heading mixins include the font-size and font-weight as well as the media query. To use a responsive heading mixin, postfix the heading with `-responsive`:
|
||||
|
||||
```scss
|
||||
.styles {
|
||||
@include h1-responsive;
|
||||
}
|
||||
```
|
||||
|
||||
Responsive type scale mixins are also available. Type scale mixins apply a font-size that gets slightly bigger at the `lg` breakpoint. They do not apply a font-weight. Like the responsive heading mixins, they are only available for size `f1` to `f3` and are postfixed with `-responsive` as in the example below:
|
||||
|
||||
```scss
|
||||
.style {
|
||||
@include f1-responsive;
|
||||
}
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user