Skip to content
CROFF
v0.1.0GitHub

Introduction

What is CROFF?

An expressive utility-first CSS framework with its own language and compiler.

CROFF is a utility-first CSS framework. You style elements by writing small expressions in their class attribute, and a compiler turns exactly the expressions you used into a stylesheet.

html
<button class="flex(row) align(center) gap(2) padding(3,5) bg(brand) hover:bg(brand-dark)">
  Save
</button>
Generated CSS
:root {
  --croff-color-brand: #c8fd12;
  --croff-color-brand-dark: #a4d30b;
  --croff-spacing-2: 0.5rem;
  --croff-spacing-3: 0.75rem;
  --croff-spacing-5: 1.25rem;
}

.flex\(row\) {
  display: flex;
  flex-direction: row;
}

.align\(center\) {
  align-items: center;
}

.gap\(2\) {
  gap: var(--croff-spacing-2);
}

.padding\(3\,5\) {
  padding: var(--croff-spacing-3) var(--croff-spacing-5);
}

.bg\(brand\) {
  background-color: var(--croff-color-brand);
}

.hover\:bg\(brand-dark\):hover {
  background-color: var(--croff-color-brand-dark);
}

Nothing runs in the browser. The result is ordinary CSS that any browser, framework or server template can use.

What makes it different

It has a language. Expressions have a formal grammar and a real parser. Utilities take arguments, arguments can be nested functions, and a mistake gets an error message with a position and a suggestion.

Values are checked. gap(4) must be a token in your theme. gap(banana) is an error, not a rule that silently does nothing. When you need a value outside the system, gap[1.5rem] says so explicitly.

Output is predictable. The stylesheet depends only on the set of expressions in your source, so builds are reproducible and diffs are meaningful.

Your markup stays yours. CROFF never rewrites a class attribute. The class you read in DevTools is the class you wrote.

What's in version 0.1.0

  • A tokenizer, parser and AST for the utility language.
  • About 80 utilities across layout, flexbox, grid, sizing, spacing, typography, backgrounds, borders and effects.
  • State and responsive variants that compose freely.
  • A design token system that compiles to CSS custom properties.
  • A source scanner that works on any text file.
  • The croff CLI, a Vite plugin, a PostCSS plugin and a plugin API.

Version 0.1.0 is a pre-release. The packages aren't on a registry yet; Installation explains how to use them today.

Where to go next