Overview
Get started with Master CSS
This section walks you through learning and starting to use Master CSS.
Getting Started
Introduction to Master CSS
The CSS language and framework for rapidly building modern and high-performance websites.
Installing Master CSS
Master CSS supports multiple installation strategies, giving you the flexibility to tailor your workflow based on project scale or scenario.
Language Service for Master CSS
Enhance the developer experience in code editors or IDEs with syntax highlighting, code completion, and more.
Code Linting for Master CSS
An ESLint integration for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.
Migrating to Master CSS
Migrate your CSS technology to Master CSS and learn the differences and benefits.
Syntax Tutorial
Style Declarations
Master CSS covers all native CSS features with a structured syntax and simplifies CSS with smart rules.
State Selectors
Apply styles based on user interactions, element states, and other states.
Conditional Queries
Apply styles based on theme modes, print, breakpoints, and other queries.
Customization
Configuration
Implement your design system using the configuration API.
Creating Components
A guide to creating abstract component styles for your design system.
Customizing At-rules
A guide to adding custom at-rule tokens and aliases.
Customizing Colors
A guide to adding custom color tokens and aliases.
Customizing Fonts
Customizing fonts for your design system.
Customizing Functions
A guide to adding custom functions and aliases.
Customizing Screen Sizes
A guide to adding custom screen sizes for breakpoints, containers, and variables.
Customizing Selectors
A guide to adding custom selector tokens and aliases.
Customizing Syntax Rules
A guide to adding custom syntax rules.
Creating Utilities
A guide to adding custom utility classes.
Creating Variables
A guide to using variables to implement design tokens.
Fundamentals
Rendering Modes
Master CSS provides three rendering modes, which you can choose according to project scale and application scenarios to meet your business requirements.
Responsive Design
Adapt your user interface to different devices with flexible responsive syntax.
Browser Support
The core engine of Master CSS hardly affects CSS support for browsers.
Cascade Layers
Rely on layers to eliminate style overrides and conflicts.
Monorepo
A guide to setting up Master CSS in a modern repository.
Reusing Styles
A guide to reusing styles and code de-duplication.
Production Optimization
Optimizing critical resources
The runtime engine plays a crucial role in the initial display of a page.
Minimizing CSS
Reduce on-page CSS output and complexity using Master CSS APIs.
Preventing flash of unstyled content
Improve the page loading experience and ensure seamless rendering of content.
Get ready for the journey
Use documentation
You can embark on an in-depth study of Master CSS without prior CSS expertise. Each document features demonstrations and fundamental usages of the intended functionalities.
The Master CSS helps you lower the threshold for learning CSS.
A few notes on using these documents:
- Get an overview of almost all the documents via the navigation on the left side of the screen, and there are only a few categories.
- On the right side, you'll see a table of contents that makes navigating between page sections easier.
- Click the search box on the left side or use the shortcut Ctrl + K or ⌘ Command + K to search the entire site.
- Every class name in the document can preview the generated CSS rules by hovering.
<div class="hidden@<sm&>md">Try hovering over the class</div>
Try Master CSS online
You can use the official Master CSS Play to edit, preview, view the generated size, and even share your design online.
Join our community
If you have questions about Master CSS, you're always welcome to ask our community on:
- GitHub Discussions: Ask questions and share insights.
- Discord: Join real-time conversations with humans.
- Twitter: Stay updated on Master CSS
We're here to support your Master CSS journey!