|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +launch.css is a classless CSS framework that styles semantic HTML elements directly without requiring class names. It uses ARIA attributes and data attributes for component styling and layout control. |
| 8 | + |
| 9 | +## Commands |
| 10 | + |
| 11 | +```bash |
| 12 | +# Root level (monorepo) |
| 13 | +pnpm dev # Start dev servers for all packages |
| 14 | +pnpm build # Build all packages |
| 15 | +pnpm test # Run tests (publint validation) |
| 16 | +pnpm format # Format code with dprint |
| 17 | +pnpm lint # Check formatting with dprint |
| 18 | + |
| 19 | +# Core package (packages/main) |
| 20 | +cd packages/main |
| 21 | +pnpm dev # Watch-compile Sass: src/_index.scss → dist/index.css |
| 22 | +pnpm build # Compile compressed CSS |
| 23 | + |
| 24 | +# Documentation (apps/docs) |
| 25 | +cd apps/docs |
| 26 | +pnpm dev # Start Vite dev server |
| 27 | +pnpm build # Build static site |
| 28 | +``` |
| 29 | + |
| 30 | +## Architecture |
| 31 | + |
| 32 | +**Monorepo Structure:** |
| 33 | + |
| 34 | +- `packages/main/` - Core CSS framework (published to npm as `launch.css`) |
| 35 | +- `apps/docs/` - Documentation website (Vite + Handlebars + HTMX) |
| 36 | +- `examples/website/` - Example implementation |
| 37 | + |
| 38 | +**Sass Organization** (`packages/main/src/`): |
| 39 | + |
| 40 | +- `_index.scss` - Main entry point, imports all modules |
| 41 | +- `_variables.scss` - CSS custom properties (colors, fonts, spacing) |
| 42 | +- `_global.scss` - Global resets and base styles |
| 43 | +- `layouts/` - Website and dashboard layout styles |
| 44 | +- `compoments/` - Component styles (note: intentional spelling) |
| 45 | +- `partials/_breakpoints.scss` - Media query breakpoints |
| 46 | + |
| 47 | +## Core Concepts |
| 48 | + |
| 49 | +**Classless Design:** Styles target semantic HTML elements, ARIA roles/attributes, and data attributes. No CSS classes. |
| 50 | + |
| 51 | +**Theme System:** Uses CSS `color-scheme` property with `light-dark()` function. No JavaScript theme switching required. |
| 52 | + |
| 53 | +```css |
| 54 | +color-scheme: only dark; /* Force dark */ |
| 55 | +color-scheme: only light; /* Force light */ |
| 56 | +color-scheme: light dark; /* Auto based on OS preference */ |
| 57 | +``` |
| 58 | + |
| 59 | +**Layouts:** Controlled via `data-layout` attribute on `<body>`: |
| 60 | + |
| 61 | +- `website` - Standard header/main/footer layout |
| 62 | +- `dashboard` - Fixed header app layout |
| 63 | + |
| 64 | +**Button Variants:** Styled via ARIA labels (not classes): |
| 65 | + |
| 66 | +- Default: `<button>Primary</button>` |
| 67 | +- Secondary: `aria-label` contains "cancel", "back", or "close" |
| 68 | +- Danger: `aria-label` contains "delete", "remove", "discard", "erase", "destroy", or "clear" |
| 69 | + |
| 70 | +## Adding Components |
| 71 | + |
| 72 | +1. Create Sass file in `packages/main/src/compoments/` (match existing naming) |
| 73 | +2. Import in `packages/main/src/compoments/_index.scss` |
| 74 | +3. Use semantic HTML selectors, ARIA attributes, or `data-*` attributes (no classes) |
| 75 | +4. Use variables from `_variables.scss` for colors/spacing |
| 76 | +5. Test with `pnpm dev` in root directory |
| 77 | + |
| 78 | +## LLM Reference |
| 79 | + |
| 80 | +See `apps/docs/public/llm.txt` for component HTML patterns and ARIA attribute reference. |
0 commit comments