Skip to content

Frontend

  • First-party JS components (web components) live in src/unspend/frontend_components/. They are minified by esbuild into static/generated/ during just static.
  • Use the design system available in unspend/controller/styles/app.css.
  • Tailwind classes are always up-to-date because Tailwind runs in the background during development.
  • For text colours, prefer the semantic emphasis utilities (text-primary-emphasis, text-secondary-emphasis, text-tertiary-emphasis) over custom text-neutral-* / dark:text-neutral-* combinations.
  • HTML placeholder attributes should contain a sample value (e.g. placeholder="Jane Doe"), not an instruction (e.g. placeholder="Enter your name"). If no sample value is appropriate (e.g. for a password field), leave the placeholder blank.
  • Always use verbose AlpineJS syntax in templates: x-bind:class instead of :class, x-on:click instead of @click.