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.
Installation [sr-only]
-Install Master CSS
Install Master CSS into your project via package managers.
npm install @master/css@rcInitialize configuration file
Run npx mcss init to create a configuration file master.css.js.
npx mcss initSet 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
Get stuck? Check out our web framework or build tool guides for better starting points and recommendations.