Awesome
<br> <div align="center"> <p align="center"> <a href="https://css.master.co"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/33840671/201701649-3bb7d698-abec-4d5f-ac30-ccc4d7bafcd4.svg"> <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg"> <img alt="Master CSS" src="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg" width="100%"> </picture> </a> </p> <p align="center"><!-- package.description -->A Virtual CSS language with enhanced syntax ~15KB<!----></p> <p align="center"> <a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=212022&label=&style=for-the-badge&logo=github&logoColor=fff"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github&logoColor=%23000"> <img alt="NPM Version" src="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github"> </picture> </a> <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/css"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@master/css?color=212022&label=%20&logo=npm&style=for-the-badge"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dm/@master/css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge"> <img alt="NPM package ( download / month )" src="https://img.shields.io/npm/dm/@master/css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge"> </picture> </a> <a aria-label="JSDelivr" href="https://www.jsdelivr.com/package/npm/@master/css"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=212022&label=%20&logo=jsdelivr&style=for-the-badge"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=f6f7f8&label=%20&logo=jsdelivr&style=for-the-badge"> <img alt="JSDelivr hits (npm scoped)" src="https://img.shields.io/jsdelivr/npm/hm/@master/css?color=f6f7f8&label=%20&logo=jsdelivr&style=for-the-badge"> </picture> </a> <a aria-label="Discord Community" href="https://discord.gg/sZNKpAAAw6"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/discord/917780624314613760?color=212022&label=%20&logo=discord&style=for-the-badge"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge"> <img alt="Discord online" src="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge"> </picture> </a> <a aria-label="Follow @mastercorg" href="https://twitter.com/mastercorg"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=212022&logo=twitter&style=for-the-badge"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge"> <img alt="Follow @mastercorg" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge"> </picture> </a> <a aria-label="Github Actions" href="https://github.com/1aron/repo/actions/workflows/release.yml"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000"> <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000"> </picture> </a> </p> </div>Documentation
Visit css.master.co to view the full documentation
Getting Started
Check out the guides to get started with Master CSS
Ecosystem
We've built various integrations and tools around Master CSS:
Build Tools
- Vite Plugin - A vite plugin for integrating Master CSS AOT compilation
- Webpack Plugin - A webpack plugin for integrating Master CSS AOT compilation
- Compiler - The ahead-of-time compiler of Master CSS
Frameworks
- React - React hooks for Master CSS
- Style Element <sub><sup>React, Vue, ...</sup></sub> - Create reusable style elements using class names in one-linear.
Native Plugins
- Normal CSS - Normalize the browser's styles
- Keyframes CSS - Simple and useful CSS keyframes
Extensions
- Language Service <sub><sup>Visual Studio Code</sup></sub> - Includes code completion, syntax highlighting, CSS hover preview, and inline color decorators
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 <sup><sub>✓ 中文</sub></sup>
<sub>Our 《 Code of Conduct 》 applies to all Master CSS community channels.</sub>
Contributing
Please see our CONTRIBUTING.md 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