1.1.3 • Published 3 years ago
kladenets v1.1.3
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
<link rel="stylesheet" href="https://unpkg.com/kladenets">
jsDelivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kladenets/kladenets.css">
<!-- OR latest on GitHub -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sparanoid/kladenets/kladenets.css">
Yarn
yarn add kladenets
npm
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
2.0.0-15
3 years ago
2.0.0-14
3 years ago
2.0.0-13
3 years ago
2.0.0-12
3 years ago
2.0.0-11
3 years ago
2.0.0-10
3 years ago
2.0.0-9
3 years ago
2.0.0-6
3 years ago
2.0.0-5
3 years ago
2.0.0-8
3 years ago
2.0.0-7
3 years ago
2.0.0-4
3 years ago
2.0.0-3
3 years ago
2.0.0-2
3 years ago
2.0.0-1
3 years ago
2.0.0-0
3 years ago
1.1.3
3 years ago