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 enhanced CSS syntax, you can build UIs with less code.
⚡️ Directly use performant JIT in production. ~13KB
🧬 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.

To learn more, check out the documentation.

Why Master CSS

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

😐 Traditional

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

npm install @master/css

import '@master/css';

or use a CDN

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

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

@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

@master/css