Overview
Get started with Master CSS
Learn class syntax, design tokens and CSS delivery, then apply them in your framework.
Getting started 5
Install Master CSS and get your first project running.
- Introduction to Master CSS Build an interface with classes, follow them into CSS, and define the values your project shares.
- Installing Master CSS Choose a framework integration, check CDN availability, or generate a stylesheet with the CLI.
- Syntax tutorial Read and compose Master CSS classes, add interaction states and conditions, and build a guide card that responds to its available space.
- Compatibility Use new CSS features with a usable fallback, verify browser behavior, and place third-party styles in the cascade.
- Migrating to Master CSS Convert one component or route, verify the screens sharing its styles, and remove old dependencies when their consumers are gone.
Agentic workflows 2
Set up your editor and work with AI coding agents.
- Language service for Master CSS Set up VS Code, confirm project-aware token completion, inspect generated CSS, and configure class sources and workspaces.
- AI coding with Master CSS Connect an agent to your Master CSS project, request a scoped change, verify the rendered result, and review shared style changes.
Authoring 7
Organize theme tokens, styles and reusable packages.
- Theme tokens Define shared design values, see how token edits affect consumers, and choose local overrides, static delivery and inline substitution.
- Global styles Load one app entry, split shared CSS by ownership, and keep document defaults, component rules and route styles in the right scope.
- Reusing styles Choose tokens, component classes, utilities and mixins by what should change together, while keeping local variations easy to express.
- Route-level styles Keep route CSS locally delivered while using shared definitions; distinguish reference context, native rules and selector scope.
- Scanning class names Write complete class names, handle changing values, and include the sources a static build needs.
- Authoring packages Publish shared CSS source, override public tokens in each app, and verify the packed package in a production consumer.
- Code linting for Master CSS Use ESLint to validate Master CSS classes, detect conflicts, sort class lists and apply project policies.
Fundamentals 4
Understand project context, rendering, layers and view transitions.
- Cascade layers Override a shared component with utilities and diagnose competing rules, unlayered CSS and importance.
- Monorepo Give each application its own project context and share CSS vocabulary across workspace packages.
- Rendering modes Choose where to generate CSS, compare static, pre-render, runtime and progressive delivery, and verify the result.
- View transitions Connect article views with browser view transitions, stable snapshot names and Master CSS layout utilities.
Design foundations 4
Build responsive interfaces with consistent layout, color and type.
- Color Build interface color from adaptive roles, raise surfaces with radius and shadow, and choose light or dark modes.
- Layout Compose a page from a capped wrapper, spacing tokens, column grids and explicit tracks.
- Responsive design Choose the right responsive boundary, adapt page columns and reusable summaries, and verify the widths where their layout changes.
- Typography Choose complete text treatments or single font tokens, and set the site typeface once.
Build and delivery 1
Prepare and optimize your styles for production.