Style Guide

The style guide for code contributed to WebTUI

CSS Units

• All CSS units should be based on ch [Docs] or lh [Docs]
• Avoid em, px, rem, %, or other units not related to character width or line height

Selectors

All selectors in components, utilities, and plugins should be nested within a CSS @layer block

• Only the components or utils layer should be used
• Do not use classes or IDs for styling
• Suffix each custom attribute selector with a dash (e.g. variant-, color-, is-)
• Use the [is-~="<component-name>"] selector for custom components (notice the ~ before the =)

@layer components {
    input[type="file"], [is-=~"fileinput"] {
        /* ... */
    }
}

@layer utils {
    [is-~="tooltip"] {
        /* ... */
    }
}

Documentation

If your Pull Request modifies or adds a new component or utility, please ensure that you add or update the corresponding documentation page