CSS Variables

Webframe UI Styles have human-friendly names to describe variables.

Variable names match the intent so that you can focus on designing beautiful apps, instead of remembering hard to memorize suffixes like most UI frameworks and libraries.

This section provides examples for variables other than Color variables.

Sizes

Variables that can scale to different sizes come with these modifiers:

• -smallest
• -smaller
• -small
• -base (the default size, can be omitted sometimes)
• -large
• -larger
• -largest

Font Sizes

Border Radius

Spacing

Webframe --margin and --padding variables use relative em unit so that the entire UI scales dynamically according to the font size.

This is the desired and expected behavior for most use cases, because it eliminates the bloated code required to style all UI Components for different sizes.

For example, in order to scale the Switch input, all we have to do is set the font size: