NibCSS

Introduction

NibCSS turns short `nib="…"` attributes into a real, deterministic stylesheet — in plain HTML and in every major framework.

2 min readv1

Write CSS as HTML attributes

One attribute, real CSS. No class names to invent, no stylesheet to keep in sync, the same output in every framework.

Quick start How it works
HTML
<button nib="d=inline-flex; ali=center; g=8px; p=10px 18px; bdrd=10px; bd=none; cur=pointer;
             ftw=600; cl=#fff; bgc=#4F52D9; ts=all .15s;
             hover:bgc=#3A3DBF; hover:tf=translateY(-1px); active:tf=translateY(0)">
  Save changes
</button>

What NibCSS is#

NibCSS is a styling engine. You write CSS declarations directly on the element, in a short key=value form, and NibCSS compiles each rule into a real class with real CSS:

  • bgc=#4F52D9 becomes background-color: #4F52D9
  • hover:bgc=#3A3DBF becomes a :hover rule
  • md:p=24px becomes a rule inside @media (min-width: 768px)

The attribute stays readable, and what reaches the browser is an ordinary stylesheet — no inline styles, no style objects, no specificity fights.

Readable at a glance

Every style an element has is on the element. No jumping between a template and a stylesheet.

Real CSS output

Hover, focus, media queries, dark mode and pseudo-elements — things inline style can never do.

Deterministic

p=16px is always .nib-jbmcpl, in every file, build and machine. Output is cache- and SSR-safe.

Zero runtime when you want it

With a bundler, static attributes are extracted to a .css file at build time — or rewritten straight into class.

Every framework

Plain HTML, React, Next.js, Vue, Nuxt, Angular, Svelte, Astro, and server frameworks through the CLI.

Helpful errors

Typos are caught with “did you mean?” suggestions, the file and line, and values that would have worked.

Who it is for#

  • Product teams who want a consistent design system (tokens and reusable recipes) without a component library.
  • Framework authors and prototypers who want styles next to markup with no build step at all (CDN).
  • Server-rendered apps — Rails, Django, Laravel, PHP — through a standalone CLI that writes one nib.css.

A 20-second tour#

HTML
<!-- Layout, spacing, colours, states and breakpoints — all in one place -->
<article nib="card; d=grid; g=16px; md:gtc=120px 1fr; ali=center">
  <img nib="w=100%; asp=1; bdrd=12px; objf=cover" src="/avatar.jpg" alt="">
  <div>
    <h3 nib="m=0; fts=18px; ftw=700">Ada Lovelace</h3>
    <p nib="mt=4px; cl=$color.ink-muted; dark:cl=#94a3b8">First programmer</p>
    <a nib="btn-primary; mt=12px" href="/profile">View profile</a>
  </div>
</article>

In this snippet:

  • card and btn-primary are component recipes you define once in the config.
  • $color.ink-muted is a design token.
  • md: and dark: are modifiers — responsive and dark-mode variants.
  • gtc, asp, objf are shorthands for grid-template-columns, aspect-ratio and object-fit.

Every concept has its own page. If you are new, follow them in order from the sidebar, or start with the course.

Next steps#