https://github.com/sparanoid/kladenets

Future-proof native CSS variables in :root
https://github.com/sparanoid/kladenets

css css-variables

Last synced: 10 months ago
JSON representation

Future-proof native CSS variables in :root

• Host: GitHub
• URL: https://github.com/sparanoid/kladenets
• Owner: sparanoid
• Created: 2019-03-20T10:22:17.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2025-01-30T18:14:36.000Z (about 1 year ago)
• Last Synced: 2025-04-24T06:06:54.099Z (11 months ago)
• Topics: css, css-variables
• Language: HTML
• Homepage: https://sparanoid.com/lab/kladenets/
• Size: 849 KB
• Stars: 28
• Watchers: 2
• Forks: 2
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Kladenets (aka. Root Variables)

[![Test & Build](https://github.com/sparanoid/kladenets/actions/workflows/test.yml/badge.svg)](https://github.com/sparanoid/kladenets/actions/workflows/test.yml)

[![npm version](https://img.shields.io/npm/v/kladenets.svg?style=flat)](https://www.npmjs.com/package/kladenets)

[![Chromatic visual testing](https://shields.io/badge/visual_testing-chromatic-orange?logo=chromatic&style=flat)](https://chromatic.com/library?appId=60f5c0ae4a7e3f003ba05641&branch=master)

[![Online Storybook](https://shields.io/badge/storybook-branch:_master-ff4785?logo=storybook&style=flat)](https://master--60f5c0ae4a7e3f003ba05641.chromatic.com)

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](https://drafts.csswg.org/css-color/) 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

```html

```

### jsDelivr

```html

```

### Package Manager

```shell

pnpm add kladenets

yarn add kladenets

npm i -S kladenets

```

## Usage

### Direct CSS

See `app.css` for example.

### Import `node_modules` in Webpack

```css

@import '~kladenets';

body {

  color: var(--text-color);

}

```

### Import in JavaScript

```js

import 'kladenets'

// styled-components example

const Component = styled.div`

  color: var(--text-color);

`

```

## License

MIT