Charon-sass NPM

Charon

Charon1 is a programmatic Scss library designed to give control of CSS back to individual developers. Too many Sass libraries lock you in to a their developer's preferred design paradigm-they give you pregenerated CSS or only a limited set of mixins.

Charon intends to be the counterpoint library that grants flexible, descriptive tools to developers interested in a programmatic approach to their CSS. Some features include:

Programmatic symmetric and asymmetric flexbox and floated column generation.
CSS position shorthand mixins.
Expressive CSS @media query shorthand syntax.
Media breakpoint and color variable management and retrieval.
Golden ratio typography generation-step font sizes and line heights in tune to the prefect ratio of 1.61.
Unitless decimal => rem generation (because).
20+ utility mixins to prefix values and properties, to generate gradients, modals, counter increments and paragraph columns

Installation

npm install charon-sass

Usage

@import '../path/to/node_modules/charon/charon/';

.columns {
    @include columns(flex, div, 3, 5%);
}

=>

.flex-columns-even {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-columns-even > div {
    flex: 0 1 30%;
    min-height: 1px;
}

Documentation

Full documentation is a (substantial) work in progress. The code comment style is compatible with Sassdoc. Execute npm run doc to generate HTML documentation for the project.