Baseline UI

A technical glass design framework with SCSS sources and compiled CSS. Minimalist, rectangular, with milky glass effects.

What is Baseline UI?

Baseline UI is a modern CSS framework focused on technical design with glassmorphism effects. It provides a complete collection of components, utilities, and design tokens for developing modern web applications.

Features

Glassmorphism Design

Modern glass effects with backdrop filters and milky surfaces for a technical appearance.

12 Components

Complete component library: Buttons, Cards, Forms, Modals, Navigation and more.

Design Tokens

Consistent design tokens for colors, spacing, typography and more as CSS custom properties.

Responsive Grid

Flexible 12-column grid system with breakpoints for all screen sizes.

Dark Mode

Automatic dark mode support based on system preferences.

Accessibility

WCAG 2.1 AA-compliant accessibility features for accessible applications.

Quick Start

Installation

npm

npm install @rhavenside/baseline-ui

CDN

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rhavenside/baseline-ui@latest/dist/baseline.min.css">

SCSS Import

SCSS

@use '@rhavenside/baseline-ui/src/baseline';

Getting Started

After installation, you can start using Baseline UI immediately. Check out the Getting Started page to learn more about installation and first steps.

HTML

<button class="bl-btn bl-btn-primary">Primary Button</button>
<button class="bl-btn bl-btn-secondary">Secondary Button</button>