patterns.fscss: a demo module for styling CSS in plain English

FSCSS v1.1.25 shipped pattern() — a method that matches a plain-English phrase against a stored description and injects the matching CSS. I wrote about the mechanics of pattern() itself in an earlier post. This one is about what I built with it: patterns.fscss, a small demo module you can import today.

What it is

patterns.fscss is a pattern library. It bundles a set of design tokens and a set of pattern() definitions for common UI needs, cards, buttons, hover effects, animations, a few components, so you can write a class body like this:

.card {
  beautiful gradient hello world card
}

.btn-primary {
  solid purple primary button with white label
}

and get real CSS out, without calling a mixin by an exact name.

It is explicitly a demo. It does not try to cover every pattern you might want. It exists to show what a pattern library looks like in practice, and to give people a working repo to fork and extend.

How it's structured

The module is two @define blocks:

@define pattern-root(sel: root) {
  /* declares design tokens as CSS custom properties */
}

@define patterns(thr: 0.65) {
  /* declares the pattern library, using @use(thr) as
     the shared threshold for every pattern() call */
}

Calling @pattern-root() sets up the tokens. Calling @patterns(0.7) registers the library at whatever threshold you want. Everything after that is just writing phrases inside your selectors.

Using it

Import the published module directly:

@import((pattern-root, patterns) from patterns)

@pattern-root()
@patterns(0.7)

Or fork the repo and import your own copy, which is the better option once you start adding patterns of your own:

@import((pattern-root, patterns) from "./patterns.fscss")

A note on threshold and collisions

Every pattern in the module shares one threshold, set at the @patterns() call site. That keeps the call simple, but it means pattern descriptions need to stay lexically distinct from each other. Two descriptions that share most of their words, for example an early draft of this module had "rounded primary white button with purple text" next to "solid purple primary button with white text", can end up close enough in similarity score that which one wins depends on small wording differences in the phrase you actually write. The fix isn't a smarter algorithm, it's writing descriptions that don't overlap that much in the first place.

Contributing

The repo is set up for contribution. If you have a pattern you use often, plain-English description plus the CSS it should produce, a pull request is the way to get it in. The README has the full guidelines, including the distinctness rule above.

Repo: github.com/fscss-ttr/patterns.fscss

Open-source, MIT Licensed

---