@skirbi/dibuho

@skirbi/dibuho defines how things are put together.

It is the composition layer of Skirbi. Prebuilt UI patterns built from semtic and styled by pinta. Dibuho doesn’t introduce new primitives, it builds upon primitives provided by semtic. It then composes them in usable UI patterns.

When to use it

• You need a button → use semtic
• You need spacing → use pinta
• You need a full page section → use dibuho

What it ships

Currently: nothing, planned:

• dibuho-header — site header with navigation
• dibuho-topbar — top navigation bar
• dibuho-hero — hero/banner section
• dibuho-article — full article layout
• dibuho-related — related content block

Dibuho is unstable at the moment and subject to change. The patterns and UI components are being developed by using it in several projects with different needs to different concepts are being explored.

Examples

Site header with navigation:

<dibuho-header>
  <semtic-nav>
    <semtic-nav-item href="/">Home</semtic-nav-item>
    <semtic-nav-item href="/docs">Docs</semtic-nav-item>
  </semtic-nav>
</dibuho-header>

Article layout:

<dibuho-article>
  <semtic-article title="Hello world">
    <p>Content…</p>
  </semtic-article>
</dibuho-article>

Theming

Dibuho does not ship styling. It relies entirely on @skirbi/pinta. It does add a new layer to the CSS: dibuho-components. This is where you can override the defaults if needed.
Components that dibuho provides are expected to have the following API: dibuho-type-thing-target. Meaning a dibuho-header component looks a bit like this:

@layer dibuho-components {
  [semtic-theme] dibuho-header {
    color: var(--dibuho-header-color-fg, var(--semtic-sane-default-here));
    background: var(--dibuho-header-color-bg, var(--semtic-sane-default-here));
  }
}

Which means you can override them on your theme or component level:

--dibuho-header-color-fg: var(--my-header-fg-color);
--dibuho-header-color-bg: var(--my-header-bg-color);

Philosophy

If something feels like it belongs in dibuho, it probably doesn’t — until it does. Which means you’ve written it three times. The fourth is when you start adding it to dibuho.