sparanoid / kladenets

Future-proof native CSS variables in :root

Kladenets (aka. Root Variables)

Minimal, future-proof native CSS variables (CSS Custom Properties) framework in :root designed with the following features:

• Minimal variables defined: colors, typography, and layout helpers.
• HSL colors: all colors are HSL-based for more straightforward manipulation (before we have CSS Color Module Level 4 in hands).
• Easy to migrate: no magic variables for flex, or grid layout. You can continue to use your existing layout system.
• Flexible to extend: all variables can be overridden later in :root or in specific scopes.
• Dark mode ready: extend your existing app with prefers-color-scheme: dark, tweak colors with HSL, and you're ready to go.

Installation

unpkg

<!-- Stable -->
<link rel="stylesheet" href="https://unpkg.com/kladenets">

<!-- Latest -->
<link rel="stylesheet" href="https://unpkg.com/kladenets@next">

jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kladenets/kladenets.css">

Package Manager

pnpm add kladenets
yarn add kladenets
npm i -S kladenets

Usage

Direct CSS

See app.css for example.

Import node_modules in Webpack

@import '~kladenets';

body {
  color: var(--text-color);
}

Import in JavaScript

import 'kladenets'

// styled-components example
const Component = styled.div`
  color: var(--text-color);
`

License

MIT