Home

compopo-design

Unified design for front-end.

The CSS is written with CSS Variables and utility-first classes. This means each class contains only one rule. This is the same style used by the popular TailWindCSS.

Unlike TailWindCSS, this is not an attempt to cover every possible style/class combination. Instead, this defines a limited selection that is aligned with the design. Having a limited list helps eliminate inconsistency by encouraging everyone to use one of the pre-defined values.

How to use

Combine classes to get the desired style.

<h1 class="color-black-1 font-size-32pt font-weight-bold">
  My header
</h1>

Color Classes

• Colors Wiki; Source
• .color-${colorname}
• .bg-color-${colorname}
• .border-color-${colorname}

Typography Classes

• .font-family-roboto
• .font-family-roboto-mono
• .font-size-${size}
• .font-weight-bold
• .font-weight-normal
• .text-uppercase