ruids CSS

ruids CSS - Utility CSS classes for applying spacing, colors, typography, shadows, flex, and transitions to elements.

Getting started

Import the styles.css file into your stylesheet.

@import '@ruids/css/dist/styles.css'

Spacing

Margin

Padding

Typography

Font Families

.font-sans
.font-mono

Typography Scale

Scale:
xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl

Class name composition example:

 .text-base

Weights

Scale:
hairline thin light normal medium semibold bold extrabold black

Class name composition example:

.font-normal

Line Height

Scale:
none tight snug normal relaxed 3 4 5 6 7 8 9 10

Classname composition example:

.leading-tight

Letter Spacing

Scale:
tighter tight normal wide wider widest

Classname composition example:

.tracking-tight

Shadows

Scale:
xs sm md lg xl 2xl inner outline none

Class name composition example:

.shadow (base)
.shadow-inner

Glows

Scale:
primary, negative, positive, warning

Class name composition example:

.glow-warning