103 lines
1.8 KiB
Markdown
103 lines
1.8 KiB
Markdown
# Template Structure
|
|
|
|
Recommended file organization for an HTMX + Tailwind rebuild.
|
|
|
|
## Example Layout
|
|
|
|
```text
|
|
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
|
|
|