Customization

Override settings at import time to tailor the library to your project. Use the Sass source directly via @use with a configuration map.

Using Sass source

Instead of importing the compiled CSS, import the Sass entry point. Pass any settings you want to override with the with keyword.

@use 'ln/scss' with (
  $prefix: 'my-',
  $font-ui: 'Geist', system-ui, sans-serif,
  $breakpoints: (
    sm: 30rem,
    md: 48rem,
    lg: 64rem,
    xl: 80rem,
    '2xl': 100rem,
  )
);

Class prefix

The $prefix variable controls the namespace for BEM block classes. The default is ln-. Changing it renames every block class — for example, .ln-button becomes .my-button.

@use 'ln/scss' with (
  $prefix: 'my-'
);

// .my-button, .my-card, .my-grid, etc.

Font stacks

Three font-role variables control the entire type system. Override one or all to use your own typefaces.

@use 'ln/scss' with (
  $font-prose: 'Lora', Georgia, serif,
  $font-ui: 'Inter', system-ui, sans-serif,
  $font-mono: 'JetBrains Mono', monospace
);

Vertical rhythm

Two variables define the spatial grid. All spacing tokens and components derive from these values.

@use 'ln/scss' with (
  $g: 4px,   // base grid step (default 8px)
  $r: 16px   // line grid step (default 24px)
);

Breakpoints

Override the breakpoint map to change where responsive modifiers activate. Custom breakpoint names become available as @{bp} suffixes throughout the system.

@use 'ln/scss' with (
  $breakpoints: (
    sm:  30rem,
    md:  48rem,
    lg:  62rem,
    xl:  80rem,
    '2xl': 100rem,
  )
);

Layout

Adjust container widths, the prose measure, and the page gutter.

@use 'ln/scss' with (
  $container: 60rem,       // default 56.25rem (900px)
  $container-wide: 80rem,  // default 75rem (1200px)
  $measure: 40rem,         // default 37.5rem (~70ch)
  $gutter: 1.5rem,         // default 1rem (mobile)
  $gutter-lg: 3rem         // default 2rem (md+)
);

Selecting blocks

By default every block is included in the output. To reduce file size, pass a list of only the blocks you need.

@use 'ln/scss' with (
  $blocks: (button, card, table, alert)
);

An empty list (the default) emits all blocks. Any block not in the list is excluded from the compiled CSS.

Reference