# Graffiti CSS Framework

> A minimal, drop-in CSS toolkit with fluid typography, modern CSS features, and zero JavaScript dependencies.

## Philosophy

Graffiti styles native HTML elements directly - no component library, no JavaScript framework required. It uses modern CSS features like OKLCH colors, container queries, CSS scroll-snap, and the popover/dialog APIs.

**Key principles:**
- **Native HTML first** - Use `<dialog>`, `<details>`, `popover`, HTML invokers before reaching for JS
- **Minimal classes** - Most elements are styled automatically, add classes only when needed
- **CSS custom properties** - Customize colors, spacing, and sizing via variables
- **Fluid typography** - Text scales smoothly between viewport sizes
- **Automatic theming** - Light/dark mode via `light-dark()` with no extra work
- **No build step** - Just import the CSS and go

## Documentation Structure

- **Navigation** - Headers, sidebars, breadcrumbs, menus
- **Dialogs & Overlays** - Modal dialogs, confirm patterns
- **Layouts** - Page structure, grids, content flow
- **Elements** - Simple, single-class UI pieces (buttons, tags, avatars)
- **Components** - Multi-element patterns (accordion, carousel, tables)
- **Forms** - Inputs, toggles, search, file upload
- **Reference** - CSS variables, utilities, typography system

---

## What are you building?

### Navigation
- [Sidebar navigation](https://graffiti-ui.com/llms/sidebar-nav.txt) - Collapsible app sidebar with sections
- [Dropdown menu](https://graffiti-ui.com/llms/dropdown.txt) - Popover-based menu (no JS)
- [Header/navbar](https://graffiti-ui.com/llms/header.txt) - Site header with nav links
- [Footer](https://graffiti-ui.com/llms/footer.txt) - Site footer with nav columns and legal links
- [Breadcrumbs](https://graffiti-ui.com/llms/breadcrumbs.txt) - Hierarchy trail navigation
- [User menu](https://graffiti-ui.com/llms/user-menu.txt) - Avatar + dropdown for user actions
- [List navigation](https://graffiti-ui.com/llms/list-nav.txt) - Settings/menu rows with icons and chevrons

### Dialogs & Overlays
- [Dialog](https://graffiti-ui.com/llms/dialog.txt) - Native modal dialog with animations
- [Confirm dialog](https://graffiti-ui.com/llms/confirm-dialog.txt) - Action confirmation pattern

### Layouts
- [Page layouts](https://graffiti-ui.com/llms/layouts.txt) - Sidebar, grid, split, holy-grail, readable
- [Stack & cluster](https://graffiti-ui.com/llms/stack-cluster.txt) - Vertical and horizontal flow

### Elements
- [Buttons](https://graffiti-ui.com/llms/buttons.txt) - Button variants and styles
- [Chips](https://graffiti-ui.com/llms/chips.txt) - Interactive filter/selection pills
- [Tags](https://graffiti-ui.com/llms/tags.txt) - Category and metadata labels
- [Callouts](https://graffiti-ui.com/llms/callouts.txt) - Info, warning, error, success boxes
- [Avatar](https://graffiti-ui.com/llms/avatar.txt) - User images and initials
- [Boxes](https://graffiti-ui.com/llms/boxes.txt) - Container styles (glow, ghost, semi-gloss)
- [Tooltip](https://graffiti-ui.com/llms/tooltip.txt) - Hover tooltips with CSS anchor positioning

### Components
- [Accordion](https://graffiti-ui.com/llms/accordion.txt) - Collapsible sections with details/summary
- [Tabs](https://graffiti-ui.com/llms/tabs.txt) - Pure CSS tabs with details/summary and subgrid
- [Carousel](https://graffiti-ui.com/llms/carousel.txt) - Horizontal scroll with snap
- [Reel](https://graffiti-ui.com/llms/reel.txt) - Vertical scroll with snap
- [Tables](https://graffiti-ui.com/llms/tables.txt) - Data table styling
- [Swipe](https://graffiti-ui.com/llms/swipe.txt) - Swipe-to-reveal actions

### Forms
- [Form basics](https://graffiti-ui.com/llms/forms.txt) - Inputs, selects, checkboxes, radios
- [Login form](https://graffiti-ui.com/llms/login-form.txt) - Complete login pattern
- [Toggle switch](https://graffiti-ui.com/llms/toggle.txt) - On/off switch input
- [Search input](https://graffiti-ui.com/llms/search.txt) - Search with icon
- [Input group](https://graffiti-ui.com/llms/input-group.txt) - Input + button combo
- [File dropzone](https://graffiti-ui.com/llms/dropzone.txt) - Drag and drop upload

### Reference
- [CSS variables](https://graffiti-ui.com/llms/variables.txt) - Colors, spacing, shadows, typography
- [Utility classes](https://graffiti-ui.com/llms/utilities.txt) - Display, spacing, visibility helpers
- [Typography](https://graffiti-ui.com/llms/typography.txt) - Fluid type system and font sizes