mirror of
https://github.com/thangisme/notes.git
synced 2024-11-17 03:06:09 -05:00
115 lines
3.5 KiB
Markdown
115 lines
3.5 KiB
Markdown
|
---
|
||
|
|
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 }
|
||
|
|
|
||
|
|
```
|