Overview

What is unitone CSS

A CSS framework that provides layout primitives such as stack, cluster, center, etc. for intrinsic web design. It also provides design tokens such as margins, font size, etc. to achieve harmonious web design.

unitone CSS has the following features:

• Intrinsic Web Design
• Layout Primitives
• Typography
• Fully CSS Variables

Intrinsic Web Design

Responsive web design, which is based on viewport width, causes problems with component portability.

By adopting "Intrinsic Web Design" based on content rather than viewport width, we can achieve true responsive web design that can be used on devices of all sizes.

Layout Primitives

Layout is achieved by combining components with a single responsibility, such as "provide vertical space between elements" or "place elements at equal intervals".

This allows for flexible layout and CSS size reduction.

Typography

Adopting and following some uniform standard results in a harmonious and orderly design. unitone CSS provides variations based on the harmonic sequence for font size and the Fibonacci sequence for margins as design tokens.

Also, if you follow the unitone CSS method of specifying font size, a balanced line-height will automatically be applied.

Fully CSS variables

CSS variables are used everywhere, including each design tokens and component properties.

Inspirations

unitone CSS is inspired by Every Layout (opens in a new tab).

Browser support

Modern browser only.

License

MIT