Steps
Each action beside its explanation and complete code; the numbered rail follows reading order.
Installation sequence
Create a project
Start from a Vite project when you do not have an app yet.
npm create vite@latest my-appcd my-appAdd Master CSS
Run the installer from the project root.
npm create @master/css@rc -- --yesRun and style
Start the dev server, then use Master CSS classes in your markup.
npm run dev
Used on the installation guides.
Usage and interface
Use StepSection for a setup sequence with authored headings and code. The list numbers each Step beside its authored heading with plain, tabular 01, 02, 03 labels and a fine connecting line. Do not enclose the numbers in circles or badges. Keep the action in the heading and its expected result in the prose. Reading order stays in the document.
import Code from '@master/internal-site/components/Code'import StepSection, { Step, StepL, StepR } from '@master/internal-site/components/StepSection'<StepSection> <Step $row> <StepL> <h3>Connect the stylesheet</h3> <p>Import the entry in your app.</p> </StepL> <StepR> <Code lang="css">{"@import '@master/css';"}</Code> </StepR> </Step></StepSection>The components are server rendered. Supply native headings at the appropriate level and preserve their stable IDs. Numbering is decorative, not a replacement for headings or a progress indicator. The numbered rail and optional columns are the same treatment used in Guide. The 46rem container threshold controls the optional two-column layout; narrower columns stack in reading order, and code retains its own horizontal scroll. Keep a preview with the step whose result it demonstrates; its tray owns the spacing between preview and source.
Use the same sequence pattern across installations:
- Quick start, Vite, CLI and VS Code pair each action with its result.
- Webpack, Rspack and Rsbuild keep full configuration files readable.
- Astro and SvelteKit connect layouts with server hooks.
- Express, PHP and Rails connect independently built assets with complete server templates.
- Laravel, WordPress and Shopify preserve the host's asset helpers and layout hooks.
- ASP.NET Core and Blazor make asset-build, host-build and publication order explicit.
Keep the complete template and its appearance preview together in one tray. DemoConfiguredExample
uses literal source to keep displayed classes and rendered samples aligned; a
preview does not run the host framework. Keep setup constraints in the lesson.
#Installation navigation
Installation presents Integrations, CDN and CLI as sections of one article. Use ordinary links to its section anchors; framework guides remain separate pages with their own Page Content. Rendering modes are sections within each framework guide.