Stylament 0.28.3

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()

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 vertical rhythm.

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, svar(line-default));
}

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);
  // Only use baseline-grid-supporting line heights if rlh is defined.
  @if $-rlh {
    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-#{$-rh - $level});
    // Only use baseline-grid-supporting line heights if rlh is defined.
    @if $-rlh {
      line-height: svar(line-#{$-rh - $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.

Related

Every Layout: Measure [external]

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.

:is(code, kbd, samp), :is(small, sub, sup), ::marker

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

Prevent certain inline (pseudo) elements from affecting the line height. @name Base Line Fix

Wrap Spacing

In wrap layout spacing has two dimensions combined: flow space and inline space. These combined spacing properties are defined in the global configuration.

Default Wrap Space Definition

scss 
* {
  ---wrap-space: #{svar(spacing-wrap-default)};
}

Wrap Space Definition for Sections

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