Getting Started

Get started with Master CSS

Master CSS allows you to install from package managers, copy and paste from CDNs, and even integrate with frameworks.

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

Installation

Install Master CSS

Install Master CSS Runtime into your project via package managers.

npm install @master/css-runtime@rc

Initialize configuration file

Run npm create @master/css@rc to create a configuration file master.css.js.

npm create @master/css@rc

Set up CSS runtime engine

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

import { initCSSRuntime } from '@master/css-runtime'
import config from './master.css'
initCSSRuntime(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:12x text:center">Hello World</h1>
</body>
</html>

Open your browser to watch the changes.

localhost:8080

Hello World


Get stuck? Check out our web framework or build tool guides for better starting points and recommendations.

Getting Started
Introduction

Get a quick overview of Master CSS and its benefits.

Getting Started
Language Service for Master CSS

Enhance the developer experience in code editors or IDEs with syntax highlighting, code completion, and more.

© Aoyue Design LLC.