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

Quick Start

This is just a quick start guide, the official documentation here.

1. Download

npm install @master/css

Or use a CDN

<script src="https://cdn.jsdelivr.net/npm/@master/css"></script>

2. Import

import '@master/css'

Hello World

<h1 class="font:40 font:heavy bg:blue:hover m:50 text:center@md">
    Hello World
</h1>

Next, learn the common Syntax - Master CSS!

Original Design

Master CSS Syntax: As a whole new language, Master created our own unique syntax.
Class Highlight: Master is the first language to highlight class names in markup.
Hybrid Rendering: Apply both JIT and AOT to CSS compilation. Similar to Hydration technology.
Group Styles ─ the one of groundbreaking features that allows you to extract the same selectors and media query styles and make it short. Inspired by SerKo.
Reactive Styles ─ the one of groundbreaking features that allows you style an element based on parent/sibling state.
Arbitrary selectors and media queries: Apply arbitrary selectors and media queries directly in class="", which is the most powerful and comprehensive language on the market.

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 CSS Language Service - A Visual Studio Code extension for Master CSS. Provides code-completion and syntax highlighting.
@master/normal.css - Normalize browser's styles. ~1KB
@master/style-element.react - Quickly create styled React elements with conditional class names.

@master/css