Delete layout

2021-01-01 12:37:36 -06:00
parent 1f48af6ba5
commit ee9f46bc26
1 changed files with 0 additions and 127 deletions
@@ -1,127 +0,0 @@
---
-layout: default
-title: Layout
-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                |
-| `auto`         | auto          | auto                |
-
-Use `mx-auto` to horizontally center elements.
-
-#### Examples
-{: .no_toc }
-
-In Markdown, use the `{: }` wrapper to apply custom classes:
-
-```markdown
-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 }
-```
-
-## Horizontal Alignment
-
-| Classname               | What it does                     |
-|:------------------------|:---------------------------------|
-| `.float-left`           | `float: left`                    |
-| `.float-right`          | `float: right`                   |
-| `.flex-justify-start`   | `justify-content: flex-start`    |
-| `.flex-justify-end`     | `justify-content: flex-end`      |
-| `.flex-justify-between` | `justify-content: space-between` |
-| `.flex-justify-around`  | `justify-content: space-around`  |
-
-_Note: any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it._
-
-## 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 }
-
-In Markdown, use the `{: }` wrapper to apply custom classes:
-
-```markdown
-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 }
-```