theon
A Sass/CSS library that gives you an indexed set of neutral colors derived from a central base color. Mixing a bit of color into your greys usually looks nicer than the stark greys (#eee, #999, etc).
By default it has 15 shades, indexed by lightness. If you use the Sass version you can
customize the base color along with the lightness and saturation, and/or rebuild theon.css
by @import 'theon-css';
.
Default
Custom bases (#f00, #0f0, #00f)
###Install:
bower install --save theon
###CSS for declarative styles:
<link rel="stylesheet" href="/path/to/theon.min.css">
...
<body class="theonBg-12">
<h2 class="theon-4">Theon</h2>
<svg>
<rect class="theonFill-5 theonStroke-2"></rect>
</svg>
###Sass functions/placeholders:
@import 'theon';
// Basic usage is through theon($index)
body {
background: theon(14);
}
svg {
@extend %theonFill-8;
@extend %theonStroke-4;
}
Customise with Sass
// Can set custom base, lightnesses, and saturation variables before @importing theon
$theonBase: #7a7a79; // Default
$theonLgts: 4 10 16 22 29 36 43 50 57 64 71 78 84 89 95; // Defaults
$theonSats: 3 3 3 3 3 4 5 5 5 5 5 6 7 9 10; // Defaults
@import 'theon';
// Can also configure by calling theonConfig() with positional config options
// This has the same effect as the above configuration
$customLgts: 4 10 16 22 29 36 43 50 57 64 71 78 84 89 95;
$customSats: 3 3 3 3 3 4 5 5 5 5 5 6 7 9 10;
theonConfig(#7a7a79, $customLgts, $customSats);
Outputting CSS classes with Sass
// Set these vars to customise
$theonBase: #f00;
$theonLgts: 10, 30, 50, 70, 90
$theonSats: 10, 10, 20, 30, 40
// Then import this file
@import 'theon-css';