doclink_web/project-specs/TEMPLATE_STRUCTURE.md

Template Structure

Recommended file organization for an HTMX + Tailwind rebuild.

Example Layout

app/
  templates/
    layouts/
      base.html
      auth.html
      shell.html
    pages/
      login.html
      dashboard.html
      orders/
        list.html
        detail.html
        new.html
      results/
        list.html
        detail.html
      fpp/
        list.html
      settings/
        account.html
        change-password.html
    fragments/
      orders/
        table.html
        detail.html
        stepper.html
      results/
        table.html
        detail.html
      fpp/
        list.html
      modals/
        pesan-khusus.html
    components/
      sidebar.html
      topbar.html
      cards.html
      table.html
      empty-state.html
      form-fields.html
      pagination.html

Layouts

base.html

• Includes global Tailwind styles
• Loads HTMX
• Defines meta tags and page title

auth.html

• Used for login and problem-login screens
• Simple centered layout

shell.html

• Used for authenticated app pages
• Includes sidebar on desktop and nav on mobile

Components

Keep components small and reusable:

• sidebar
• topbar
• action bar
• stat cards
• search/filter bar
• table rows
• empty states
• confirm dialogs
• modal shells

Fragment Rules

• A fragment should contain only the markup needed for the swap target
• Fragments must be valid standalone HTML snippets
• Do not duplicate full page layout in a fragment

Tailwind Rules

• Use a consistent spacing scale
• Define semantic color tokens in the design system layer
• Make desktop breakpoints explicit
• Prefer utility composition over custom CSS unless a pattern repeats often

Responsive Behavior

• Mobile first
• Sidebar becomes drawer or bottom nav
• Tables become cards on small screens
• Forms collapse to one column