Getting Started

Set up Master CSS in Parcel

A quick guide to start using Master CSS in your Parcel project.

Quick start

1. Create a Parcel project

If you don't have a Parcel project, create one first. It's recommended to refer Getting Started :

mkdir project
cd project

npm init -y 
npm install --save-dev parcel

2. Installation

npm install @master/css

3. Import

Create a index.html and index.js.

import '@master/css';

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <script type="module" src="index.js"></script>
    <title>My First Parcel App</title>
</head>
<body>
    <h1 class="font:40 font:heavy italic m:50 text:center">
        Hello World
    </h1>
</body>
</html>

4. Launch server

npx parcel index.html

Hello world

Now, start developing your UI with Master CSS. 🎉

localhost:1234

Hello World

Hello world

.font\:heavy {
    font-weight: 900
}

@media print {
    .hide\@print {
        display: none
    }
}

@media (min-width:1024px) {
    .font\:24\@md {
        font-size: 1.5rem
    }
}

automatically