Master CSS

A Virtual CSS language with enhanced syntax ~13KB

README



logo

CSS

A Virtual CSS language with enhanced syntax. ~13KB

MIT License Latest Release Bundle Size') Package Size') Documentation Github Discord CI


image

- Visit css.master.co for full documentation.
- Browse our discussion community.
- Join our discord channel.
- Follow our twitter.

On this page


Features

Let's have a quick overview of the groundbreaking features of Master CSS:

- 🔥 A whole new CSS language instead of utilities/libraries.
- 🔓 Write CSS properties, functions, selectors and even media queries directly in class="...".
- 🧠 Automatically generate corresponding CSS rules based on class names.
- 💖 With enhanced CSS syntax, you can build UIs with less code.
- ⚡️ Directly use performant JIT in production. ~13KB
- 🌈 A forerunner to syntax highlighting for class names.
- ✨ Hybrid Rendering that allows you topre-generate CSS from HTML on the server side, and then continue to use JIT on the client side.
- ✨ Group Styles that allows you to extract the same selectors and media query styles and make it short.
- ✨ Reactive Styles that allows you to style an element based on parent/sibling state.

To learn more, check out the documentation.

A brief introduction starts by giving you an understanding of markup-driven CSS.

😐 Traditional
  1. ``` html
  2. <style>
  3.     .home-section {
  4.         background-color: blue;
  5.         padding: 2rem;
  6.         text-align: center;
  7.     }
  8.     .home-section:hover {
  9.         background-color: red;
  10.     }
  11.     @media (min-width: 1024px) {
  12.         .home-section {
  13.             padding: 3rem;
  14.         }
  15.     }
  16. </style>
  17. <section class="home-section">...</section>
  18. ```
🤩 Now, refactor it with a whole new CSS language to make it easier. ↓ 86% code
  1. ``` html
  2. <section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>
  3. ```
To learn more, check out the Why Master CSS documentation.

Quick Start

This is a quick start guide, check out the full setup guide to integrate with your build tools and frameworks.

  1. ``` sh
  2. npm install @master/css
  3. ```
  1. ``` js
  2. import '@master/css';
  3. ```
or use a CDN
  1. ``` html
  2. <script src="https://cdn.master.co/css"></script>
  3. ```
Now, start styling HTML with Master CSS. 🎉
  1. ``` html
  2. <h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
  3. ```
To learn more, check out the Syntax tutorial documentation.

Developer Tools

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

Inspiration

Some of our core concepts and designs are inspired by these giants.
- __Language__ - Master is a language, but it was originally inspired by ACSS's concept of atomic classes.
- __Virtual CSS__ - Difference algorithms, virtual models, etc. are inspired by  Virtual DOM.

Related

- @master/normal.css - Normalize browser's styles. ~1KB
- @master/keyframes.css - Simple and useful CSS keyframes. ~0.4KB
- @master/style-element.react - Quickly create styled React elements with conditional class names. ~800B