// scss-docs-end utils-flex
// Margin utilities
// scss-docs-start utils-spacing
+ // scss-docs-start utils-margin
"margin": (
responsive: true,
property: margin,
class: ms,
values: map-merge-multiple($spacers, $negative-spacers, (auto: auto))
),
+ // scss-docs-end utils-margin
// Padding utilities
+ // scss-docs-start utils-padding
"padding": (
responsive: true,
property: padding,
class: ps,
values: $spacers
),
+ // scss-docs-end utils-padding
// Gap utility
+ // scss-docs-start utils-gap
"gap": (
responsive: true,
property: gap,
class: column-gap,
values: $spacers
),
+ // scss-docs-end utils-gap
// scss-docs-end utils-spacing
// scss-docs-start utils-space
"space-x": (
--- /dev/null
+---
+interface PropertyItem {
+ /**
+ * The class abbreviation, e.g. `p`, `m`, `gap`, `row-gap`.
+ */
+ class: string
+ /**
+ * The CSS property the class sets, e.g. `padding`, `margin`, `gap`.
+ */
+ property: string
+}
+
+interface SideItem {
+ /**
+ * The side abbreviation, e.g. `t`, `b`, `x`, `y`. Use `blank` to render the
+ * "blank" (all sides) entry without code formatting.
+ */
+ abbr: string
+ /**
+ * The trailing description rendered after the abbreviation. May contain HTML
+ * (e.g. `<code>` spans) and is injected as-is.
+ */
+ desc: string
+}
+
+interface Props {
+ /**
+ * The spacing noun used throughout the copy, e.g. `gap`, `padding`, `margin`.
+ */
+ noun: string
+ /**
+ * The class-name format, e.g. `{property}-{size}` or `{property}{sides}-{size}`.
+ */
+ format: string
+ /**
+ * The "Where *property* is" list entries.
+ */
+ properties: PropertyItem[]
+ /**
+ * The optional "Where *sides* is one of" list entries. Omit for utilities
+ * without sides (e.g. gap).
+ */
+ sides?: SideItem[]
+ /**
+ * Appends the `auto` entry to the size list (margin only).
+ * @default false
+ */
+ includeAuto?: boolean
+}
+
+const { noun, format, properties, sides, includeAuto = false } = Astro.props
+
+const capitalizedNoun = noun.charAt(0).toUpperCase() + noun.slice(1)
+
+// Multipliers for sizes `1` through `9`, mirroring the default `$spacers` map.
+const sizeValues = [
+ '$spacer * .25',
+ '$spacer * .5',
+ '$spacer * .75',
+ '$spacer',
+ '$spacer * 1.25',
+ '$spacer * 1.5',
+ '$spacer * 2',
+ '$spacer * 2.5',
+ '$spacer * 3'
+]
+---
+
+<p>
+ {capitalizedNoun} utilities that apply to all breakpoints, from <code>xs</code> to <code>2xl</code>, have no breakpoint
+ prefix in them. This is because those classes are applied from <code>min-width: 0</code> and up, and thus are not
+ bound by a media query. The remaining breakpoints, however, do include a breakpoint prefix.
+</p>
+
+<p>
+ The classes are named using the format <code>{format}</code> for <code>xs</code> and{' '}
+ <code>{`{breakpoint}:${format}`}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and{' '}
+ <code>2xl</code>.
+</p>
+
+<p>Where <em>property</em> {properties.length > 1 ? 'is one of' : 'is'}:</p>
+
+<ul>
+ {
+ properties.map((item) => (
+ <li>
+ <code>{item.class}</code> - for classes that set <code>{item.property}</code>
+ </li>
+ ))
+ }
+</ul>
+
+{
+ sides && (
+ <Fragment>
+ <p>
+ Where <em>sides</em> is one of:
+ </p>
+ <ul>
+ {sides.map((side) => (
+ <li>
+ {side.abbr === 'blank' ? 'blank' : <code>{side.abbr}</code>} - <Fragment set:html={side.desc} />
+ </li>
+ ))}
+ </ul>
+ </Fragment>
+ )
+}
+
+<p>Where <em>size</em> is one of:</p>
+
+<ul>
+ <li>
+ <code>0</code> - for classes that eliminate the <code>{noun}</code> by setting it to <code>0</code>
+ </li>
+ {
+ sizeValues.map((value, index) => (
+ <li>
+ <code>{index + 1}</code> - (by default) for classes that set the <code>{noun}</code> to <code>{value}</code>
+ </li>
+ ))
+ }
+ {
+ includeAuto && (
+ <li>
+ <code>auto</code> - for classes that set the <code>{noun}</code> to auto
+ </li>
+ )
+ }
+</ul>
+
+<p>(You can add more sizes by adding entries to the <code>$spacers</code> Sass map variable.)</p>
--- /dev/null
+---
+import { getData } from '@libs/data'
+
+interface Props {
+ /**
+ * The class abbreviations to document, one `<ul>` per entry. For example
+ * `['gap', 'row-gap', 'column-gap']` or `['p']`.
+ */
+ classes: string[]
+ /**
+ * Appends `and .{abbr}{class}-auto` to each entry (margin only).
+ * @default false
+ */
+ includeAuto?: boolean
+}
+
+const { classes, includeAuto = false } = Astro.props
+
+const breakpoints = getData('breakpoints')
+---
+
+{
+ classes.map((className) => (
+ <ul>
+ {breakpoints.map((breakpoint) => (
+ <li>
+ {/* prettier-ignore */}
+ <code>.{breakpoint.abbr}{className}-0</code> through <code>.{breakpoint.abbr}{className}-9</code>
+ {includeAuto && (
+ <Fragment> and <code>.{breakpoint.abbr}{className}-auto</code></Fragment>
+ )}
+ </li>
+ ))}
+ </ul>
+ ))
+}
- column-gap
---
-import { getData } from '@libs/data'
-
## Overview
Use gap utilities to control the space between children in flexbox and grid layouts. Gap utilities are built from a default Sass map ranging from `0` to `3rem` (`.gap-0` through `.gap-9`). Use utilities like `.gap-3` and `.gap-5` to control the gap between all children:
## Notation
-Gap utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
-
-The classes are named using the format `{property}-{size}` for `xs` and `{breakpoint}:{property}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
-
-Where *property* is one of:
-
-- `gap` - for classes that set `gap`
-- `row-gap` - for classes that set `row-gap`
-- `column-gap` - for classes that set `column-gap`
-
-Where *size* is one of:
-
-- `0` - for classes that eliminate the `gap` by setting it to `0`
-- `1` - (by default) for classes that set the `gap` to `$spacer * .25`
-- `2` - (by default) for classes that set the `gap` to `$spacer * .5`
-- `3` - (by default) for classes that set the `gap` to `$spacer * .75`
-- `4` - (by default) for classes that set the `gap` to `$spacer`
-- `5` - (by default) for classes that set the `gap` to `$spacer * 1.25`
-- `6` - (by default) for classes that set the `gap` to `$spacer * 1.5`
-- `7` - (by default) for classes that set the `gap` to `$spacer * 2`
-- `8` - (by default) for classes that set the `gap` to `$spacer * 2.5`
-- `9` - (by default) for classes that set the `gap` to `$spacer * 3`
-
-(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
+<SpacingNotation
+ noun="gap"
+ format="{property}-{size}"
+ properties={[
+ { class: 'gap', property: 'gap' },
+ { class: 'row-gap', property: 'row-gap' },
+ { class: 'column-gap', property: 'column-gap' }
+ ]}
+/>
## Examples
All gap utilities are responsive and include all breakpoints.
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <li><code>.{breakpoint.abbr}gap-0</code> through <code>.{breakpoint.abbr}gap-9</code></li>
- )
-})}
-</ul>
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <li><code>.{breakpoint.abbr}row-gap-0</code> through <code>.{breakpoint.abbr}row-gap-9</code></li>
- )
-})}
-</ul>
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <li><code>.{breakpoint.abbr}column-gap-0</code> through <code>.{breakpoint.abbr}column-gap-9</code></li>
- )
-})}
-</ul>
+<SpacingResponsive classes={['gap', 'row-gap', 'column-gap']} />
## CSS
Gap utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
-```scss
-"gap": (
- responsive: true,
- property: gap,
- class: gap,
- values: $spacers
-),
-"row-gap": (
- responsive: true,
- property: row-gap,
- class: row-gap,
- values: $spacers
-),
-"column-gap": (
- responsive: true,
- property: column-gap,
- class: column-gap,
- values: $spacers
-),
-```
+<ScssDocs name="utils-gap" file="scss/_utilities.scss" />
- margin-start
---
-import { getData } from '@libs/data'
-
## Overview
Use margin utilities to control the outer space around elements. Margin utilities are built from a default Sass map ranging from `0` to `3rem` (`.m-0` through `.m-9`). Use utilities like `.m-3` and `.m-5` to control the margin on all sides of an element:
```
<Callout>
-**Using the CSS Grid layout module?** Consider using [the gap utility]([[docsref:/utilities/gap]]) instead.
+**Using flexbox or CSS Grid?** Consider using [the gap utility]([[docsref:/utilities/gap]]) instead.
</Callout>
## Notation
-Margin utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
-
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{breakpoint}:{property}{sides}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
-
-Where *property* is:
-
-- `m` - for classes that set `margin`
-
-Where *sides* is one of:
-
-- `t` - for classes that set `margin-top`
-- `b` - for classes that set `margin-bottom`
-- `s` - (start) for classes that set `margin-left` in LTR, `margin-right` in RTL
-- `e` - (end) for classes that set `margin-right` in LTR, `margin-left` in RTL
-- `x` - for classes that set both `*-left` and `*-right`
-- `y` - for classes that set both `*-top` and `*-bottom`
-- blank - for classes that set a `margin` on all 4 sides of the element
-
-Where *size* is one of:
-
-- `0` - for classes that eliminate the `margin` by setting it to `0`
-- `1` - (by default) for classes that set the `margin` to `$spacer * .25`
-- `2` - (by default) for classes that set the `margin` to `$spacer * .5`
-- `3` - (by default) for classes that set the `margin` to `$spacer * .75`
-- `4` - (by default) for classes that set the `margin` to `$spacer`
-- `5` - (by default) for classes that set the `margin` to `$spacer * 1.25`
-- `6` - (by default) for classes that set the `margin` to `$spacer * 1.5`
-- `7` - (by default) for classes that set the `margin` to `$spacer * 2`
-- `8` - (by default) for classes that set the `margin` to `$spacer * 2.5`
-- `9` - (by default) for classes that set the `margin` to `$spacer * 3`
-- `auto` - for classes that set the `margin` to auto
-
-(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
+<SpacingNotation
+ noun="margin"
+ format="{property}{sides}-{size}"
+ properties={[{ class: 'm', property: 'margin' }]}
+ includeAuto
+ sides={[
+ { abbr: 't', desc: 'for classes that set <code>margin-top</code>' },
+ { abbr: 'b', desc: 'for classes that set <code>margin-bottom</code>' },
+ { abbr: 's', desc: '(start) for classes that set <code>margin-left</code> in LTR, <code>margin-right</code> in RTL' },
+ { abbr: 'e', desc: '(end) for classes that set <code>margin-right</code> in LTR, <code>margin-left</code> in RTL' },
+ { abbr: 'x', desc: 'for classes that set both <code>*-left</code> and <code>*-right</code>' },
+ { abbr: 'y', desc: 'for classes that set both <code>*-top</code> and <code>*-bottom</code>' },
+ { abbr: 'blank', desc: 'for classes that set a <code>margin</code> on all 4 sides of the element' }
+ ]}
+/>
## Examples
All margin utilities are responsive and include all breakpoints.
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <li><code>.{breakpoint.abbr}m-0</code> through <code>.{breakpoint.abbr}m-9</code> and <code>.{breakpoint.abbr}m-auto</code></li>
- )
-})}
-</ul>
+<SpacingResponsive classes={['m']} includeAuto />
## CSS
Margin utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
-```scss
-"margin": (
- responsive: true,
- property: margin,
- class: m,
- values: map.merge($spacers, (auto: auto))
-),
-"margin-x": (
- responsive: true,
- property: margin-right margin-left,
- class: mx,
- values: map.merge($spacers, (auto: auto))
-),
-"margin-y": (
- responsive: true,
- property: margin-top margin-bottom,
- class: my,
- values: map.merge($spacers, (auto: auto))
-),
-"margin-top": (
- responsive: true,
- property: margin-top,
- class: mt,
- values: map.merge($spacers, (auto: auto))
-),
-"margin-end": (
- responsive: true,
- property: margin-right,
- class: me,
- values: map.merge($spacers, (auto: auto))
-),
-"margin-bottom": (
- responsive: true,
- property: margin-bottom,
- class: mb,
- values: map.merge($spacers, (auto: auto))
-),
-"margin-start": (
- responsive: true,
- property: margin-left,
- class: ms,
- values: map.merge($spacers, (auto: auto))
-),
-```
+<ScssDocs name="utils-margin" file="scss/_utilities.scss" />
- padding-start
---
-import { getData } from '@libs/data'
-
## Overview
Use padding utilities to control the inner space within elements. Padding utilities are built from a default Sass map ranging from `0` to `3rem` (`.p-0` through `.p-9`). Use utilities like `.p-3` and `.p-5` to control the padding on all sides of an element:
## Notation
-Padding utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
-
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{breakpoint}:{property}{sides}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
-
-Where *property* is:
-
-- `p` - for classes that set `padding`
-
-Where *sides* is one of:
-
-- `t` - for classes that set `padding-block-start`
-- `b` - for classes that set `padding-block-end`
-- `s` - (start) for classes that set `padding-inline-start`
-- `e` - (end) for classes that set `padding-inline-end`
-- `x` - for classes that set `padding-inline`
-- `y` - for classes that set `padding-block`
-- blank - for classes that set a `padding` on all 4 sides of the element
-
-Where *size* is one of:
-
-- `0` - for classes that eliminate the `padding` by setting it to `0`
-- `1` - (by default) for classes that set the `padding` to `$spacer * .25`
-- `2` - (by default) for classes that set the `padding` to `$spacer * .5`
-- `3` - (by default) for classes that set the `padding` to `$spacer * .75`
-- `4` - (by default) for classes that set the `padding` to `$spacer`
-- `5` - (by default) for classes that set the `padding` to `$spacer * 1.25`
-- `6` - (by default) for classes that set the `padding` to `$spacer * 1.5`
-- `7` - (by default) for classes that set the `padding` to `$spacer * 2`
-- `8` - (by default) for classes that set the `padding` to `$spacer * 2.5`
-- `9` - (by default) for classes that set the `padding` to `$spacer * 3`
-
-(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
+<SpacingNotation
+ noun="padding"
+ format="{property}{sides}-{size}"
+ properties={[{ class: 'p', property: 'padding' }]}
+ sides={[
+ { abbr: 't', desc: 'for classes that set <code>padding-block-start</code>' },
+ { abbr: 'b', desc: 'for classes that set <code>padding-block-end</code>' },
+ { abbr: 's', desc: '(start) for classes that set <code>padding-inline-start</code>' },
+ { abbr: 'e', desc: '(end) for classes that set <code>padding-inline-end</code>' },
+ { abbr: 'x', desc: 'for classes that set <code>padding-inline</code>' },
+ { abbr: 'y', desc: 'for classes that set <code>padding-block</code>' },
+ { abbr: 'blank', desc: 'for classes that set a <code>padding</code> on all 4 sides of the element' }
+ ]}
+/>
## Examples
All padding utilities are responsive and include all breakpoints.
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <li><code>.{breakpoint.abbr}p-0</code> through <code>.{breakpoint.abbr}p-9</code></li>
- )
-})}
-</ul>
+<SpacingResponsive classes={['p']} />
## CSS
Padding utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
-```scss
-"padding": (
- responsive: true,
- property: padding,
- class: p,
- values: $spacers
-),
-"padding-x": (
- responsive: true,
- property: padding-inline,
- class: px,
- values: $spacers
-),
-"padding-y": (
- responsive: true,
- property: padding-block,
- class: py,
- values: $spacers
-),
-"padding-top": (
- responsive: true,
- property: padding-block-start,
- class: pt,
- values: $spacers
-),
-"padding-end": (
- responsive: true,
- property: padding-inline-end,
- class: pe,
- values: $spacers
-),
-"padding-bottom": (
- responsive: true,
- property: padding-block-end,
- class: pb,
- values: $spacers
-),
-"padding-start": (
- responsive: true,
- property: padding-inline-start,
- class: ps,
- values: $spacers
-),
-```
+<ScssDocs name="utils-padding" file="scss/_utilities.scss" />
export const Placeholder: typeof import('@shortcodes/Placeholder.astro').default
export const ResizableExample: typeof import('@shortcodes/ResizableExample.astro').default
export const ScssDocs: typeof import('@shortcodes/ScssDocs.astro').default
+ export const SpacingNotation: typeof import('@shortcodes/SpacingNotation.astro').default
+ export const SpacingResponsive: typeof import('@shortcodes/SpacingResponsive.astro').default
export const Swatch: typeof import('@shortcodes/Swatch.astro').default
export const Table: typeof import('@shortcodes/Table.astro').default
}
projects / thirdparty / bootstrap.git / commitdiff
