@wentools/css-base

Fluid spacing, fluid typography, automatic content spacing, and a modern CSS reset. Configurable through CSS custom properties.

Install

npm install @wentools/css-base

Usage

Full import

@import '@wentools/css-base';

Cherry-pick modules

@import '@wentools/css-base/reset.css';
@import '@wentools/css-base/spacing.css';
@import '@wentools/css-base/typography.css';
@import '@wentools/css-base/spaced-content.css';

Modules

Reset (reset.css)

Modern CSS reset. Removes default margins, normalizes form elements, makes media responsive, resets lists and tables.

Strips link styling (color: inherit, no decoration) and button styling (no background, no border). Does NOT remove outline — that is a project-level concern.

Spacing (spacing.css)

Fluid space scale. Static values define the scale anchors; fluid calculations grow with viewport width.

Tokens: --space-2xs · --space-xs · --space-s · --space-m · --space-l · --space-xl · --space-2xl

Override by setting --space-static-* variables:

:root {
  --space-static-s: 1.5rem; /* tighter scale */
}

Typography (typography.css)

Fluid typography engine with class-based sizing.

Classes: heading-2xl · heading-xl · heading-l · heading-m · heading-s · body-l · body-m · body-s · body-xs · action-l · action-m · action-s · accent-l · accent-m · code-l · code-m · code-s · code-xs · overline-m · overline-s · list-m · info-m

Computed utility variables (available on any typography class):

• --icon-size — equals font size, so icons scale with text
• --font-weight-thinner / --font-weight-thicker — relative weight adjustments (±100)
• --font-weight-thinner-x2 / --font-weight-thicker-x2 — larger adjustments (±200)

Spaced Content (spaced-content.css)

Opt-in automatic spacing. Add class="spaced-content" to a container and child elements get contextual spacing based on their type relationships.

<section class="spaced-content">
  <h2 class="heading-l">Title</h2>
  <p class="body-m">Paragraph gets tight spacing after heading.</p>
  <p class="body-m">Consecutive paragraphs flow together.</p>
  <ul class="list-m">
    <li>Lists get appropriate spacing too</li>
  </ul>
</section>

Configuration

Font families

:root {
  --font-primary: 'My Font', sans-serif;
  --font-heading: 'My Heading Font', sans-serif;
  --font-accent: 'My Accent Font', cursive;
  --font-code: 'My Code Font', monospace;
}

Font weights

:root {
  --font-weight-900: 900;
  --font-weight-700: 700;
  --font-weight-500: 500;
  --font-weight-400: 400;
  --font-weight-350: 350;
  --font-weight-280: 280;
  --font-weight-270: 270;
}

Semantic aliases are also provided: --font-weight-bold, --font-weight-medium, --font-weight-regular, --font-weight-light.

Fluid typography tuning

:root {
  --fluid-size-divisor: 0.75;      /* Viewport scaling sensitivity */
  --relative-size-divisor: 2;      /* Base size contribution */
  --max-size-multiplier: 1.45;     /* Max size upper bound */
}

Letter and word spacing

:root {
  --letter-spacing-base: 0.01em;
  --word-spacing-base: 0.05em;
}

Module dependencies

• reset.css — standalone
• spacing.css — standalone
• typography.css — standalone
• spaced-content.css — requires spacing.css + typography.css class names

CSS Layers

The library uses @layer for clean override specificity:

@layer wentools.reset, wentools.spacing, wentools.typography, wentools.spaced-content;

Un-layered CSS always wins over layered CSS, so your project styles override the library naturally.

License

MIT