virtual CSS
comes into the world

Performance and Productivity
upgrade to an whole new dimension.

Less than

13KB
All features included

Down to

0.1ms
Intelligent matching

No limit

∞
Style variants
Get Started
index.html
    
<head>
    <title>Master Styles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
    <script src="https://unpkg.com/@master/style"></script>
    <script src="https://unpkg.com/@master/styles"></script>
</head>
<body>
    <h1 class="font:heavy blend:color-dodge line-height:1 letter-spacing:-.25">
        <div class="
            
        ">virtual CSS</div>
        <div class="">
            comes into the world
        </div>
    </h1>
    <video playsinline autoplay loop muted
           class="scale(1.25)">...</video>
</body>

A Virtual CSS language with enhanced syntax

Starting with an all-powerful design engine instead of a constraint-heavy utility.

we unlock everything you need in class="…"

style
:selector
breakpoint
function()
color
scheme
@media
@supports
clothes
texture crew sweater
Designed for on the move
$120.0 USD
size
Get delivery dates
style

172+ styles out of the box

All styles are enabled with zero-configuration, use familiar CSS to style elements like margin:16 ( or shorthand m:16 ). Everything is done in HTML.

Get Started
product.html
    
<div class="background:gray-87 padding:10 border-radius:10 max-width:350">
    <img class="object:cover width:100% aspect:1/1 border-radius:5" src="/assets/images/clothes.jpeg" loading="lazy" alt="clothes">
    <div class="margin-top:10 padding:15">
        <div class="font:24 font:bold text:capitalize">texture crew sweater</div>
        <div class="font:14 font:gray-34 margin-top:5">Designed for on the move</div>
        <div class="margin-top:12 font:semibold">$120.0 USD</div>
        <div class="margin-top:12 display:flex gap:8">
            <button class="aspect:1/1 width:40 height:40 font:0 round border:1;solid;gray-78 padding:3">
                <div class="background:#fff width:100% height:100% round">white</div>
            </button>
            <button class="aspect:1/1 width:40 height:40 font:0 round border:1;solid;gray-78 padding:3">
                <div class="background:#999 width:100% height:100% round">white</div>
            </button>
            <button class="aspect:1/1 width:40 height:40 font:0 round border:1;solid;gray-78 padding:3">
                <div class="background:#333 width:100% height:100% round">white</div>
            </button>
        </div>
        <div class="margin-top:20 font:12 font:semibold letter-spacing:2 font:gray-34 text:uppercase">size</div>
        <div class="margin-top:12 display:flex gap:8">
            <button class="border:1;solid;gray-78 padding:10;15 border-radius:3 font:14 font:semibold">XS</button>
            <button class="background:gray-78 padding:10;15 r:3 font:14 font:semibold">S</button>
            <button class="border:1;solid;gray-78 padding:10;15 border-radius:3 font:14 font:semibold">M</button>
            <button class="border:1;solid;gray-78 padding:10;15 border-radius:3 font:14 font:semibold">L</button>
            <button class="border:1;solid;gray-78 padding:10;15 border-radius:3 font:14 font:semibold">XL</button>
        </div>
        <a class="font:gray-34 font:12 text:underline mt:20 inline-block" href="/"> Get delivery dates</a>
    </div>
</div>
modern effects 1 modern effects 2 modern effects 3 modern effects 4 modern effects 5
style

Modern effects couldn't be easier.

Want to add filter, transform, and grid to an element ?

We've provided shorthand values like scale(2), blur(5) to make it easier for you to implement modern CSS effects.

Get Started
girl.html
    
<div class="grid-cols:3 gap:10 width:full>img align-items:center object:cover>img">
    <img class="rotate(-8) aspect:2/3" src="https://images.pexels.com/photos/1624504/pexels-photo-1624504.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" loading="lazy" alt="modern effects 1">
    <img class="translateY(-80) blur(5) aspect:2/3" src="https://images.pexels.com/photos/312491/pexels-photo-312491.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" loading="lazy" alt="modern effects 2">
    <img class="transform:scale(.8);rotate(8) aspect:2/3" src="https://images.pexels.com/photos/1382731/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" loading="lazy" alt="modern effects 3">
    <img class="sepia(1) translate(-40,20) mask-image:linear-gradient(black,transparent) aspect:2/3" src="https://images.pexels.com/photos/4365100/pexels-photo-4365100.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" loading="lazy" alt="modern effects 4">
    <img class="scale(1.1) blend:lighten grayscale(1) grid-col:2/2;span grid-row:2/2;span aspect:2/3 mt:-50" src="https://images.pexels.com/photos/2010877/pexels-photo-2010877.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" loading="lazy" alt="modern effects 5">
</div>
Master Coffee
logo
style

Bring elements to life.

Dynamically add delays, durations, and transitions.

In addition to the original CSS syntax, there are succinct symbols that provide powerful functionalities, e.g. @ ( animation ) and ~ ( transition )

Learn more about Animations
home.html
    
<div class="scale(1.2):hover>img rel border-radius:5 max-width:350 width:full aspect:1/1 overflow:hidden">
    <video class="abs inset:0;0 width:full height:full object:cover contain:layout" src="/assets/videos/coffee.mp4" playsinline autoplay loop muted></video>
    <div class="abs bottom:0 left:0 height:full width:full padding:25 display:flex align-items:end bg:linear-gradient(0deg,rgba(0,0,0,.8);0%,rgba(0,0,0,0);100%)">
        <div class="display:flex gap:10 align-items:center">
            <svg class="width:10 height:10 fill:green overflow:visible" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <circle cx="50" cy="50" r="40"/>
                <circle class="@ping;1.2s;infinite transform:center opacity:.5" cx="50" cy="50" r="60"/>
            </svg>
            Master Coffee
        </div>
    </div>
    <img class="~transform;.3s;ease blend:difference abs inset:0 margin:auto width:128 height:128 contain:layout" src="/assets/images/logo.svg" loading="lazy" alt="logo">
</div>
  • avatar
    aron
    3:03 a.m

    Front-end needs a revolution

  • avatar
    joy
    7:38 p.m

    Shilin night market later 🥰 ?

  • avatar
    miles
    5 mins ago

    task done 🙌🏻

  • avatar
    benseage
    3 hours ago

    No algorithm is hard for me 😎

  • avatar
    lola
    11 seconds ago

    Let me write the doc !

selector

Yay ! Selectors are now possible.

You never thought using :hover, :before, ::placeholder, :where() and all CSS selectors directly in HTML.

Learn more about Selectors
chats.html
    
<div class="padding:8;20_li padding:10;0 bg:gray-1 bg:[email protected] border-radius:10 width:full">
    <input placeholder="Search for chats and messages" type="search"
           class="
               bg:fade-5:focus opacity:.5[disabled]
               font:fade-34::placeholder hidden::search-cancel-button
               outline:0 font:14 block width:calc(100%-1.25rem) mx:10 padding:8;10 border-radius:5
           ">
    <ul class="@shake;1s;infinite>li:nth-child(2) bg:fade-5>li.active list-style:none mt:10">
        <li class="bg:fade-5:hover bg:fade-7:active display:flex gap:12 cursor:pointer">
            <div class="rel">
                <img src="/assets/images/users/aron.jpg" width="40" height="40" class="round object:cover" loading="lazy" alt="avatar"/>
                <svg class="abs right:1 bottom:1 bg:green-59 outline:2;solid;white outline:[email protected] round width:7 height:7"></svg>
            </div>
            <div>
                <div class="display:flex align-items:center">
                    <div class="text:14 font:medium font:[email protected] text:capitalize">aron</div>
                    <div class="font:12 font:fade-45 font:[email protected] ml:8">3:03 a.m</div>
                </div>
                <p class="text:13 m:0">Front-end needs a revolution</p>
            </div>
        </li>
        <li class="bg:fade-5:hover bg:fade-7:active display:flex gap:12 cursor:pointer">
            <div class="rel">
                <img src="/assets/images/users/joy.jpg" width="40" height="40" class="round object:cover" loading="lazy" alt="avatar"/>
                <svg class="abs right:1 bottom:1 bg:green-59 outline:2;solid;white outline:[email protected] round width:7 height:7"></svg>
            </div>
            <div>
                <div class="display:flex align-items:center">
                    <div class="text:14 font:medium font:[email protected] text:capitalize">joy</div>
                    <div class="font:12 font:fade-45 font:[email protected] ml:8">7:38 p.m</div>
                </div>
                <p class="text:13 m:0">Shilin night market later 🥰 ?</p>
            </div>
        </li>
        <li class="bg:fade-5:hover bg:fade-7:active display:flex gap:12 cursor:pointer">
            <div class="rel">
                <img src="/assets/images/users/miles.jpg" width="40" height="40" class="round object:cover" loading="lazy" alt="avatar"/>
                
            </div>
            <div>
                <div class="display:flex align-items:center">
                    <div class="text:14 font:medium font:[email protected] text:capitalize">miles</div>
                    <div class="font:12 font:fade-45 font:[email protected] ml:8">5 mins ago</div>
                </div>
                <p class="text:13 m:0">task done 🙌🏻</p>
            </div>
        </li>
        <li class="bg:fade-5:hover bg:fade-7:active display:flex gap:12 cursor:pointer">
            <div class="rel">
                <img src="/assets/images/users/benseage.jpg" width="40" height="40" class="round object:cover" loading="lazy" alt="avatar"/>
                
            </div>
            <div>
                <div class="display:flex align-items:center">
                    <div class="text:14 font:medium font:[email protected] text:capitalize">benseage</div>
                    <div class="font:12 font:fade-45 font:[email protected] ml:8">3 hours ago</div>
                </div>
                <p class="text:13 m:0">No algorithm is hard for me 😎</p>
            </div>
        </li>
        <li class="bg:fade-5:hover bg:fade-7:active display:flex gap:12 cursor:pointer">
            <div class="rel">
                <img src="/assets/images/users/lola.jpg" width="40" height="40" class="round object:cover" loading="lazy" alt="avatar"/>
                
            </div>
            <div>
                <div class="display:flex align-items:center">
                    <div class="text:14 font:medium font:[email protected] text:capitalize">lola</div>
                    <div class="font:12 font:fade-45 font:[email protected] ml:8">11 seconds ago</div>
                </div>
                <p class="text:13 m:0">Let me write the doc !</p>
            </div>
        </li>
    </ul>
</div>
breakpoint

Responsive design. Have it anywhere.

The preset 10 responsive breakpoints @[email protected] are suitable for most situations and devices. You can not only apply arbitrary breakpoints like @>=1234 but operators..

Your users will experience the best layouts, from the smallest, to the largest 5K screens.

Learn more about Breakpoints
card.html
    
<div class="padding:30 abs inset:0 margin:auto width:fit height:fit">
    <div class="max-width:560@xs bg:gray-1 bg:[email protected] display:flex flex:wrap border-radius:10 max-width:300 mx:auto box-shadow:0;8;20;rgba(0,0,0,.12) overflow:hidden">
        <img src="/assets/images/foods/sushi.jpg"
                class="aspect:1/1@xs margin:10@xs width:180@xs order:1@xs aspect:16/9 min-width:0 border-radius-top:inherit object:cover" loading="lazy" alt="sushi">
        <div class="padding:25 flex:1 display:flex flex:col">
            <div class="text:24 font:bold">Sushi</div>
            <div class="text:14 font:fade-68 font:[email protected] lines:3 margin-top:8 margin-bottom:10">
                Sushi is a traditional Japanese dish of prepared
                vinegared rice, usually with some sugar and salt, accompanied by a variety of
                ingredients, such as seafood, often raw, and vegetables.</div>
            <div class="text:12 letter-spacing:1 margin-top:auto">🇯🇵 Japanese</div>
        </div>
    </div>
</div>

Stay lazy for better experience.

Less learning, less coding, and less maintaining.

Succinct Choices

Shorthands, acronyms, and symbols.

Intelligent Rules

Sorting CSS by behavior or breakpoints.

Human-readable

Expressing the appearance through class.

🤮 Eww... class names is too long.

    
<p class="animation-name:fade animation-duration:1s animatino-timing-function:ease transition-property:opacity transition-duration:.3s margin-top:1rem margin-bottom:1rem margin-right:2rem margin-left:2.5rem"></p>

use shorthands ↓ 62% code 

    
<p class="animation:fade;1s;ease transition:opacity;.3s margin:16;32;16;40"></p>

or symbols and acronyms ↓ 74% code 

    
<p class="@fade;1s;ease ~opacity;.3s m:16;32;16;40"></p>
Learn more about Syntax

😨 CSS directly. Too weird ?

    
<div class="display:block font-weight:700 aspect:1/1 border-radius:50% width:fit-content position:relative visibility:invisible isolation:isolate"></div>

It's semantics. A more elegant way. ↓ 48% code 

    
<div class="block font:bold square round width:fit rel invisible isolate"></div>
Learn more about Syntax

😵‍💫 Build complex environments ? No need.

This's a standalone package written entirely in JS, just import the package as usual to start production. No more waiting for CSS compilation.

Quick Start with zero configuration
Webpack
file_type_grunt
Grunt
Sass
Autoprefixer
file_type_postcss
PostCSS

Wake up CSS in HTML and JS

More practical, more flexible, and more things to do.

Fully Elastic Styles

Implement your design system without any constraints.

Dynamic Assignment

You can even change the class="" of element directly in DevTools.

Portable User Interface

Almost done in HTML, only copy-paste to have a full UI.

Get Started

DOM-dependent CSS

The page gets minimal CSS calculations due to the style lifecycle.

On-demand Injection

Only inject as CSS as the DOM tree needs, no more

Sharing Styles

Match generated styles without additional rendering

Smoother Interaction

Less CSS reduces browser computational complexity

<style>
index.html
    
<head>
    <style></style>
    <script src="https://unpkg.com/@master/style"></script>
    <script src="https://unpkg.com/@master/styles"></script>
</head>
<body>
    <h1 class="">
        Hello World
    </h1>
    <button class="">
        Submit
    </button>
</body>

😮‍💨 AOT or JIT ? Be both.

We devised a hybrid architecture that allows you to pre-generate CSS from HTML on the server side, and then continue to use JIT on the client side by reverse parsing.

You get runtime flexibility, as well as faster page loads.

Setup with your framework
server.js
    
import '@master/styles';
import { StyleSheet } from '@master/style';
import { render } from '@master/style/render';
// example for express ...
app.get('/', function(req, res) {
    res.render('index.html', (error, html) => {
        if (err) console.log(err);
        return render(html, StyleSheet).html;
    })
});
client.js
    
import '@master/styles';

One language. Anywhere.

Get started with your frameworks or build tools
React
file_type_angular
Angular
Next.js
Laravel
Nuxt.js
Vite
Remix
Svelte