@master/css

The CSS language and framework for rapidly building modern and high-performance websites

Documentation

Visit rc.css.master.co to view the full documentation

Getting Started

Check out the official guides to get started with Master CSS, or walk through the examples for a quick overview of integrating with your framework.

Rendering Modes

Master CSS provides various rendering modes, allowing you to choose according to the characteristics and needs of different projects.

• Progressive Rendering - Scan the requested HTML on the server side, generate CSS rules, and enable runtime engine on the browser side
• Runtime Rendering - Observe the DOM tree, manipulate CSS rules according to the changed class name, and synchronize to the running style sheet at runtime
• Static Extraction - Scan source files for class names at build time, extract class names, and generate CSS files/virtual modules, then import them in the entry file

Ecosystem

We've built various Master CSS core functionality/integration packages:

• CSS - The core of Master CSS, including the runtime engine

Frameworks

• React - Integrate Master CSS the React way
• Svelte - Integrate Master CSS the Svelte way
• Vue - Integrate Master CSS the Vue.js way

Progressive Rendering

• Server - Generate Master CSS text from markup on the server
• Renderer - Pre-renders and injects HTML-required CSS

Static Extraction

• Extractor - Master CSS static extractor for various raw text extraction.
• Vite - Integrate Master CSS Static Extraction in Vite way
• Webpack - Integrate Master CSS Static Extraction in Webpack way

Validation

• Validator for Master CSS class syntax

Language

• Server - The core of the Master CSS language server
• Service - The core of the Master CSS language service
• Visual Studio Code - Master CSS Language Service for Visual Studio Code Extension

Others

• Normal CSS - Normalize the browser's styles
• Theme Service - A CSS theme-switching service for Master CSS
• Class Variant - Create reusable, extensible, and customizable style class variants

Community

The Master CSS community can be found here:

• Discuss on GitHub - Ask questions, voice ideas, and do any other discussion
• Join our Discord Server - Casually chat with other people using the language ^{_{✓ 中文}}

_{Our 《 Code of Conduct 》 applies to all Master CSS community channels.}

Contributing

Please see our CONTRIBUTING for workflow.

Inspiration

Some of the core concepts and designs are inspired by these giants.

• The concept of enhanced syntax is inspired by SASS and TypeScript
• The concept of Virtual CSS is inspired by the Virtual DOM