References

Customization

Customizing and configuring your Master CSS installation.

Master CSS Customization Example - StackBlitz

Configuration Guide

In general, frameworks or standard directory structures come with a ./styles folder for css files, and we recommend placing/configurating Master CSS styles here.

styles
|-- other.css
|-- home.js
|-- master.css.js

1. Create `master.css.js` file

It's recommended to create a master.css.js to centrally initialize and manage configurations.

/* 1. Access APIs */
import { init, Style } from '@master/css';
/* 2. Configure your initial options here ... */
Style.extend('classes', 
    {
        btn: 'font:14 text:center h:40'
    },
    require('./home')
);
/* 3. Manually initialize */
init();

Take a look at how the official defines home.js with classes.

module.exports = {
    homeTitle: 'font:28 font:36@md font:extrabold ls:-.25',
    homeContainer: 'max-w:1280 px:20 px:40@md mx:auto',
    ...
}

Of course, you can do all the configuration directly in styles/master.css.js, but as the configuration grows you may want to organize it into different files.

2. Prevent initializing automatically

The Master CSS preset is enabled with zero configuration, once you want to customize the configuration you must prevent automatic initialization and re-rendering.

<head>
    <script>
        window.MasterCSSManual = true;
    </script>
    <script src="/main.js" defer></script>
    ...
</head>
...

3. Import into your entry file

Import master.css.js into the entry file of the application, take the common main.js as an example.

import './styles/master.css';

Other. Directly in index.html

Here's a quick way to start with HTML only by copying and pasting:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://unpkg.com/@master/normal.css" rel="stylesheet">
    <script>
        /* 1. Prevent @master/css from initializing automatically */
        window.MasterCSSManual = true;
    </script>
    <script src="https://cdn.master.co/css"></script>
    <script >
        /* 2. Configure your initial options here ... */
        const Style = window.MasterStyle;
        Style.extend('classes', {
            btn: 'font:14 text:center h:40 px:20'
        })
        /* 3. Manually initialize */
        window.initMasterCSS()
    </script>
</head>
<body>
    <button class="btn">Ok</button>
</body>
</html>

Global settings

Use Style.extend(property, ...settings) to extend 'classes', 'colors', 'breakpoints', 'mediaQueries' globally.

Classes

Abstract and reuse your styles with the class names as usual:

import { init, Style } from '@master/css';
Style.extend('classes', {
    btn: 'font:14 h:40 h:32.sm text:center bg:red:hover',
    card: 'p:20 b:1|solid|gray-80 bg:white'
});
init();

Using them in your HTML would look like this:

<button class="btn ..."></button>
<div class="card ..."></div>

Colors

Extend additional colors and overwrite/keep defaults:

import { init, Style } from '@master/css';
Style.extend('colors', {
    'tiffany-blue': '0abab5',
    bee: 'f2b413',
    purple: {
        '': '491d8b',
        50: 'a56eff',
        60: '8a3ffc',
        70: '6929c4',
    }
}
init();

Using them in your HTML would look like this:

<p class="font:tiffany-blue bg:bee"></p>

Breakpoints

Extend additional breakpoints and overwrite/keep defaults:

import { init, Style } from '@master/css';
Style.extend('breakpoints', {
    tablet: '768px', // => @media (min-width: 768px) { ... }
    laptop: '1024px', // => @media (min-width: 1024px) { ... }
    desktop: '1280px', // => @media (min-width: 1280px) { ... }
});
init();

Using them in your HTML would look like this:

<div class="font:24@tablet font:32@laptop font:48@desktop"></div>

Media queries

Extend media queries and overwrite/keep defaults:

import { init, Style } from '@master/css';
Style.extend('mediaQueries', {
    'watch': '(max-device-width:42mm) and (min-device-width:38mm)'
});
init();

Using them in your HTML would look like this:

<div class="text-center@watch"></div>

Color Schemes

Add additional color schemes:

import { init, Style } from '@master/css';
// default: ['light', 'dark']
Style.colorSchemes.push('ocean');
init();

Using them in your HTML would look like this:

<div class="bg:cyan-20@ocean"></div>

Settings for each style

Use Styles.extend(property, ...settings) to extend 'values', 'semantics' for different styles.

Values

Extend additional values and overwrite/keep defaults:

import { init, Styles } from '@master/css';
Styles.extend('values', {
    width: {
        '2x': '2rem', // => width: 2rem;
        '3x': '3rem', // => width: 3rem;
    }
});
init();

Using them in your HTML would look like this:

<div class="width:2x w:4x"></div>

Use '2x' instead of 2 as value tokens. Numeric values in measurable styles have conversion behavior.

Semantics

Extend additional values and overwrite/keep defaults:

import { init, Styles } from '@master/css';
Styles.extend('semantics', {
    display: {
        show: 'block' // => display: block;
    },
    fontSize: {
        'hide-text': 0 // => font-size: 0rem;
    }
})
init();

Using them in your HTML would look like this:

<div class="show hide-text" hidden></div>
© Aoyue Design LLC.
Issue on this page
Edited byAron