Styles

A guide to creating abstract styles for your design system.

Apply styles

A style can be composed of multiple syntaxes, you can provide an abstract name for this set of classes and reuse it anywhere.

<button class="btn btn-primary">Submit</button>

Traditionally, we define styles like .btn or .card by writing CSS rules. In Master CSS, we abstract them using styles.

The UI is composed of 1 to 4:

1. Variables / Animations / Functions / Selectors / At / Utilities
2. Syntaxes
3. Styles
4. Components

Add a style

Create an abstract style using Master CSS syntaxes.

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

Apply the btn style to the button element:

<button class="btn">Submit</button>

.inline-flex,
.btn {
    display: inline-flex
}
 
.h\:10x,
.btn {
    height: 2.5rem
}

Master CSS shares the same CSS declarations for .inline-flex, .btn { ... } through a selector list. This structural arrangement enhances browser rendering and enables selectors or media queries to be applied within the config.styles.

Add a style with states

Create an abstract style with state selectors and applying conditionally.

export default {
    styles: {
        btn: '… outline-offset:2:focus outline:2|invert:focus'
    }
}

Try clicking the button to see the outline effect

<button class="btn">Submit</button>

.light,
:root {
    --invert: 0 0 0
}
 
.dark {
    --invert: 255 255 255
}
 
.outline\:2\|invert\:focus:focus,
.btn:focus {
    outline: 0.125rem rgb(var(--invert)) solid
}
 
.outline-offset\:2\:focus:focus,
.btn:focus {
    outline-offset: 0.125rem
}

Add styles in a nested structure

Create and manage a set of abstract styles in a nested structure. Rather than repeating the same style names over and over again, you can write one style inside another. Master CSS will automatically combine the outer style’s name with the inner style’s.

export default {
    styles: {
        card: {
            '': '… r:2x',             // .card
            header: '… bb:1|gray',    // .card-header
            content: '… p:5x',        // .card-content
            footer: '… bt:1|gray',    // .card-footer
        }
    }
}

Apply the styles:

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

.light,
:root {
    --gray: 162 161 163
}
 
.dark {
    --gray: 137 136 138
}
 
.bb\:1\|gray,
.card-header {
    border-bottom: 0.0625rem rgb(var(--gray)) solid
}
 
.r\:2x,
.card {
    border-radius: 0.5rem
}
 
.bt\:1\|gray,
.card-footer {
    border-top: 0.0625rem rgb(var(--gray)) solid
}
 
.p\:5x,
.card-content {
    padding: 1.25rem
}

The empty string '' represents an outer style, much like Sass's &.

Extend an existing style

Create a new abstract style by extending an existing style and adding additional syntax.

export default {
    styles: {
        a: 'fg:lime',
        b: 'a text:underline'
    }
}

You can see that b inherits the text lime color of a:

<span class="a">a</span>
<span class="b">b</span>

.light,
:root {
    --text-lime: 76 141 7
}
 
.dark {
    --text-lime: 145 217 26
}
 
.text\:underline,
.b {
    -webkit-text-decoration: underline;
    text-decoration: underline
}
 
.fg\:lime,
.a,
.b {
    color: rgb(var(--text-lime))
}