BAPP UI v0.1.0

A CSS framework for ERP-scale apps. Tokenised, themeable, addon-friendly.

Get started

Loading order

  1. /bapp-core/ui/vendor/inter/inter.css — local Inter (variable)
  2. /bapp-core/ui/vendor/fontawesome/css/all.min.css — icons
  3. /bapp-core/ui/bf.core.css — reset + tokens + light/dark + utilities
  4. /bapp-core/ui/bf.layout.css — application shell
  5. /bapp-core/ui/bf.<component>.css — only what your page uses
  6. /bapp-core/ui/modules/bf.<module>.css — heavy screens (kanban, grid…)
  7. /bapp-core/ui/bf.theme.<name>.css — optional primary preset
  8. /bapp-core/ui/bf.min.js — tiny JS layer (tooltips, dropdowns, modals, tabs, drawers, toasts, shell)

Sections

Guideline / ColorsTokens, light/dark, primaries TypographyInter, type scale, weights ThemingLight / dark / custom primary SpacingSpacing scale + radius + elevation IconsFont Awesome usage ComponentsAll ~30 building blocks Screen clones5 reference screens

Customise the primary on the fly

The runtime theme switcher lives in the host app (htmx + Alpine). For a quick try, set --bf-custom-primary on <html> with data-bf-primary="custom", or use one of the shipped presets:

Default Mint Crimson Orchid Ember Pick #ec4899

And toggle dark mode:

Rounding

Five named radius presets — square / sharp / default / soft / round. Every component re-shapes because each radius token multiplies --bf-radius-scale.