feat: initial project setup with implementation plan
- Add PLAN.md with 40-step checklist across 10 phases - Add CLAUDE.md with project-specific instructions - Set up nix flake with FastHTML/MonsterUI dependencies - Create Python package skeleton (src/animaltrack) - Vendor FastHTML and MonsterUI documentation - Add Docker build configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
417
docs/vendor/monsterui/api_ref/docs_layout.md
vendored
Normal file
417
docs/vendor/monsterui/api_ref/docs_layout.md
vendored
Normal file
@@ -0,0 +1,417 @@
|
||||
# Layout (Flex and Grid) API Reference
|
||||
|
||||
This page covers `Grid`s, which are often used for general structure, `Flex` which is often used for layout of components that are not grid based, padding and positioning that can help you make your layout look good, and dividers that can help break up the page
|
||||
|
||||
## Grid
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
Column 1 Item 1
|
||||
|
||||
Column 1 Item 2
|
||||
|
||||
Column 1 Item 3
|
||||
|
||||
Column 2 Item 1
|
||||
|
||||
Column 2 Item 2
|
||||
|
||||
Column 2 Item 3
|
||||
|
||||
Column 3 Item 1
|
||||
|
||||
Column 3 Item 2
|
||||
|
||||
Column 3 Item 3
|
||||
|
||||
[code]
|
||||
|
||||
def ex_grid():
|
||||
return Grid(
|
||||
Div(
|
||||
P("Column 1 Item 1"),
|
||||
P("Column 1 Item 2"),
|
||||
P("Column 1 Item 3")),
|
||||
Div(
|
||||
P("Column 2 Item 1"),
|
||||
P("Column 2 Item 2"),
|
||||
P("Column 2 Item 3")),
|
||||
Div(
|
||||
P("Column 3 Item 1"),
|
||||
P("Column 3 Item 2"),
|
||||
P("Column 3 Item 3")))
|
||||
|
||||
[/code]
|
||||
|
||||
### Grid
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
Grid(*div, cols_min: int = 1, cols_max: int = 4, cols_sm: int = None, cols_md: int = None, cols_lg: int = None, cols_xl: int = None, cols: int = None, cls='gap-4', **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a responsive grid layout with smart defaults based on content
|
||||
|
||||
**Params**
|
||||
|
||||
* `div` `Div` components to put in the grid
|
||||
|
||||
* `cols_min` Minimum number of columns at any screen size
|
||||
|
||||
* `cols_max` Maximum number of columns allowed at any screen size
|
||||
|
||||
* `cols_sm` Number of columns on small screens
|
||||
|
||||
* `cols_md` Number of columns on medium screens
|
||||
|
||||
* `cols_lg` Number of columns on large screens
|
||||
|
||||
* `cols_xl` Number of columns on extra large screens
|
||||
|
||||
* `cols` Number of columns on all screens
|
||||
|
||||
* `cls` Additional classes on the grid (tip: `gap` provides spacing for grids)
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Responsive grid component
|
||||
|
||||
#### Practical Grid Example
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
#### Laptop
|
||||
|
||||
$999
|
||||
|
||||
Add to Cart
|
||||
|
||||
#### Smartphone
|
||||
|
||||
$599
|
||||
|
||||
Add to Cart
|
||||
|
||||
#### Headphones
|
||||
|
||||
$199
|
||||
|
||||
Add to Cart
|
||||
|
||||
#### Smartwatch
|
||||
|
||||
$299
|
||||
|
||||
Add to Cart
|
||||
|
||||
#### Tablet
|
||||
|
||||
$449
|
||||
|
||||
Add to Cart
|
||||
|
||||
#### Camera
|
||||
|
||||
$799
|
||||
|
||||
Add to Cart
|
||||
|
||||
[code]
|
||||
|
||||
def ex_product_grid():
|
||||
products = [
|
||||
{"name": "Laptop", "price": "$999", "img": "https://picsum.photos/200/100?random=1"},
|
||||
{"name": "Smartphone", "price": "$599", "img": "https://picsum.photos/200/100?random=2"},
|
||||
{"name": "Headphones", "price": "$199", "img": "https://picsum.photos/200/100?random=3"},
|
||||
{"name": "Smartwatch", "price": "$299", "img": "https://picsum.photos/200/100?random=4"},
|
||||
{"name": "Tablet", "price": "$449", "img": "https://picsum.photos/200/100?random=5"},
|
||||
{"name": "Camera", "price": "$799", "img": "https://picsum.photos/200/100?random=6"},
|
||||
]
|
||||
|
||||
product_cards = [
|
||||
Card(
|
||||
Img(src=p["img"], alt=p["name"], style="width:100%; height:100px; object-fit:cover;"),
|
||||
H4(p["name"], cls="mt-2"),
|
||||
P(p["price"], cls=TextPresets.bold_sm),
|
||||
Button("Add to Cart", cls=(ButtonT.primary, "mt-2"))
|
||||
) for p in products
|
||||
]
|
||||
|
||||
return Grid(*product_cards, cols_lg=3)
|
||||
|
||||
[/code]
|
||||
|
||||
## Flex
|
||||
|
||||
Play Flex Box Froggy to get an understanding of flex box.
|
||||
|
||||
### DivFullySpaced
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
DivFullySpaced(*c, cls='w-full', **kwargs)
|
||||
[/code]
|
||||
|
||||
> Creates a flex div with it's components having as much space between them as possible
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Classes for outer div (`w-full` makes it use all available width)
|
||||
|
||||
* `kwargs`
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
LeftCenterRight
|
||||
|
||||
[code]
|
||||
|
||||
def ex_fully_spaced_div():
|
||||
return DivFullySpaced(
|
||||
Button("Left", cls=ButtonT.primary),
|
||||
Button("Center", cls=ButtonT.secondary),
|
||||
Button("Right", cls=ButtonT.destructive)
|
||||
)
|
||||
|
||||
[/code]
|
||||
|
||||
### DivCentered
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
DivCentered(*c, cls='space-y-4', vstack=True, **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a flex div with it's components centered in it
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Classes for outer div (`space-y-4` provides spacing between components)
|
||||
|
||||
* `vstack` Whether to stack the components vertically
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Div with components centered in it
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
### Centered Title
|
||||
|
||||
This content is centered both horizontally and vertically.
|
||||
|
||||
[code]
|
||||
|
||||
def ex_centered_div():
|
||||
return DivCentered(
|
||||
H3("Centered Title"),
|
||||
P("This content is centered both horizontally and vertically.")
|
||||
)
|
||||
|
||||
[/code]
|
||||
|
||||
### DivLAligned
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
DivLAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a flex div with it's components aligned to the left
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Classes for outer div
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Div with components aligned to the left
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
#### Left Aligned Title
|
||||
|
||||
Some text that's left-aligned with the title and image.
|
||||
|
||||
[code]
|
||||
|
||||
def ex_l_aligned_div():
|
||||
return DivLAligned(
|
||||
Img(src="https://picsum.photos/100/100?random=1", style="max-width: 100px;"),
|
||||
H4("Left Aligned Title"),
|
||||
P("Some text that's left-aligned with the title and image.")
|
||||
)
|
||||
|
||||
[/code]
|
||||
|
||||
### DivRAligned
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
DivRAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a flex div with it's components aligned to the right
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Classes for outer div
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Div with components aligned to the right
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
Action
|
||||
|
||||
Right-aligned text
|
||||
|
||||
[code]
|
||||
|
||||
def ex_r_aligned_div():
|
||||
return DivRAligned(
|
||||
Button("Action", cls=ButtonT.primary),
|
||||
P("Right-aligned text"),
|
||||
Img(src="https://picsum.photos/100/100?random=3", style="max-width: 100px;")
|
||||
)
|
||||
|
||||
[/code]
|
||||
|
||||
### DivVStacked
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
DivVStacked(*c, cls='space-y-4', **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a flex div with it's components stacked vertically
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Additional classes on the div (tip: `space-y-4` provides spacing between components)
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Div with components stacked vertically
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
## Vertical Stack
|
||||
|
||||
First paragraph in the stack
|
||||
|
||||
Second paragraph in the stack
|
||||
|
||||
Action Button
|
||||
|
||||
[code]
|
||||
|
||||
def ex_v_stacked_div():
|
||||
return DivVStacked(
|
||||
H2("Vertical Stack"),
|
||||
P("First paragraph in the stack"),
|
||||
P("Second paragraph in the stack"),
|
||||
Button("Action Button", cls=ButtonT.secondary)
|
||||
)
|
||||
|
||||
[/code]
|
||||
|
||||
### DivHStacked
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
DivHStacked(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a flex div with it's components stacked horizontally
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components
|
||||
|
||||
* `cls` Additional classes on the div (`space-x-4` provides spacing between components)
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Div with components stacked horizontally
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
#### Column 1
|
||||
|
||||
Content for column 1
|
||||
|
||||
#### Column 2
|
||||
|
||||
Content for column 2
|
||||
|
||||
#### Column 3
|
||||
|
||||
Content for column 3
|
||||
|
||||
[code]
|
||||
|
||||
def ex_h_stacked_div():
|
||||
return DivHStacked(
|
||||
Div(H4("Column 1"), P("Content for column 1")),
|
||||
Div(H4("Column 2"), P("Content for column 2")),
|
||||
Div(H4("Column 3"), P("Content for column 3"))
|
||||
)
|
||||
|
||||
[/code]
|
||||
|
||||
* * *
|
||||
|
||||
### FlexT
|
||||
|
||||
_Flexbox modifiers using Tailwind CSS_
|
||||
|
||||
Option | Value | Option | Value | Option | Value | Option | Value
|
||||
---|---|---|---|---|---|---|---
|
||||
block | flex | inline | inline-flex | left | justify-start | center | justify-center
|
||||
right | justify-end | between | justify-between | around | justify-around | stretch | items-stretch
|
||||
top | items-start | middle | items-center | bottom | items-end | row | flex-row
|
||||
row_reverse | flex-row-reverse | column | flex-col | column_reverse | flex-col-reverse | nowrap | flex-nowrap
|
||||
wrap | flex-wrap | wrap_reverse | flex-wrap-reverse | | | |
|
||||
|
||||
Reference in New Issue
Block a user