> Concept

Concept

Classes

The framework has a set of utility and component classes for quickly applying CSS rules to HTML elements.

Utility classes represent low-level rules for styling elements. They control properties such as display, margin, border, padding, width, color, etc.

Component classes represent high-level rules for styles of commonly used components. They declare components such as button.

Example

<div class="row border-1px p-1 gap-1 round-2">
<button class="button">Settings</button>
<button class="button">Profile</button>
</div>

Class modifiers

Class modifiers define a condition for which to apply the class.

They are added before the class name with `:` used as a separator.

Example

<div class="col md:row border-1px p-1 gap-1 round-2">
<button class="button hover:color-invert">Settings</button>
<button class="button">Profile</button>
</div>

Lengths

The framework has the base-length variable and uses its multiples for most length-related utility classes and CSS properties in component classes.

This helps make design consistent in terms of sizing and spacing.

The length is specified at the end of the class.

Example

<div class="m-2 border-1px p-2 h-6 round-2">
Hello!
</div>

Color palette

For each color scheme (dark / light), the framework has five monochrome color palettes called hues. Each has three levels of chroma (variations).

Neutral

Hue-A

Hue-B

Hue-C

Hue-D

Customizable

Sizing, spacing and color palette can be easily adapted to your needs by editing CSS variables.