Master CSS

Awesome Master CSS

Automatically generate corresponding CSS rules based on class names, with enhanced CSS syntax, you can build UIs with less code and directly use performant JIT in production.

Master CSS is a virtual CSS language with enhanced syntax, efficiently build your UI and design system with HTML only.

Useful Links

• Repository - Master CSS repository.
• Documentation - Master CSS documentation.

IDE Extensions

• Master CSS Language Service - Provides code-completion and syntax highlighting for Visual Studio Code.

Tools

• Master Styles CSS Converter - Online convert CSS to Master styles.
• Master Sandbox - Master sandbox online editor.

Plugins

• @master/normal.css - Normalize browser's styles.
• @master/keyframes.css - Simple and useful CSS keyframes.
• @master/style-element.react - Quickly create styled React elements with conditional class names.
• @master/literal - Conditionally construct class names and strings with template literals.

Community

• Discussions - Official place to discussion.
• Discord channel - Channel to chat with Master community.
• Official Twitter - Newly developed notifications about Master.

Learning

• Setup guide
• Syntax tutorial - Quick syntax guide for an enhanced and structured CSS syntax for class names.
• Master CSS Cheat Sheet - Quickly search all syntax of Master CSS.

Online Examples

• Glassmorphism example - HTML only glassmorphism components by Master CSS.
• Interactive switch toggle example - A interactive switch toggle by Master CSS.

Articles

• Why Master CSS - Offical concepts and principles about Master CSS.
• Getting started with a whole new CSS language —— Master CSS
• Rapidly create reusable React components in one line

_{Contributions welcome! Read the contribution guidelines first.}