配置
Implement your design system using the configuration API.
Setup
npm create @master/css@rcIf you don't have a configuration file, create one first.
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(32)">…</div><div class="translate(2rem)">…</div>.at
Customizing at-rules for your design system.
export default { at: { landscape: '@media(orientation:landscape)' }}Employ concise yet semantically meaningful markup.
<img class="aspect:2/1@landscape" … />Generated CSS
@layer base, theme, preset, components, general;@layer general { @media (orientation:landscape) { .aspect\:2\/1\@landscape { aspect-ratio: 2/1 } }}You wouldn't want to write full condtions within the markup.
<div class="aspect:2/1@media(orientation:landscape)">…</div>.rules
Customizing rules for your design system.
export default { rules: { foo: { unit: 'rem', declarations: { width: undefined } } }}Use it in your markup:
<div class="foo:32"></div>Generated CSS:
.foo\:32 { width: 2rem;}.selectors
Customizing selectors for your design system.
export default { selectors: { ':headings': ':is(h1,h2,h3,h4,h5,h6)', ':first': ':first-child', }}Simplify your markup:
<div class="font:bold_:headings">…</div> <div class="font:bold_:is(h1,h2,h3,h4,h5,h6)">…</div><div class="font:bold_:first">…</div> <div class="font:bold_:first-child">…</div>.utilities
Customizing utility classes for your design system.
export default { utilities: { round: { 'border-radius': '50%', 'aspect-ratio': '1/1' } }}Apply your custom utility class:
<div class="round">o</div>Use with selectors and at-rules:
<div class="round:hover@sm">o</div>.components
Creating reusing styles for your design system.
export default { components: { btn: 'inline-flex h:10x' }}Apply the btn style to the button element:
<button class="btn">Submit</button>Generated CSS
@layer base, theme, preset, components, general;@layer components { .btn { display: inline-flex } .btn { height: 2.5rem }}.variables
Customizing variables for your design tokens.
import { variables } from '@master/css'export default { variables: { spacing: { sm: 10 }, primary: '#000000' }}Apply custom variables using ambiguous shorthand:
<div class="font:sans max-w:screen-desktop m:sm bg:primary">…</div>.screens
Customizing screen sizes for your design tokens.
export default { screens: { md: 1024, lg: 1280, }}For example, a screen size token can be used in the following ways:
<div class="font:32@md">…</div><div class="max-w:screen-md">…</div><div class="hidden@container(md)">…</div>.extends
Extend custom or external configuration.
| Type | any[] |
|---|
export default { extends: [ require('@master/ui'), require('./styles/btn.css'), … ]}.important
Make all generated CSS declarations !important.
| Type | boolean |
|---|---|
| Default | false |
Using important: true should be considered as a last option, as it's a compromise.
export default { important: true}Generated CSS:
.hidden { display: none !important;}.full { width: 100% !important; height: 100% !important;}.rootSize
Specify the conversion factor for rem and em.
| Type | number |
|---|---|
| Default | 16 |
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.
| Type | number |
|---|---|
| Default | 4 |
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.
| Type | string |
|---|---|
| Default | '' |
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 <body id="app">.
<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}.defaultMode
The mode is to be applied by default when no mode is specified.
| Type | 'light''dark'stringboolean |
|---|---|
| Default | 'light' |
See default mode for more information.
.modeTrigger
Sets how the theme should drive and generate CSS rules.
| Type | 'class' | 'media' | 'host' |
|---|---|
| Default | "media" |
See mode triggers for more information.