rakui-css
v1.0.3
Published
A brutalist, responsive CSS library. Pure CSS. Zero JavaScript. High contrast.
Maintainers
Readme
Rakui CSS
A brutalist, responsive CSS library. Pure CSS. Zero JavaScript. High contrast.
Installation
NPM:
npm install rakui-cssCDN:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/rakui.css">Download:
Grab dist/rakui.css from this repo.
Quick Start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/rakui-css/dist/rakui.css">
</head>
<body>
<main class="container">
<h1>Hello Rakui</h1>
<button class="btn btn-primary">Get Started</button>
</main>
</body>
</html>Components
- Typography —
.lead,.text-*,.font-* - Buttons —
.btn,.btn-primary,.btn-secondary,.btn-ghost - Forms —
.form-input,.form-select,.form-group - Cards —
.card,.card-header,.card-footer - Tables —
.table,.table-striped,.table-bordered - Messages —
.message,.message-error,.message-success - Badges —
.badge,.badge-filled - Navigation —
.navbar,.nav-link,.nav-dropdown
See docs/index.html for live examples.
Theming
Automatic dark/light mode via prefers-color-scheme. Manual override:
<html data-theme="dark">
<html data-theme="light">Customization
Override CSS variables:
:root {
--color-bg: light-dark(#ffffff, #000000);
--color-fg: light-dark(#000000, #ffffff);
--font-mono: "Monaco", monospace;
--spacing-base: 1rem;
}Browser Support
Chrome 114+, Firefox 125+, Safari 17+, Edge 114+ (89% global coverage).
License
MIT
