# ply CSS Framework — AI Instructions This is the ply CSS framework repository. See **PLY.md** for the complete class reference, usage rules, and copy-paste snippets. ## Before Writing Custom CSS — Search ply-classes.json **`ply-classes.json`** is the complete searchable reference. Before writing any custom CSS, search it first: - **`classes`** — Every ply class with category, description, and examples. Search here before inventing a class name. - **`customProperties`** — All 120+ `--ply-*` CSS variables organized by category (typography, background, text, borders, interactive, elevation, brand, palette, color surfaces) with light/dark values. Use these instead of hardcoding colors or font stacks. - **`semanticElements`** — Every HTML element ply auto-styles (``, `
`, ``, ``, ``, ``, ``, ``, etc.) with tips on usage. Check here before building a custom component — ply may already style the native element. **Rule: If you're about to write custom CSS, search `ply-classes.json` first.** If a class, variable, or semantic element already does what you need, use it. ## Start Semantic, Then Customize ply automatically styles semantic HTML elements — `
`, ``, `
`, `
`, ``, ``, ``, headings, forms, and more. Start with semantic elements before reaching for `
` wrappers or custom classes. Custom styling is fine when you need it, but use what HTML and ply give you for free first. ## Key Rules for Generating ply Markup 1. **ply is standalone** — Do NOT use Tailwind, Bootstrap, or other CSS frameworks alongside ply. Remove them first. 2. **Always wrap `unit-*` classes inside `units-row`** — they are flex children and won't work alone 3. **Use `units-container`** for page-width centering (1200px max) 4. **Wrap forms in `.form`** to enable styled inputs 5. **Use `
`, `
`, ``, `