Custom Syntax

Configuration

A guide to fully customizing your design system using the configuration API.

/** @type {import('@master/css').Config} */
export default {
    …
}

Configuration fields that are not specified will fall back to default configuration.

`.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: {
        card: {
            '': 'bg:white r:8',
            header: 'object:cover w:full',
            content: 'p:15'
        }
    }
}

Apply your custom styles:

<div class="card">
    <img class="card-header" src="…" />
    <div class="card-content"></div>
</div>

`.variables`

Customizing variables for your design tokens.

import { variables } from '@master/css'
 
export default {
    variables: {
        'font-family': {
            sans: 'Inter'
         },
        sizing: { md: 1024 },
        spacing: { x1: 2 },
        primary: '#000000'
    }
}

Apply custom variables using ambiguous shorthand:

<div class="font:sans max-w:md m:x1 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%">

`.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 }

Fonts

Customizing fonts for your design system.

Animations

Customizing animation keyframes for your design system.

Issue on this page