⚙️ Core

Core components for building fh-matui Material Design apps with BeerCSS

🎯 Overview

This module provides the foundational building blocks for Material Design styling in FastHTML.

Category	Exports	Purpose
📦 Constants	HEADER_URLS, beer_hdrs	CDN links and header components
🎨 Helper Lists	SIZES, COLORS, MARGINS, etc.	All BeerCSS utility class names
🖌️ MatTheme	MatTheme	Fluent API for app theming (MatTheme.blue.headers())
🔗 BeerCssChain	BeerCssChain	Chainable CSS helper classes

---

📚 Table of Contents

1. CDN Headers - BeerCSS/Material Design CDN setup
2. Helper Constants - Utility class name lists
   
3. MatTheme API - App theming with color chains
4. BeerCssChain - Chainable CSS helpers

📦 CDN Headers

BeerCSS and Material Dynamic Colors CDN configuration.

Constant	Description
HEADER_URLS	Dict of CDN URLs for CSS/JS assets
beer_hdrs	Pre-configured header tuple for FastHTML apps

💡 Use case: Include beer_hdrs in your FastHTML app’s headers to enable Material Design styling.

🎨 Helper Constants

BeerCSS utility class names organized by category. These lists power BeerCssChain and can be used for validation.

Category	List	Examples
📏 Sizing	SIZES, WIDTH_HEIGHT	small, large, auto_width
🎭 Effects	ELEVATES, BLURS, SHADOWS	elevate, medium_blur, shadow
📐 Layout	MARGINS, PADDINGS, POSITIONS	no_margin, left_padding, center
🎨 Theme	THEME_HELPERS, COLOR_HELPERS	primary, dark, blue5
✍️ Text	TYPOGRAPHY	bold, italic, uppercase

# Check available sizes
print(SIZES)  # ['tiny', 'small', 'medium', 'large', 'extra', 'wrap', 'no_wrap', 'max']

# All helpers combined for validation
len(ALL_HELPERS)  # 400+ utility classes available

['tiny', 'small', 'medium', 'large', 'extra', 'wrap', 'no_wrap', 'max']

408

🖌️ MatTheme API

Fluent API for configuring app themes with Material Design colors.

Method	Description
MatTheme.<color>	Select a theme color (e.g., MatTheme.blue, MatTheme.amber)
.headers(title, mode)	Generate header tuple with theme scripts

Available colors: amber, blue, red, green, purple, orange, cyan, teal, indigo, pink, lime, deep_orange, deep_purple, blue_grey, brown, yellow

💡 Use case: MatTheme.indigo.headers("My App", mode="dark") creates a dark-themed indigo app.

---

source

_ThemeChain.headers

def headers(
    title:str='App', mode:str='auto'
):

Generate FastHTML headers with BeerCSS theming

# Create a blue-themed app
hdrs = MatTheme.blue.headers(title="My App")

# Dark mode with indigo theme  
hdrs = MatTheme.indigo.headers(title="Dashboard", mode="dark")

# Light mode with amber theme
hdrs = MatTheme.amber.headers(title="Settings", mode="light")

🔗 BeerCssChain

Chainable helper for building BeerCSS class strings with a fluent API.

Method	Description
BeerCssChain()	Create empty chain
.<helper>	Chain any BeerCSS helper (e.g., .small, .primary, .bold)
str(chain)	Convert to space-separated class string

💡 Use case: Build complex class strings without typos: BeerCssChain().small.primary.bold → "small primary bold"

---

source

BeerCssChain

def BeerCssChain(
    tokens:NoneType=None
):

Base class for chaining Beer CSS helper classes together

# Chain multiple helpers
chain = BeerCssChain().small.primary.bold.round
str(chain)  # "small primary bold round"

# Use with FastHTML components
Div("Hello", cls=str(BeerCssChain().large.center.padding))

# Iterate over tokens
list(BeerCssChain().small.margin.elevate)  # ['small', 'margin', 'elevate']

['small', 'margin', 'elevate']