Configuration

The settings: base font size, default grid, element separator. Set them with @use ... with (...).

6 documented in src/config.scss.

$default-font-size

Default font size

The base of px-to-rem() and of the base font size, so of the fluid sizes.

$default-line-height

Default line height

The line height of the text, a ratio without unit so that it follows the font size of every element: 22px on 16px is 1.375. The line heights of the headings are in $line-height, for the designer to set.

$reset

Reset

The component styles start with the base reset (bases/reset), as they need it. Set false to load your own, or none. It is also left out when the styles are limited to an element with $scope: a reset of the page does not belong inside an element.

@use "@zairakai/mithril-scss/components" with ($reset: false);

$default-grid-columns

Default grid

The number of columns when grid-columns() is not given one. A 12-column grid is common.

$element-separator

Element separator

What joins a block to its element in the component styles: .card + -header gives .card-header. Set '__' to get .card__header; the markup is then yours to name the same way.

@use "@zairakai/mithril-scss/components" with ($element-separator: "__");

$overrides

Overrides

The keys to change in the token maps, without restating the others. One entry per map, named like the variable: spacings, colors, theme, shape-radius, breakpoints... The maps are merged deeply, so colors: (red: (base: #c00)) changes one shade only. To replace a whole map, set the variable itself instead ($spacings: (...)).

@use "@zairakai/mithril-scss" with (
  $overrides: (
    spacings: (sm: 12px, md: 20px),
    shape-radius: (lg: 12px)
  )
);