sitelo UI extras

sitelo UI is the core: what most sites reach for, in one stylesheet. This is the rest — the textured, the decorative, the fancy — under its own entry point, sitelo/ui-extras, so nothing here weighs on a page that never asks for it.

Each extra ships its own stylesheet rather than a place in ui.css: grain() comes with grainStyles(), which goes in the head beside styles() and is served and copied by the same plugin, from the same base. A page links the sheets of the extras it uses, and only those.

import { html, head, body } from 'javascript-to-html'
import { styles, container, hero } from 'sitelo/ui'
import { grain, grainStyles } from 'sitelo/ui-extras'

export default () => html({ lang: 'en' },
  head(styles(), grainStyles()),
  body(
    grain({ as: 'section' },
      container(hero({ title: 'Hello' })),
    ),
  ),
)

The calling convention, the su- class prefix and the theme tokens are the core’s, so an extra drops into a page the same way any component does, and follows theme() the same way. Every example here is rendered by the build that renders the page around it, in this site’s light and dark themes.

Texture

• grained

  GrainLay a film grain over anything, so a flat area of colour is not.

Calling from the page

An extra that can be driven from script has its calls under sitelo/ui-extras/client — setGrain() and getGrain() for grain — the same shape as sitelo/ui/client, and reachable from an event attribute the same way: import('/su/grain.js').then(m=>m.set('hero',{seed:7})).