Stylament 0.23.2

Generic CSS

These rules have very general selectors and hence apply to many elements. Together with custom properties they form the foundation of the design system.

The BasiCSS

Basic Box Reset

scss 
* {
  margin: unset;
  padding: unset;
  border: unset;
}

Remove UA style margins, paddings, and borders. These basic box properties need to be redefined in any design system anyways.

Rationale

Related

Browser styles for reference [external]

Convenient Box Sizing

scss 
*,
*::before,
*::after {
  box-sizing: border-box;
}

Set Box sizing default to border-box.

Target Scroll Spacing

scss 
:target {
  // Give URL fragment target enough air.
  scroll-margin-block-start: svar(length-3);
}

The current target element.

Abstract Coloring

scss 
* {
  ---clr-fg: var(---clr-pos);
  ---clr-bg: var(---clr-neg);
}

Set abstract colors.

Related

@mixin set-colors()

@mixin use-colors()

Coloring Mixins

@mixin set-colors()

Set abstract color properties to the color specified by $name and its counterpart (-contra).

Parameters

$name: (String)

Name of the color token.

$default: null (String)

Name of the fall-back color token.

Requires

@function svar()

$default (Map)

@mixin use-colors()

Use abstract color properties as color and background-color, respectively.

@mixin use-colors-inverse()

Use abstract color properties as background-color and color (inverse of use-colors), respectively.

Embedding

Default Embedding Boxes

scss 
:is(img, picture, video, audio, embed, iframe, object, svg, canvas) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;

  // Pictures in phrasing containers shall act like character boxes.
  :is(h1, h2, h3, h4, h5, h6, p) & {
    display: inline;
    max-block-size: 1em;
  }
}

Full-width Boxes

scss 
audio,
iframe:not([width]) {
  inline-size: 100%;
}

Flow Spacing

Use common block margin to establish consistency in flow layout and to support a baseline grid.

Related

Recap of “The Stack” [external]

Flow Space Definition for General Blocks

scss 
:is(#{el.$blocks}, div) {
  ---flow-space: #{svar(spacing-flow-default)};
}

Flow Space Definition for Sections

scss 
:is(#{el.$sections}) {
  ---flow-space: #{svar(spacing-flow-sectioning)};
}

Flow Space Definition for Headings

scss 
:is(#{el.$headings}) {
  ---flow-space: #{svar(spacing-flow-heading, svar(spacing-flow-default))};
}

Flow Space Definition for List Items and Nested Lists

scss 
li,
li :is(#{el.$lists}) {
  ---flow-space: #{svar(spacing-flow-list, svar(spacing-flow-default))};
}

Flow Space Definition for Definition Terms

scss 
dt {
  ---flow-space: #{svar(
      spacing-flow-defterm,
      svar(spacing-flow-deflist, svar(spacing-flow-default))
    )};
}

Flow Space Definition for Definition Data

scss 
dd {
  ---flow-space: #{svar(
      spacing-flow-defdata,
      svar(spacing-flow-deflist, svar(spacing-flow-default))
    )};
}

Flow Space Applied Before General Blocks

scss 
* + :is(#{el.$blocks}),
:is(#{el.$blocks}) + div {
  margin-block-start: var(---flow-space, 1em);
}

Flow Space Applied Around Sections

scss 
:is(#{el.$sections}) {
  :where(&:not(:first-child)) {
    margin-block-start: var(---flow-space);
  }
  :where(&:not(:last-child)) {
    margin-block-end: var(---flow-space);
  }
}

Indentation

List Root Indentation

scss 
:is(ol, ul, menu) {
  ---indent-root: #{svar(spacing-indent-list-root, 0)};
  ---indent: #{svar(spacing-indent-list, svar(spacing-indent-list-root, svar(spacing-indent-default)))};
  padding-inline-start: var(---indent-root);
}

Indent list roots, i. e. top-level lists.

Custom properties:

  • ---indent-root {Number}: Indentation of the top level. If this is 0, the bullet points become hanging punctuation.
  • ---indent {Number}: Indentation of nested levels.

Nested Lists Indentation

scss 
li :is(ol, ul, menu) {
  ---indent: inherit;
  padding-inline-start: var(---indent);
}

Indent nested lists. Inheritance allows to customize the indentation of the whole ilst consistently by only changing the ---indent property of the root list node.

Definition Details Indentation

scss 
dd {
  ---indent: #{svar(spacing-indent-deflist, svar(spacing-indent-default))};
  margin-inline-start: var(---indent);
}

Indent definition details.

Block Quotations Indentation

scss 
blockquote {
  ---indent: #{svar(spacing-indent-quotation, svar(spacing-indent-default))};
  margin-inline: var(---indent);
}

Indent quotation blocks symmetrically.

Figures Indentation

scss 
figure {
  ---indent: #{svar(spacing-indent-figure, svar(spacing-indent-default))};
  margin-inline: var(---indent);
}

Indent figures symmetrically.

Generic Typography

Root Line Height and Font Size

scss 
html {
  font-size: svar(font-size-root, 1rem);
  line-height: svar(line-root);
}

The font size and line height of the root element.

Body Copy

scss 
body {
  font-family: svar(font-family-body);
  font-weight: svar(font-weight-body);
  font-size: svar(font-size-0);
  line-height: svar(line-0);
}

Fonts for body copy.

Headings

scss 
:is(h1, h2, h3, h4, h5, h6) {
  font-family: svar(font-family-heading);
  font-weight: svar(font-weight-heading);
}

Fonts for headings.

h#{$level}

scss 
h#{$level} {
  font-size: svar(font-size-#{4 - $level});
    line-height: svar(line-#{4 - $level});
}

Apply respective font-size and line-height to each heading level.

General Measure

scss 
:is(h1, h2, h3, h4, h5, h6),
:is(p, address, summary, figcaption, caption) {
  max-inline-size: var(---measure, svar(measure-default));
}

Establish a generic measure.

Monospaced

scss 
:is(code, kbd, samp),
pre {
  font-family: svar(font-family-mono);
}

Generic typography for monospaced elements.

Smaller

scss 
:is(small, sub, sup) {
  font-size: svar(font-size-smaller);
}

Set scale-based font size.

Base Line Fix

scss 
:is(code, kbd, samp),
:is(small, sub, sup),
::marker {
  line-height: 0;
}

Prevent certain inline (pseudo) elements from affecting the line height.