@ribaldry/ui-styles

Framework-agnostic BEM CSS for ribaldry UI components. Drop it into any project — Astro, React, Vue, plain HTML — no Angular required.

For Angular projects, use @ribaldry/personal-ui instead, which includes typed Angular components on top of these same styles.

Installation

npm install @ribaldry/ui-styles

Usage

Import the stylesheet once:

<!-- HTML -->
<link rel="stylesheet" href="node_modules/@ribaldry/ui-styles/styles.css" />

/* CSS / Astro / SCSS */
@import '@ribaldry/ui-styles/styles.css';

Then use the BEM classes directly in your markup:

<!-- Button -->
<button class="sf-btn sf-btn-primary">Save</button>
<button class="sf-btn sf-btn-secondary">Cancel</button>
<button class="sf-btn sf-btn-ghost">Learn more</button>

<!-- Standard card -->
<div class="sf-card">
  <div class="sf-card__inner">
    <img src="..." alt="..." class="sf-card__image" />
    <div class="sf-card__body">
      <h2 class="sf-card__category">
        <a href="/projects" class="sf-card__category-link">projects</a>
      </h2>
      <a href="/projects/my-project" class="sf-card__title-link">
        <h1 class="sf-card__title">My Project</h1>
      </a>
      <p class="sf-card__excerpt">A short description.</p>
      <p class="sf-card__meta">
        <time class="sf-card__date" datetime="2025-01-04">Jan 4, 2025</time>
      </p>
    </div>
  </div>
</div>

<!-- Hero card -->
<section class="sf-card-hero">
  <div class="sf-card-hero__inner">
    <div class="sf-card-hero__media-wrapper">
      <img src="..." alt="..." class="sf-card-hero__image" />
      <div class="sf-card-hero__body">
        <h2 class="sf-card-hero__category">
          <a href="/short" class="sf-card-hero__category-link">short</a>
        </h2>
        <a href="/short-story/whale-song" class="sf-card-hero__title-link">
          <h1 class="sf-card-hero__title">Whale Song</h1>
        </a>
        <p class="sf-card-hero__excerpt">The first installment...</p>
        <p class="sf-card-hero__meta">
          <time class="sf-card-hero__date" datetime="2026-05-06">May 6, 2026</time>
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Compact card -->
<div class="sf-card-compact">
  <div class="sf-card-compact__inner">
    <div class="sf-card-compact__media">
      <img src="..." alt="..." class="sf-card-compact__image" />
    </div>
    <div class="sf-card-compact__body">
      <h2 class="sf-card-compact__category">
        <a href="/editorials" class="sf-card-compact__category-link">editorials</a>
      </h2>
      <a href="/editorials/chaos-monkeys" class="sf-card-compact__title-link">
        <h2 class="sf-card-compact__title">Chaos Monkeys</h2>
      </a>
      <p class="sf-card-compact__excerpt">A book about Silicon Valley tech.</p>
      <p class="sf-card-compact__meta">
        <time class="sf-card-compact__date" datetime="2023-09-19">Sep 19, 2023</time>
      </p>
    </div>
  </div>
</div>

<!-- Carousel (horizontally scrolling container) -->
<section class="sf-carousel">
  <div class="sf-carousel__card">
    <a href="/cocktails/julep/">
      <img src="..." alt="..." class="sf-carousel__card-image" />
      <div class="sf-carousel__card-body">
        <h2 class="sf-carousel__card-title">J is for Julep</h2>
      </div>
    </a>
  </div>
</section>

<!-- Site header -->
<header class="sf-header">
  <a href="/" class="sf-header__logo">
    <img src="/logo.png" alt="Logo" class="sf-header__logo-image" width="32" height="32" />
    <span class="sf-header__logo-text">My Site</span>
  </a>
  <nav class="sf-header__nav">
    <a href="/code/" class="sf-header__nav-link">
      <span class="sf-header__nav-link-text">Code</span>
    </a>
    <a href="/projects/" class="sf-header__nav-link">
      <span class="sf-header__nav-link-text">Projects</span>
    </a>
  </nav>
  <span class="sf-header__social">
    <a href="https://github.com/you" class="sf-header__social-link sf-header__social-link--github" title="github">
      <!-- github svg -->
    </a>
    <a href="https://linkedin.com/in/you" class="sf-header__social-link sf-header__social-link--linkedin" title="linkedin">
      <!-- linkedin svg -->
    </a>
  </span>
</header>

<!-- Site footer -->
<footer class="sf-footer">
  <div class="sf-footer__inner">
    <p class="sf-footer__brand">
      <a href="/" class="sf-footer__brand-link">
        <img src="/logo.png" alt="Logo" class="sf-footer__brand-image" width="16" height="16" />
        ©2026
      </a>
    </p>
    <div class="sf-footer__nav">
      <a href="/about/" class="sf-footer__nav-link">About</a>
      <a href="/contact/" class="sf-footer__nav-link">Contact</a>
    </div>
    <span class="sf-footer__social">
      <a href="https://github.com/you" class="sf-footer__social-link sf-footer__social-link--github" title="github"><!-- svg --></a>
      <a href="https://twitter.com/you" class="sf-footer__social-link sf-footer__social-link--twitter" title="twitter"><!-- svg --></a>
      <a href="https://linkedin.com/in/you" class="sf-footer__social-link sf-footer__social-link--linkedin" title="linkedin"><!-- svg --></a>
      <a href="/rss.xml" class="sf-footer__social-link sf-footer__social-link--rss" title="rss feed"><!-- svg --></a>
    </span>
  </div>
</footer>

BEM reference

| Block | Elements | Modifiers | |---|---|---| | sf-btn | — | sf-btn-primary, sf-btn-secondary, sf-btn-ghost | | sf-card | __inner, __image, __body, __category, __category-link, __title-link, __title, __excerpt, __meta, __date | — | | sf-card-hero | __inner, __media-wrapper, __image, __body, __category, __category-link, __title-link, __title, __excerpt, __meta, __date | — | | sf-card-compact | __inner, __media, __image, __body, __category, __category-link, __title-link, __title, __excerpt, __meta, __date | — | | sf-carousel | __card, __card-image, __card-body, __card-title | — | | sf-header | __logo, __logo-image, __logo-text, __nav, __nav-link, __nav-link-text, __social, __social-link, __social-icon | __social-link--github, __social-link--linkedin | | sf-footer | __inner, __brand, __brand-link, __brand-image, __nav, __nav-link, __social, __social-link, __social-icon | __social-link--github, __social-link--twitter, __social-link--linkedin, __social-link--rss |

Design tokens

The wedgewood colour palette is available as CSS custom properties after importing the stylesheet:

var(--color-wedgewood-50)   /* #f2f9f9 */
var(--color-wedgewood-400)  /* #5faab1 */
var(--color-wedgewood-700)  /* #356169 */
/* ...50 through 950 */