4.8 KiB
4.8 KiB
Awesome Master CSS !Awesome (https://awesome.re/badge.svg) (https://github.com/sindresorhus/awesome)
▐ 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 (https://css.master.co) is a virtual CSS language with enhanced syntax, efficiently build your UI and design system with HTML only.
Contents
- Useful Links (#useful-links)
- IDE Extensions (#ide-extensions)
- Tools (#tools)
- Plugins (#plugins)
- Community (#community)
- Learning (#learning)
- Online Examples (#online-examples)
- Articles (#articles)
Useful Links
- Repository (https://github.com/master-co/css) - Master CSS repository.
- Documentation (https://docs.master.co/css) - Master CSS documentation.
IDE Extensions
- Master CSS Language Service (https://github.com/master-co/css/tree/beta/packages/language-service) - Provides code-completion and syntax highlighting for Visual Studio Code.
Tools
- Master Styles CSS Converter (https://github.com/serkodev/master-styles-css-converter) - Online convert CSS to Master styles.
- Master Sandbox (https://sandbox.master.co) - Master sandbox online editor.
Plugins
- @master/normal.css (https://github.com/master-co/css/tree/beta/packages/normal.css) - Normalize browser's styles.
- @master/keyframes.css (https://github.com/master-co/css/tree/beta/packages/keyframes.css) - Simple and useful CSS keyframes.
- @master/style-element.react (https://github.com/master-co/style-element.react) - Quickly create styled React elements with conditional class names.
- @master/literal (https://github.com/master-co/literal) - Conditionally construct class names and strings with template literals.
Community
- Discussions (https://github.com/master-co/css/discussions) - Official place to discussion.
- Discord channel (https://discord.gg/sZNKpAAAw6) - Channel to chat with Master community.
- Official Twitter (https://twitter.com/mastercorg) - Newly developed notifications about Master.
Learning
- Setup guide (https://docs.master.co/css/setup)
- Syntax tutorial (https://docs.master.co/css/syntax-tutorial) - Quick syntax guide for an enhanced and structured CSS syntax for class names.
- Master CSS Cheat Sheet (https://awilum.github.io/cheatsheets/mastercss) - Quickly search all syntax of Master CSS.
Online Examples
- Glassmorphism example (https://codepen.io/aron-tw/pen/LYOGzdY) - HTML only glassmorphism components by Master CSS.
- Interactive switch toggle example (https://codepen.io/aron-tw/pen/zYpyQyV) - A interactive switch toggle by Master CSS.
Articles
- Why Master CSS (https://docs.master.co/css/why-master-css) - Offical concepts and principles about Master CSS.
- Getting started with a whole new CSS language —— Master CSS (https://dev.to/aron/getting-started-with-a-whole-new-css-language-master-css-12l0)
- Rapidly create reusable React components in one line (https://dev.to/aron/rapidly-create-reusable-react-components-59fd)
▐ 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 (https://css.master.co) is a virtual CSS language with enhanced syntax, efficiently build your UI and design system with HTML only.
Contents
- Useful Links (#useful-links)
- IDE Extensions (#ide-extensions)
- Tools (#tools)
- Plugins (#plugins)
- Community (#community)
- Learning (#learning)
- Online Examples (#online-examples)
- Articles (#articles)
Useful Links
- Repository (https://github.com/master-co/css) - Master CSS repository.
- Documentation (https://docs.master.co/css) - Master CSS documentation.
IDE Extensions
- Master CSS Language Service (https://github.com/master-co/css/tree/beta/packages/language-service) - Provides code-completion and syntax highlighting for Visual Studio Code.
Tools
- Master Styles CSS Converter (https://github.com/serkodev/master-styles-css-converter) - Online convert CSS to Master styles.
- Master Sandbox (https://sandbox.master.co) - Master sandbox online editor.
Plugins
- @master/normal.css (https://github.com/master-co/css/tree/beta/packages/normal.css) - Normalize browser's styles.
- @master/keyframes.css (https://github.com/master-co/css/tree/beta/packages/keyframes.css) - Simple and useful CSS keyframes.
- @master/style-element.react (https://github.com/master-co/style-element.react) - Quickly create styled React elements with conditional class names.
- @master/literal (https://github.com/master-co/literal) - Conditionally construct class names and strings with template literals.
Community
- Discussions (https://github.com/master-co/css/discussions) - Official place to discussion.
- Discord channel (https://discord.gg/sZNKpAAAw6) - Channel to chat with Master community.
- Official Twitter (https://twitter.com/mastercorg) - Newly developed notifications about Master.
Learning
- Setup guide (https://docs.master.co/css/setup)
- Syntax tutorial (https://docs.master.co/css/syntax-tutorial) - Quick syntax guide for an enhanced and structured CSS syntax for class names.
- Master CSS Cheat Sheet (https://awilum.github.io/cheatsheets/mastercss) - Quickly search all syntax of Master CSS.
Online Examples
- Glassmorphism example (https://codepen.io/aron-tw/pen/LYOGzdY) - HTML only glassmorphism components by Master CSS.
- Interactive switch toggle example (https://codepen.io/aron-tw/pen/zYpyQyV) - A interactive switch toggle by Master CSS.
Articles
- Why Master CSS (https://docs.master.co/css/why-master-css) - Offical concepts and principles about Master CSS.
- Getting started with a whole new CSS language —— Master CSS (https://dev.to/aron/getting-started-with-a-whole-new-css-language-master-css-12l0)
- Rapidly create reusable React components in one line (https://dev.to/aron/rapidly-create-reusable-react-components-59fd)