Improvise. Organize. Customize.
Get Formulize GitHub

Formulize UI

Formulize UI is a set of CSS classes for building markup in Formulize: screen templates, template screens, derived values and text elements that output HTML, and theme tweaks. They look right in any theme, follow the colours, fonts, text size and density set on the Appearance page, and work full screen, in the drawer, on a phone and embedded in another site. They follow the conventions of Tailwind CSS, so they will be familiar if you, or your AI tools, know Tailwind.

Every example is here as code. To see the examples rendered in your own site's theme and Appearance settings, open the style guide in Formulize: Admin > Appearance > Style guide, available to webmasters. This reference is for version 1 of Formulize UI.

The reference

  • Tokens: Tokens are the CSS custom properties that hold the design's values. Use them in your own CSS and style attributes instead of fixed values, so your styles follow the theme, the Appearance page and the density: color: var(--fz-color-text-muted). Sizes are given at the default settings; they are in rem, so they grow with the Appearance page's Text and interface size setting.
  • Layout: Layout classes arrange their children. They respond to the space they are given, not to the size of the screen, so the same markup works full screen, in the drawer, on a phone and embedded in another site. Nest them to build anything. The gap is the only space between the children: their top and bottom margins are removed. Change the gap with a gap utility.
  • Components: Things to build with. Each has a main class, classes for its parts, and classes for its variations. They draw everything from the tokens, so they follow the theme, the Appearance page and the density.
  • Utilities: Utilities do one thing each, with Tailwind's names and meanings. On the same element, a utility wins over a layout class or a component. {n} is a spacing step: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12 or 16, each 4px at standard density. s and e mean start and end, which follow the text direction; l and r are always left and right, so prefer s and e.
  • Recipes: Complete examples of the classes at work in the places Formulize runs your code, ready to copy. Change the element handles to your own form's.
  • For theme authors: How a theme works with Formulize UI: giving the tokens its values, loading the stylesheet, and keeping its own rules from getting in the way of the classes.

The rules

Five rules cover almost everything.

  • Arrange things with a layout class: fz-stack puts things one above the other, fz-cluster side by side, fz-auto-grid in columns. The gap between them is the only space between them, so you do not need margins.
  • Use a component for a thing: fz-btn for a button, fz-card for a box of content, fz-callout for a message, fz-badge for a status, fz-field and fz-input for a form field.
  • Adjust with a utility: fz-mt-4 adds space above, fz-text-muted greys text. On the same element, a utility wins over a layout class or a component.
  • Don't hard-code colours or sizes in your own CSS. Use the tokens, such as var(--fz-color-accent) and calc(var(--fz-spacing) * 4), so your styles follow the theme, the Appearance page and the density.
  • Only the classes in this reference are public. Themes have their own classes, starting lyris- for Lyris, and Formulize has its own internal ones starting formulize-; those can change with any release.

Naming

Every public class and token starts with fz-. The rest of the name says what kind of class it is.

  • A component or layout class is a word or two: fz-card, fz-auto-grid.
  • A part of a component adds two underscores: fz-card__title.
  • A variation adds two dashes, and is always used with the main class: fz-card fz-card--interactive.
  • A utility is named after the Tailwind CSS class that does the same thing, with fz- in front: fz-mt-4 is Tailwind's mt-4, a top margin of 4 steps.
  • A token is a CSS custom property, named after Tailwind's with fz- in front: --fz-color-accent, --fz-text-sm, --fz-spacing.
  • In this reference, a set of related classes is written as one pattern. {a,b} is a choice, so fz-{m,p}-4 is fz-m-4 and fz-p-4; an empty choice means nothing there, so fz-m{,x}-4 is fz-m-4 and fz-mx-4. {2-6} is each number from 2 to 6. {n} is each step of the spacing scale. Use the class names the pattern stands for, never the pattern itself.

What is not here

Formulize UI is not Tailwind CSS. Tailwind builds its classes from your markup with a build step; Formulize markup is written at runtime, so every class has to exist already. That rules out some of Tailwind.

  • No variant prefixes: md:, lg:, hover:, focus:, dark:, group-hover: and the rest do not exist. For layouts that change with the space available, use the layout classes, which respond to their own width; for small screens there are fz-hide-on-mobile and fz-show-on-mobile. States such as hover and focus are built into the components.
  • No arbitrary values, such as p-[13px] or w-[300px]. Use a style attribute instead, with the tokens where you can.
  • No space-x-* or space-y-*: use fz-stack or fz-cluster, or a gap utility.
  • No palette colours, such as text-red-600. Colours are named by what they are for (fz-text-danger, fz-bg-surface), since they come from the theme and the Appearance page.
  • A fixed set of spacing steps: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12 and 16. fz-p-7 does not exist.
  • One text size that Tailwind does not have: fz-text-xs-plus (13px), between xs and sm. It is the size of the content text in lists and tables in Lyris.
  • Every class starts fz-. A Tailwind class without the prefix does nothing.

Where you can use it

Anywhere Formulize outputs your HTML, in any theme.

  • List screen and form screen templates, and template screens.
  • Derived values whose value is HTML, and Full Width Content and Captioned Content elements (under Text for display).
  • A theme's own templates and stylesheets.
  • In Lyris the classes match the rest of the interface. In older themes, such as Anari, they use that theme's colours and fonts but may not match its other styles.
  • AI tools connected to Formulize through MCP can read this whole reference: it is the formulize_ui topic of the get_documentation tool, which is available to users who can write custom code.