Genus examples

The canonical examples for building on genus
Favorite projects
Manage favorites
Notifications
Nothing new yet.
Avatar
Andrei
andrei@example.com
Administrator
Quick settings
Profile Settings

The canonical genus examples

The standardized example set to follow when building on genus. Every page carries its RULES on the page — the page plus its source are the contract. The index below says what each page answers.

Standards — the laws every page follows

  • Page layout — the page skeleton: shell, page header + actions, the three standard grids.
  • UI elements — the vocabulary and its laws: buttons (hierarchy, row-action shapes, no outline in groups), badges, alerts, toasts, icons.
  • States — the situation → pattern map: empty, error + retry, loading placeholders, action-in-flight.
  • Utility classes — every class the template adds beyond Bootstrap (w-*, btn-xs/contrast/icon-round/soft, badge-count, offcanvas sizes…), each linked to its law.

Components — building blocks with their rules

  • Buttons — the full CATALOG: solid/outline/contrast/soft families, sizes (incl. .btn-xs), shapes, states, icon + round buttons, groups.
  • Cards — the surface everything sits on: header/footer, stat cards, full-bleed, one-card-per-block rules.
  • Tables — STATIC tables only (data lives in listers): full-bleed, compact+striped, framed summary tables, cell patterns.
  • Tabs — pills in the card header (horizontal + vertical), badge counts, when tabs are wrong.
  • Accordions — single-open, plain vs flush-in-card, accordion vs tabs vs cards.
  • Forms — the LAYOUT standard: grid, labels, checks/switches, the button row (Cancel left, primary last); wiring belongs to the libraries.

Reference module — the end-to-end story

  • Module anatomy — table → api.* functions → routes → pages → menu; the read/write flow; how a fresh module starts minimal and grows.

Pages — full compositions to copy from

  • Dashboard — stat row, charts, recent-activity table; a dashboard SHOWS, it does not manage.
  • Data list — THE workhorse: lister rows, filter panel, bulk selection, offcanvas edit, confirm delete, keyboard.
  • Data grid — the list's sibling for card-shaped records: grid view, load more, single selection, offcanvas details.
  • Detail — identity header, tabbed facts, aside with related records; READ-first.
  • Settings — one tabbed card, a form per pane, switch rows.
  • Auth — sign in, register (with the inline email-code panel), recover, message (param-driven variants), complete profile (the wide card).
  • Errors — 403, 404, 500, maintenance — the route error key, internal + external variants.

Libraries — canonical usage, one page per lib

  • genus — the kernel: g.fetch + the envelope, toasts, g.format, g.confirm entry points.
  • selekt — selects: search, tags, remote + dependent, switch/modal/hierarchy/create modes.
  • date-selekt — dates, times and ranges, format-aware, min/max bounds.
  • file-selekt — uploads: files, dropzone, image editor, gallery, readonly.
  • validator — declarative validate-* rules (incl. the password policy), inline errors.
  • former — the form pipeline: fill, dirty guard, save, per-field server errors.
  • dialog — confirm / alert / prompt / the code-confirm dialog, the one way to ask.
  • lister — data lists: the minimal list (attributes, column standard + the header row), reorder/map + minimal grid instances.
  • charts — g.chart: theme-aware charts, data + intent only.
  • wizard — multi-step forms on former.
  • i18n — t() in Latte and JS, the language switcher.