Package Exports

@master/css
@master/css/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@master/css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CSS

A Virtual CSS language with enhanced syntax. ~13KB

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

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 CSS syntax enhancements, you can create UIs with less code.
⚡️ The JIT mode is only ~13KB.
💖 Directly use performant JIT mode in production.
🧬 An enhanced and structured CSS syntax for class names.
🌈 A forerunner to syntax highlighting for class names.
✨ Hybrid Rendering that allows you to pre-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.
... css.master.co

Why Master CSS

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

🙁 This is your current/traditional code:

<style>
    .home-section {
        background-color: blue;
        padding: 2rem;
        text-align: center;
    }

    .home-section:hover {
        background-color: red;
    }

    @media (min-width: 1024px) {
        .home-section {
            padding: 3rem;
        }
    }
</style>

<section class="home-section">...</section>

🤩 Now, refactor it with a whole new CSS language to make it easier. ↓ 86% code

<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>

To learn more, check out the documentation Why Master CSS.

Quick Start

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

Install

npm install @master/css

or use a CDN

<script src="https://cdn.master.co/css"></script>

Import

Import to your entry file. e.g: src/main.js

import '@master/css';

Hello world

Now, start styling HTML with Master CSS 🎉

<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>

To learn more, check out the documentation Syntax tutorial.

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.

@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.

Developer tools

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

@master/css