3.9 KiB
3.9 KiB
Layout Patterns (Tailwind+)
Consolidated list of all layout patterns from Tailwind+ to convert to Flux UI.
Total: 38 variants across 5 categories
Source: https://tailwindcss.com/plus/ui-blocks/application-ui/layout/
Containers (5 variants)
Source: https://tailwindcss.com/plus/ui-blocks/application-ui/layout/containers
| # | Variant | Key Features |
|---|---|---|
| 1 | Full-width on mobile, constrained to breakpoint with padded content above | Responsive container |
| 2 | Constrained to breakpoint with padded content | Fixed-width padded |
| 3 | Full-width on mobile, constrained with padded content above mobile | Mobile-first responsive |
| 4 | Constrained with padded content | Simple constrained |
| 5 | Narrow constrained with padded content | Narrow width variant |
Cards (10 variants)
Source: https://tailwindcss.com/plus/ui-blocks/application-ui/layout/cards
| # | Variant | Key Features |
|---|---|---|
| 1 | Basic card | Simple card container |
| 2 | Card with header | Header section + body |
| 3 | Card with header and footer | Header + body + footer |
| 4 | Card with gray header | Gray-themed header |
| 5 | Card with gray body | Gray-themed body |
| 6 | Card with gray footer | Gray-themed footer |
| 7 | Card with header and gray footer | Mixed styling |
| 8 | Card with image | Image header card |
| 9 | Card with full-width header and footer | Edge-to-edge sections |
| 10 | Card with divider | Internal divider line |
List Containers (7 variants)
Source: https://tailwindcss.com/plus/ui-blocks/application-ui/layout/list-containers
| # | Variant | Key Features |
|---|---|---|
| 1 | Simple | Basic list wrapper |
| 2 | Card | List in card container |
| 3 | Card with header | Card list with header |
| 4 | Separate cards | Individual card per item |
| 5 | Separate cards with header above | Header + separate cards |
| 6 | Simple with dividers | Divided list items |
| 7 | Card with dividers | Card list with dividers |
Media Objects (8 variants)
Source: https://tailwindcss.com/plus/ui-blocks/application-ui/layout/media-objects
| # | Variant | Key Features |
|---|---|---|
| 1 | Basic responsive | Image + content layout |
| 2 | Wide responsive | Wider image variant |
| 3 | Stretched to fit | Full-width stretch |
| 4 | Nested | Nested media objects |
| 5 | Actions dropdown | With action menu |
| 6 | Basic aligned to bottom | Bottom alignment |
| 7 | Basic aligned to center | Center alignment |
| 8 | Wide aligned to center | Wide centered |
Dividers (8 variants)
Source: https://tailwindcss.com/plus/ui-blocks/application-ui/layout/dividers
| # | Variant | Key Features |
|---|---|---|
| 1 | With label | Text in center of divider |
| 2 | With title | Title text divider |
| 3 | With title on left | Left-aligned title |
| 4 | With button | Button in divider |
| 5 | With icon | Icon in center |
| 6 | With toolbar | Multiple controls |
| 7 | Simple | Basic horizontal line |
| 8 | With label on left | Left-aligned label |
Pattern Categories (for Flux UI organisation)
By Type
- Structural: Containers (page-level)
- Content: Cards, list containers, media objects
- Decorative: Dividers
By Features
- With headers: Cards, list containers
- With footers: Cards
- With dividers: Cards, list containers, divider components
- Responsive: Containers, media objects
By Complexity
- Simple: Basic variants
- Compound: With multiple sections (header/body/footer)
- Nested: Support for nested content
Conversion Priority
- Cards - Basic card - fundamental container
- Cards - Card with header and footer - common dashboard pattern
- Containers - Constrained with padded content - page wrapper
- List containers - Card with dividers - data lists
- Dividers - Simple - section separators