Custom Syntax

Configuration

Implement your design system using the configuration API.

Setup

npm create @master/css@rc

It generates a top-level configuration file master.css.{js,mjs,ts} based on the characteristics of your project.


Options

.animations

Customizing animation animations for your design system.

export default {
animations: {
'slide-in-up': {
from: {
transform: 'translateY(100%)'
},
to: {
transform: 'translateY(0)'
}
}
}
}

Apply the custom animation using animation syntax:

<div class="@slide-in-up|.5s"></div>

.functions

Customizing functions for your design system.

export default {
functions: {
translate: { unit: 'rem' }
}
}

Apply your custom functions:

<div class="translate(2rem)"></div>
<div class="translate(32)"></div>

.mediaQueries

Customizing media queries for your design system.

export default {
mediaQueries: {
mobile: 600,
tablet: 1024,
desktop: 1440,
watch: '(max-device-width:42mm) and (min-device-width:38mm)'
}
}

Apply your custom media queries:

<div class="font:24@mobile font:36@table font:48@desktop text:center@watch"></div>

Check out the responsive design to learn about responsive syntax.

.rules

Customizing syntax rules for your design system.

export default {
rules: {
foo: {
match: /^foo:./,
unit: 'rem',
declare(value, unit) {
return {
width: value + unit
}
}
}
}
}

Use your custom syntax:

<div class="foo:32"></div>

Generated CSS:

.foo\:32 {
width: 2rem;
}

.selectors

Customizing selectors for your design system.

export default {
selectors: {
_headings: '_:where(h1,h2,h3,h4,h5,h6)'
}
}

Simplify your existing markup in HTML:

<article class="font:bold_:where(h1,h2,h3,h4,h5,h6)"></article>
<article class="font:bold_headings"></article>

.semantics

Customizing semantic classes for your design system.

export default {
semantics: {
show: {
display: 'block'
},
'hide-text': {
'font-size': 0
}
}
}

Apply your custom semantics:

<div class="show hide-text" hidden></div>

.styles

Customizing abstract styles for your design system.

export default {
styles: {
btn: 'inline-flex h:10x '
}
}

Apply the btn style to the button element:

<button class="btn">Submit</button>
Generated CSS
.inline-flex,
.btn {
display: inline-flex
}
.h\:10x,
.btn {
height: 2.5rem
}

.variables

Customizing variables for your design tokens.

import { variables } from '@master/css'
export default {
variables: {
'font-family': {
sans: 'Inter'
},
screen: { desktop: 1280 },
spacing: { sm: 10 },
primary: '
#000000
'
}
}

Apply custom variables using ambiguous shorthand:

<div class="font:sans max-w:screen-desktop m:sm bg:primary"></div>

Settings

.extends

Extend custom or external configuration.

Default
undefined
Type
any[]
export default {
extends: [
require('@master/animate.css'),
require('./styles/btn.css'),
]
}

.important

Make all generated CSS declarations !important.

Default
false
Type
boolean

Using important: true should be considered as a last option, as it's a compromise.

export default {
important: true
}

Generated CSS:

.hide {
display: none !important;
}
.full {
width: 100% !important;
height: 100% !important;
}

.override

Customize your configuration to override all default configuration, default false to extend.

Default
false
Type
boolean
export default {
override: true
}

We've carefully preset some configurations to enhance the syntax; usually, you'll extend it.

.rootSize

Specify the conversion factor for rem and em.

Default
16
Type
number

Here's a common use case with rootSize: 10:

export default {
rootSize: 10
}

Generated CSS rules:

.font\:16 {
font-size: 1rem; /* rootSize: 16 */
font-size: 1.6rem; /* rootSize: 10 */
}

And you will set the font size of the root to 62.5%:

<html class="font:62.5%">

.baseUnit

This base unit determines the size scale and ensures visual consistency across products.

Default
4
Type
number

For example, with the default baseUnit: 4, the size scale 1x, 2x, … will be 4, 8, ….

<div class="m:4x"></div>

Generated CSS:

.m\:4x {
margin: 1rem; /* 4x = 4*4 = 16px, 16px / 16 = 1rem */
}

.scope

Limit the generated CSS rules to a specific scope with CSS selectors.

Default
''
Type
string

Don't make it part of your coding style, but as a last resort to solve problems.

export default {
scope: '#app'
}

All Master CSS syntax will only be applied if the .

<html>
<body id="app">
<div class="mt:1 text:center"></div>
</body>
</html>

Generated CSS:

#app .mt\:1 {
margin-top: 0.0625rem
}
#app .text\:center {
text-align: center
}

.themeDriver

Sets how the theme should drive and generate CSS rules.

Default
'class'
Type
'class'
'media'
'host'
<div class="bg:black@dark">

Drive theme styles through CSS classes

export default {
themeDriver: 'class'
}

Generated CSS:

.dark .bg\:#000000 { background-color: #000000 }

Drive theme styles through media queries

export default {
themeDriver: 'media'
}

Generated CSS:

@media (prefers-color-scheme: dark) { .bg\:#000000 { background-color: #000000 } }

Drive theme styles through shadow DOM's host

export default {
themeDriver: 'host'
}

Generated CSS:

:host(.dark) .bg\:#000000 { background-color: #000000 }
Design Variables
Spacing and Sizing

Apply consistent sizes across your application.

Custom Syntax
Animations

Customizing animation keyframes for your design system.

© Aoyue Design LLC.