Overview
Get started with Master CSS
This section walks you through learning and starting to use Master CSS.
Getting started 5
Install Master CSS and get your first project running.
- Introduction to Master CSSLearn what Master CSS is, write your first classes, and choose the next guide to read.
- Installing Master CSSInstall Master CSS with Vite, generate CSS from class names, and start styling in a few steps.
- Syntax TutorialBuild one button step by step with declarations, interaction states, responsive conditions and a project theme token.
- CompatibilityLearn browser support, native declaration fallback, vendor prefixes, modern CSS feature strategy, and how Master CSS coexists with third-party styles.
- Migrating to Master CSSMigrate existing projects to Master CSS with incremental setup, styling-system audits, and review workflow.
Agentic workflows 3
Set up your editor and work with AI coding agents.
- Language Service for Master CSSUse manifest-aware editor intelligence for Master CSS classes, directives, project tokens, generated CSS previews, colors, and workspace-specific configuration.
- AI Coding with Master CSSUse AI coding agents to write, review, and validate Master CSS classes with project context, prompts, linting, and visual checks.
- MCP Server for Master CSSConnect AI clients to Master CSS project context, diagnostics, generated CSS previews, and safe write previews through the Model Context Protocol.
Authoring 5
Organize theme tokens, styles and reusable packages.
- Theme TokensDefine shared design tokens with @theme for colors, spacing, typography, radius, breakpoints, containers, shadows, and motion.
- Global StylesSet up the global Master CSS entry, base layer, theme tokens, native global CSS, and shared component or utility vocabulary.
- Route-level StylesWrite route, page, and component-specific CSS with shared project definitions, native selectors, variants, container queries, and keyframes.
- Authoring PackagesCreate a simple CSS-only package that shares Master CSS tokens, variants, utilities, and component vocabulary.
- Code Linting for Master CSSAn ESLint integration for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.
Fundamentals 6
Understand rendering, responsive design and the cascade.
- Cascade LayersUnderstand how theme, base, defaults, components, and utilities layers control style priority.
- MonorepoA guide to setting up Master CSS in a modern repository.
- Rendering ModesUnderstand how the rendering modes of Master CSS work and enhance your website's performance.
- Responsive DesignAdapt your user interface to different devices with flexible responsive syntax.
- Variables and ModesUnderstand how Master CSS resolves theme variables, emits CSS custom properties, and applies light, dark, and custom modes.
- View TransitionsCreate state and page transitions with the browser View Transition API and Master CSS syntax.
Design foundations 10
Build a consistent system for layout, color, type and motion.
- BreakpointsDefine viewport breakpoint tokens and use responsive variants for page-level layout, typography, and density changes.
- ColorsChoose palette steps, preset color roles, and mode-aware hue aliases for light and dark UI.
- ContainersUse container size tokens for reusable width caps, component dimensions, and container query variants.
- Corner RadiusUse radius tokens, pill shortcuts, circular shapes, and custom corner scales consistently.
- ElevationCreate depth with light and dark shadow tokens, layered surfaces, and state-aware elevation.
- Layout SystemBuild responsive layout systems with containers, columns, gutters, breakpoints, container sizes, spacing tokens, CSS Grid, and Flexbox.
- MotionCreate motion with managed keyframes, duration tokens, easing tokens, shorthands, and reduced-motion conditions.
- SizingChoose fluid dimensions, measured sizes, container caps, constraints, and responsive sizing rules for stable layouts.
- SpacingUse spacing tokens, native CSS lengths, and precise low-level values for layout rhythm.
- TypographyUse text scale tokens, font utilities, line height, letter spacing, families, and weights.
Build & delivery 5
Prepare and optimize your styles for production.
- BenchmarksRead reproducible Master CSS benchmarks for the runtime/CSSOM tradeoff: small runtime, fewer CSS rules, browser cost, and lifecycle behavior.
- Optimizing critical resourcesThe runtime engine plays a crucial role in the initial display of a page.
- Native CSS pruningUnderstand how Master CSS prunes unused native CSS class rules from managed stylesheets.
- Scanning latent classesUnderstand how Master CSS finds possible class names in source files and turns visible usage into generated CSS.
- Preventing flash of unstyled contentImprove the page loading experience and ensure seamless rendering of content.