Getting Started

Get started with Master CSS

Master CSS is a markup-driven CSS language with smart rules allowing you to write familiar CSS using concise syntax within HTML.

The easiest way to use Master CSS from scratch is to initialize the runtime engine directly in the application's entry file.

Install Master CSS

Install Master CSS into your project via package managers.

npm install @master/css@beta

Initialize configuration file

Run npx mcss init to create a configuration file master.css.js.

npx mcss init

Set up CSS runtime engine

Import and initialize the runtime engine in the entry file, such as main.js:

import { initRuntime } from '@master/css'
import config from './master.css'
 
initRuntime(config)

Start using Master CSS

Now style your first element using Master CSS syntax!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/main.js"></script>
</head>
<body>
    <h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
</body>
</html>

Open your browser to watch the changes.

localhost:8080

Hello World