mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-13 05:13:33 -06:00
Initial commit
This commit is contained in:
Patrick Marsceill
82
docs/utilities/color.md
Normal file
82
docs/utilities/color.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
layout: default
|
||||
title: Color
|
||||
nav_order: 3
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Color Utilities
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
All the colors used in Just the Docs have been systemsized into a series of variables that have been extended to both font color and background color utility classes.
|
||||
|
||||
## Light Greys
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-000"></span> `grey-lt-000` | `.text-grey-lt-000` | `.bg-grey-lt-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-100"></span> `grey-lt-100` | `.text-grey-lt-100` | `.bg-grey-lt-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-200"></span> `grey-lt-200` | `.text-grey-lt-200` | `.bg-grey-lt-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-300"></span> `grey-lt-300` | `.text-grey-lt-300` | `.bg-grey-lt-300` |
|
||||
|
||||
## Dark Greys
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-000"></span> `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-100"></span> `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-200"></span> `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-300"></span> `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` |
|
||||
|
||||
## Purples
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-000"></span> `purple-000` | `.text-purple-000` | `.bg-purple-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-100"></span> `purple-100` | `.text-purple-100` | `.bg-purple-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-200"></span> `purple-200` | `.text-purple-200` | `.bg-purple-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-300"></span> `purple-300` | `.text-purple-300` | `.bg-purple-300` |
|
||||
|
||||
## Blues
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-000"></span> `blue-000` | `.text-blue-000` | `.bg-blue-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-100"></span> `blue-100` | `.text-blue-100` | `.bg-blue-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-200"></span> `blue-200` | `.text-blue-200` | `.bg-blue-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-300"></span> `blue-300` | `.text-blue-300` | `.bg-blue-300` |
|
||||
|
||||
## Greens
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"></span> `green-000` | `.text-green-000` | `.bg-green-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-100"></span> `green-100` | `.text-green-100` | `.bg-green-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-200"></span> `green-200` | `.text-green-200` | `.bg-green-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-300"></span> `green-300` | `.text-green-300` | `.bg-green-300` |
|
||||
|
||||
## Yellows
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-000"></span> `yellow-000` | `.text-yellow-000` | `.bg-yellow-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-100"></span> `yellow-100` | `.text-yellow-100` | `.bg-yellow-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-200"></span> `yellow-200` | `.text-yellow-200` | `.bg-yellow-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-300"></span> `yellow-300` | `.text-yellow-300` | `.bg-yellow-300` |
|
||||
|
||||
## Reds
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-000"></span> `red-000` | `.text-red-000` | `.bg-red-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-100"></span> `red-100` | `.text-red-100` | `.bg-red-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-200"></span> `red-200` | `.text-red-200` | `.bg-red-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-300"></span> `red-300` | `.text-red-300` | `.bg-red-300` |
|
||||
114
docs/utilities/layout.md
Normal file
114
docs/utilities/layout.md
Normal file
@@ -0,0 +1,114 @@
|
||||
---
|
||||
layout: default
|
||||
title: Layout
|
||||
nav_order: 2
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Layout Utilities
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Spacing
|
||||
|
||||
These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.
|
||||
|
||||
| Classname prefix | What it does |
|
||||
|:-----------------|:------------------------------|
|
||||
| `.m-` | `margin` |
|
||||
| `.mx-` | `margin-left`, `margin-right` |
|
||||
| `.my-` | `margin top`, `margin bottom` |
|
||||
| `.mt-` | `margin-top` |
|
||||
| `.mr-` | `margin-right` |
|
||||
| `.mb-` | `margin-bottom` |
|
||||
| `.ml-` | `margin-left` |
|
||||
|
||||
| Classname prefix | What it does |
|
||||
|:-----------------|:--------------------------------|
|
||||
| `.p-` | `padding` |
|
||||
| `.px-` | `padding-left`, `padding-right` |
|
||||
| `.py-` | `padding top`, `padding bottom` |
|
||||
| `.pt-` | `padding-top` |
|
||||
| `.pr-` | `padding-right` |
|
||||
| `.pb-` | `padding-bottom` |
|
||||
| `.pl-` | `padding-left` |
|
||||
|
||||
Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units:
|
||||
|
||||
| Spacer/suffix | Size in rems | Rem converted to px |
|
||||
|:---------------|:--------------|:--------------------|
|
||||
| `1` | 0.25rem | 4px |
|
||||
| `2` | 0.5rem | 8px |
|
||||
| `3` | 0.75rem | 12px |
|
||||
| `4` | 1rem | 16px |
|
||||
| `5` | 1.5rem | 24px |
|
||||
| `6` | 2rem | 32px |
|
||||
| `7` | 2.5rem | 40px |
|
||||
| `8` | 3rem | 48px |
|
||||
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
This paragraph will have a margin bottom of 1rem/16px at large screens.
|
||||
{: .mb-lg-4 }
|
||||
|
||||
This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
|
||||
{: .px-6 }
|
||||
|
||||
```
|
||||
|
||||
## Vertical Alignment
|
||||
|
||||
| Classname | What it does |
|
||||
|:-----------------------|:--------------------------------|
|
||||
| `.v-align-baseline` | `vertical-align: baseline` |
|
||||
| `.v-align-bottom` | `vertical-align: bottom` |
|
||||
| `.v-align-middle` | `vertical-align: middle` |
|
||||
| `.v-align-text-bottom` | `vertical-align: text-bottom` |
|
||||
| `.v-align-text-top` | `vertical-align: text-top` |
|
||||
| `.v-align-top` | `vertical-align: top` |
|
||||
|
||||
## Display
|
||||
|
||||
Display classes aid in adapting the layout of the elements on a page:
|
||||
|
||||
| Class | |
|
||||
|:------------------|:------------------------|
|
||||
| `.d-block` | `display: block` |
|
||||
| `.d-flex` | `display: flex` |
|
||||
| `.d-inline` | `display: inline` |
|
||||
| `.d-inline-block` | `display: inline-block` |
|
||||
| `.d-none` | `display: none` |
|
||||
|
||||
Use these classes in conjunction with the responsive modifiers.
|
||||
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
This button will be hidden until medium screen sizes:
|
||||
|
||||
[ A button ](#url)
|
||||
{: .d-none .d-md-inline-block }
|
||||
|
||||
These headings will be `inline-block`:
|
||||
|
||||
### heading 3
|
||||
{ .d-inline-block }
|
||||
|
||||
### heading 3
|
||||
{ .d-inline-block }
|
||||
|
||||
```
|
||||
19
docs/utilities/responsive-modifiers.md
Normal file
19
docs/utilities/responsive-modifiers.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
layout: default
|
||||
title: Responsive Modifiers
|
||||
nav_order: 1
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Responsive modifiers
|
||||
|
||||
Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prefix and suffix classes.
|
||||
|
||||
| Modifier | Screen size |
|
||||
|:----------|:-------------------------------------|
|
||||
| (none) | All screens until the next modifier |
|
||||
| `xs` | 320px (20rem) and up |
|
||||
| `sm` | 500px (31.25rem) and up |
|
||||
| `md` | 740px (46.25rem) and up |
|
||||
| `lg` | 1120px (70rem) and up |
|
||||
| `xl` | 1400px (87.5rem) and up |
|
||||
149
docs/utilities/typography.md
Normal file
149
docs/utilities/typography.md
Normal file
@@ -0,0 +1,149 @@
|
||||
---
|
||||
layout: default
|
||||
title: Typography
|
||||
nav_order: 3
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Typography Utilities
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Font size
|
||||
|
||||
Use the `.fs-1` - `.fs-10` to set an explicit font-size.
|
||||
|
||||
| Class | Small screen size `font-size` | Large screen size `font-size` |
|
||||
|:--------|:-------------------------------|:------------------------------|
|
||||
| `.fs-1` | 9px | 10px |
|
||||
| `.fs-2` | 11px | 12px |
|
||||
| `.fs-3` | 12px | 14px |
|
||||
| `.fs-4` | 14px | 16px |
|
||||
| `.fs-5` | 16px | 18px |
|
||||
| `.fs-6` | 18px | 24px |
|
||||
| `.fs-7` | 24px | 32px |
|
||||
| `.fs-8` | 32px | 38px |
|
||||
| `.fs-9` | 38px | 42px |
|
||||
| `.fs-10`| 42px | 48px |
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Font size 1
|
||||
{: .fs-1 }
|
||||
Font size 2
|
||||
{: .fs-2 }
|
||||
Font size 3
|
||||
{: .fs-3 }
|
||||
Font size 4
|
||||
{: .fs-4 }
|
||||
Font size 5
|
||||
{: .fs-5 }
|
||||
Font size 6
|
||||
{: .fs-6 }
|
||||
Font size 7
|
||||
{: .fs-7 }
|
||||
Font size 8
|
||||
{: .fs-8 }
|
||||
Font size 9
|
||||
{: .fs-9 }
|
||||
Font size 10
|
||||
{: .fs-10 }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
Font size 1
|
||||
{: .fs-1 }
|
||||
Font size 2
|
||||
{: .fs-2 }
|
||||
Font size 3
|
||||
{: .fs-3 }
|
||||
Font size 4
|
||||
{: .fs-4 }
|
||||
Font size 5
|
||||
{: .fs-5 }
|
||||
Font size 6
|
||||
{: .fs-6 }
|
||||
Font size 7
|
||||
{: .fs-7 }
|
||||
Font size 8
|
||||
{: .fs-8 }
|
||||
Font size 9
|
||||
{: .fs-9 }
|
||||
Font size 10
|
||||
{: .fs-10 }
|
||||
```
|
||||
|
||||
## Font weight
|
||||
|
||||
Use the `.fw-300` - `.fw-700` to set an explicit font-size.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Font weight 300
|
||||
{: .fw-300 }
|
||||
Font weight 400
|
||||
{: .fw-400 }
|
||||
Font weight 500
|
||||
{: .fw-500 }
|
||||
Font weight 700
|
||||
{: .fw-700 }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
Font weight 300
|
||||
{: .fw-300 }
|
||||
Font weight 400
|
||||
{: .fw-400 }
|
||||
Font weight 500
|
||||
{: .fw-500 }
|
||||
Font weight 700
|
||||
{: .fw-700 }
|
||||
```
|
||||
|
||||
## Line height
|
||||
|
||||
Use the `lh-` classes to explicitly apply line height to text.
|
||||
|
||||
| Class | `line-height` value | Notes |
|
||||
|:--------------|:---------------------|:------------------------------|
|
||||
| `.lh-0` | 0 | |
|
||||
| `.lh-tight` | 1.1 | Default for headings |
|
||||
| `.lh-default` | 1.4 | Default for body (paragraphs) |
|
||||
|
||||
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
No Line height
|
||||
No Line height
|
||||
{: .lh-0 }
|
||||
|
||||
Tight line height
|
||||
Tight line height
|
||||
{: .lh-tight }
|
||||
|
||||
Default line height
|
||||
Default line height
|
||||
{: .fh-default }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
No Line height
|
||||
No Line height
|
||||
{: .lh-0 }
|
||||
|
||||
Tight line height
|
||||
Tight line height
|
||||
{: .lh-tight }
|
||||
|
||||
Default line height
|
||||
Default line height
|
||||
{: .fh-default }
|
||||
```
|
||||
14
docs/utilities/utilities.md
Normal file
14
docs/utilities/utilities.md
Normal file
@@ -0,0 +1,14 @@
|
||||
---
|
||||
layout: default
|
||||
title: Utilities
|
||||
nav_order: 3
|
||||
parent: Utilities
|
||||
has_children: true
|
||||
permalink: /utilities
|
||||
---
|
||||
|
||||
# Utilities
|
||||
{:.no_toc}
|
||||
|
||||
CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size.
|
||||
{: .fs-6 .fw-300 }
|
||||
Reference in New Issue
Block a user