lmiranda
5152cda161
Extract shared knowledge from 10 commands into 7 reusable skills: - mcp-tools-reference.md: All viz-platform MCP tool signatures - theming-system.md: Theme tokens, CSS variables, color palettes - accessibility-rules.md: WCAG contrast, color-blind safe palettes - dmc-components.md: DMC categories, validation, common props - responsive-design.md: Breakpoints, mobile-first, grid config - chart-types.md: Plotly chart types, export formats, resolution - layout-templates.md: Dashboard templates, filter types All commands now reference skills via "Skills to Load" section. Commands reduced from 1396 lines total to 427 lines (69% reduction). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
105 lines
2.2 KiB
Markdown
105 lines
2.2 KiB
Markdown
# Responsive Design
|
|
|
|
## Breakpoint Sizes
|
|
|
|
| Name | Min Width | Common Devices |
|
|
|------|-----------|----------------|
|
|
| `xs` | 0px | Small phones (portrait) |
|
|
| `sm` | 576px | Large phones, small tablets |
|
|
| `md` | 768px | Tablets (portrait) |
|
|
| `lg` | 992px | Tablets (landscape), laptops |
|
|
| `xl` | 1200px | Desktops, large screens |
|
|
|
|
## Mobile-First Approach
|
|
|
|
When `mobile_first=True` (default), styles cascade up:
|
|
- Define base styles for `xs` (mobile)
|
|
- Override only what changes at larger breakpoints
|
|
- Smaller CSS footprint, better performance
|
|
|
|
```python
|
|
{
|
|
"xs": {"cols": 1}, # Stack everything on mobile
|
|
"md": {"cols": 6}, # Two-column on tablet
|
|
"lg": {"cols": 12} # Full grid on desktop
|
|
}
|
|
```
|
|
|
|
When `mobile_first=False`, styles cascade down (desktop-first).
|
|
|
|
## Grid Configuration
|
|
|
|
Each breakpoint can configure:
|
|
|
|
| Property | Description | Values |
|
|
|----------|-------------|--------|
|
|
| `cols` | Grid column count | 1-24 |
|
|
| `spacing` | Gap between items | xs, sm, md, lg, xl |
|
|
| `gutter` | Outer padding | xs, sm, md, lg, xl |
|
|
| `grow` | Items grow to fill | true, false |
|
|
|
|
## Common Patterns
|
|
|
|
### Dashboard (Charts & Filters)
|
|
```python
|
|
{
|
|
"xs": {"cols": 1, "spacing": "xs"},
|
|
"sm": {"cols": 2, "spacing": "sm"},
|
|
"md": {"cols": 3, "spacing": "md"},
|
|
"lg": {"cols": 4, "spacing": "md"},
|
|
"xl": {"cols": 6, "spacing": "lg"}
|
|
}
|
|
```
|
|
|
|
### Data Table
|
|
```python
|
|
{
|
|
"xs": {"cols": 1, "scroll": true},
|
|
"md": {"cols": 1, "scroll": false},
|
|
"lg": {"cols": 1}
|
|
}
|
|
```
|
|
|
|
### Form Layout
|
|
```python
|
|
{
|
|
"xs": {"cols": 1},
|
|
"md": {"cols": 2},
|
|
"lg": {"cols": 3}
|
|
}
|
|
```
|
|
|
|
### Sidebar Layout
|
|
```python
|
|
{
|
|
"xs": {"sidebar": "hidden"},
|
|
"md": {"sidebar": "collapsed"},
|
|
"lg": {"sidebar": "expanded"}
|
|
}
|
|
```
|
|
|
|
## Component Span
|
|
|
|
Control how many columns a component spans:
|
|
|
|
```python
|
|
{
|
|
"component": "sales-chart",
|
|
"span": {
|
|
"xs": 1, # Full width (1/1)
|
|
"md": 3, # Half width (3/6)
|
|
"lg": 6 # Half width (6/12)
|
|
}
|
|
}
|
|
```
|
|
|
|
## CSS Media Queries
|
|
|
|
Generated for each breakpoint:
|
|
```css
|
|
@media (min-width: 576px) { ... }
|
|
@media (min-width: 768px) { ... }
|
|
@media (min-width: 992px) { ... }
|
|
@media (min-width: 1200px) { ... }
|
|
```
|