Templates

Page layout templates that define content zones and responsive behavior. Templates compose organisms into full-page structures.

7 templates

App Shell

CSS Grid: sidebar column + header row + content area. 100vh. Used by all authenticated pages.

Composed of: SidebarNav + TopBar + main content area

Responsive: Sidebar becomes overlay drawer on mobile

Sidebar (240px)

Top Bar (56px)

Main Content

Dashboard Layout

Max-width content within App Shell. Vertical stack: stats row → quick actions → activity feed.

Composed of: AppShell + DashboardStats + ActivityFeed

Responsive: Stats: 2-col mobile → 4-col desktop

Sidebar

Top Bar

Stats → Actions → Feed

Editor Layout

Split-pane: left editor (50%) + resizer (4px) + right preview/playground (50%). Collapses to stacked on mobile.

Composed of: AppShell + Editor pane + Preview pane

Responsive: Split-pane collapses to stacked on md and below

Sidebar

Header

Editor (50%)

Preview (50%)

live

EditorLayout

Header

Editor Pane

Preview Pane

Library Layout

FilterBar + card grid/list + Pagination + Bulk Actions (conditional). Card grid: 1-col mobile, 2-col md, 3-col lg.

Composed of: AppShell + FilterBar + Card grid + Pagination + BulkActionsBar

Responsive: 1-col mobile → 2-col md → 3-col lg

Sidebar

Top Bar + FilterBar

Card Grid + Pagination

live

LibraryLayout

FilterBar

Card 1

Card 2

Card 3

Pagination

Detail View Layout

Header with breadcrumb + title + lifecycle bar + actions. Tabs below. Content area.

Composed of: AppShell + BreadcrumbNav + Status indicator + Tabs

Responsive: Full-width on mobile

Sidebar

Breadcrumb + Lifecycle

Tabs + Tab Content

live

DetailLayout

Breadcrumb

Title + Actions

Status Lifecycle

Tabs Nav

Tab Content Area

Settings Layout

Horizontal SettingsNav tabs below header + content area below. Text-only nav with active state.

Composed of: AppShell + SettingsNav (horizontal tabs) + Form content

Responsive: Tabs scroll horizontally on mobile

Sidebar

Header

Settings Nav

Settings Content

Auth Layout

Centered card (400px max) on full-height background. Logo + auth form + footer links.

Composed of: AuthForm + branding + footer

Responsive: Full-width card on mobile

Auth Card (400px)

Modal Layout

Centered modal covering 60–80% of the viewport over a dimmed overlay. Used for dialogs, wizards, and detail views.

Composed of: Dialog + overlay backdrop + content area

Responsive: Full-screen on mobile, 80% on tablet, 60% on desktop

Modal Content (60–80%)

Comparison Layout

Toolbar with version selectors + sync toggle + close button. 2-column diff view below.

Composed of: Toolbar + 2-col diff

Responsive: Stacked columns on mobile

Sidebar

Header

Version A (50%)

Version B (50%)

live

ComparisonLayout

Toolbar: Version A ↔ Version B

Version A

Version B

Contact

Questions, collaborations, or feedback on democrito — reach out on LinkedIn or via hola@atomic-products.com.

Made with ❤️ from 🇪🇸 by Mariano · github.com/mmorerasanchez/democrito