109 lines
4.8 KiB
HTML
109 lines
4.8 KiB
HTML
<h1 id="awesome-master-css-awesome">Awesome Master CSS <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://awesome.re/badge.svg" alt="Awesome" /></a></h1>
|
||
<p><a href="https://github.com/master-co/css#readme"><picture><source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/33840671/205240887-0e354830-f0d4-4eb6-b604-9f7b8112c92c.svg"><source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/33840671/205238744-7355106d-d454-4b3d-a40a-7b19e34ddb9d.svg"><img alt="Master CSS" src="https://user-images.githubusercontent.com/33840671/205238744-7355106d-d454-4b3d-a40a-7b19e34ddb9d.svg" height="60" width="350" align="right"></picture></a></p>
|
||
<blockquote>
|
||
<p>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.</p>
|
||
</blockquote>
|
||
<p><a href="https://css.master.co">Master CSS</a> is a virtual CSS
|
||
language with enhanced syntax, efficiently build your UI and design
|
||
system with HTML only.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#useful-links">Useful Links</a></li>
|
||
<li><a href="#ide-extensions">IDE Extensions</a></li>
|
||
<li><a href="#tools">Tools</a></li>
|
||
<li><a href="#plugins">Plugins</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
<li><a href="#learning">Learning</a></li>
|
||
<li><a href="#online-examples">Online Examples</a></li>
|
||
<li><a href="#articles">Articles</a></li>
|
||
</ul>
|
||
<h2 id="useful-links">Useful Links</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/master-co/css">Repository</a> - Master
|
||
CSS repository.</li>
|
||
<li><a href="https://docs.master.co/css">Documentation</a> - Master CSS
|
||
documentation.</li>
|
||
</ul>
|
||
<h2 id="ide-extensions">IDE Extensions</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/master-co/css/tree/beta/packages/language-service">Master
|
||
CSS Language Service</a> - Provides code-completion and syntax
|
||
highlighting for Visual Studio Code.</li>
|
||
</ul>
|
||
<h2 id="tools">Tools</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/serkodev/master-styles-css-converter">Master
|
||
Styles CSS Converter</a> - Online convert CSS to Master styles.</li>
|
||
<li><a href="https://sandbox.master.co">Master Sandbox</a> - Master
|
||
sandbox online editor.</li>
|
||
</ul>
|
||
<h2 id="plugins">Plugins</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/master-co/css/tree/beta/packages/normal.css"><span
|
||
class="citation"
|
||
data-cites="master/normal.css">@master/normal.css</span></a> - Normalize
|
||
browser’s styles.</li>
|
||
<li><a
|
||
href="https://github.com/master-co/css/tree/beta/packages/keyframes.css"><span
|
||
class="citation"
|
||
data-cites="master/keyframes.css">@master/keyframes.css</span></a> -
|
||
Simple and useful CSS keyframes.</li>
|
||
<li><a href="https://github.com/master-co/style-element.react"><span
|
||
class="citation"
|
||
data-cites="master/style-element.react">@master/style-element.react</span></a>
|
||
- Quickly create styled React elements with conditional class
|
||
names.</li>
|
||
<li><a href="https://github.com/master-co/literal"><span
|
||
class="citation" data-cites="master/literal">@master/literal</span></a>
|
||
- Conditionally construct class names and strings with template
|
||
literals.</li>
|
||
</ul>
|
||
<h2 id="community">Community</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/master-co/css/discussions">Discussions</a> -
|
||
Official place to discussion.</li>
|
||
<li><a href="https://discord.gg/sZNKpAAAw6">Discord channel</a> -
|
||
Channel to chat with Master community.</li>
|
||
<li><a href="https://twitter.com/mastercorg">Official Twitter</a> -
|
||
Newly developed notifications about Master.</li>
|
||
</ul>
|
||
<h2 id="learning">Learning</h2>
|
||
<ul>
|
||
<li><a href="https://docs.master.co/css/setup">Setup guide</a></li>
|
||
<li><a href="https://docs.master.co/css/syntax-tutorial">Syntax
|
||
tutorial</a> - Quick syntax guide for an enhanced and structured CSS
|
||
syntax for class names.</li>
|
||
<li><a href="https://awilum.github.io/cheatsheets/mastercss">Master CSS
|
||
Cheat Sheet</a> - Quickly search all syntax of Master CSS.</li>
|
||
</ul>
|
||
<h2 id="online-examples">Online Examples</h2>
|
||
<ul>
|
||
<li><a href="https://codepen.io/aron-tw/pen/LYOGzdY">Glassmorphism
|
||
example</a> - HTML only glassmorphism components by Master CSS.</li>
|
||
<li><a href="https://codepen.io/aron-tw/pen/zYpyQyV">Interactive switch
|
||
toggle example</a> - A interactive switch toggle by Master CSS.</li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<ul>
|
||
<li><a href="https://docs.master.co/css/why-master-css">Why Master
|
||
CSS</a> - Offical concepts and principles about Master CSS.</li>
|
||
<li><a
|
||
href="https://dev.to/aron/getting-started-with-a-whole-new-css-language-master-css-12l0">Getting
|
||
started with a whole new CSS language —— Master CSS</a></li>
|
||
<li><a
|
||
href="https://dev.to/aron/rapidly-create-reusable-react-components-59fd">Rapidly
|
||
create reusable React components in one line</a></li>
|
||
</ul>
|
||
<p align="center">
|
||
<br/> <br/> <br/> <sub>Contributions welcome! Read the
|
||
<a href="./contributing.md">contribution guidelines</a> first.</sub>
|
||
</p>
|