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 allows you to install from package managers, copy-paste CDNs, and even integrate with frameworks.
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.
General Installation
The easiest way to use Master CSS from scratch is to initialize the runtime engine directly in the entry file.
Monorepo
A guide to setting up Master CSS in a modern repository.
Using CDNs
Copy and paste CDNs to instantly launch the runtime engine in your browser out of the box.
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.
Responsive Design
Adapt your user interface to different devices with flexible responsive syntax.
Customization
Configuration
Implement your design system using the configuration API.
Global Styles
Normalize browser and preset global styles for more concise-style programming.
Creating Variables
A guide to using variables to implement design tokens.
Syntaxes
A guide to customizing declarations, selectors, functions, and at-rules in syntax.
Styles
A guide to creating abstract styles for your design system.
Animations
Customizing animation keyframes for your design system.
Utilities
Customizing utility classes for your design system.
Fundamentals
Rendering Modes of Master CSS
Master CSS provides three rendering modes, which you can choose according to project scale and application scenarios to meet your current business requirements.
Markup-driven CSS
Master CSS styles are driven by template markups and generate CSS rules on demand.
Browser Support
The core engine of Master CSS hardly affects CSS support for browsers.
Reusing Styles
A guide to reusing styles and code de-duplication.
Production Optimization
Minimizing CSS
Reduce on-page CSS output and complexity using Master CSS APIs.
Preloading critical resources
The runtime engine plays a crucial role in the initial display of a page.
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!