charon-sass

Charon

Charon¹ 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.

TODO

• Full @mixin and @function unit test coverage with Mocha and True.
• Complete this README.md file.
• Identify and remove defunct code.

Copyright

Copyright (c) 2016 Mark Grealish. See LICENSE for details.

---

^{1: Charon is named for Charon, who was named for Charon, which was named for Sharon, so it should be pronounced 'Shar-on.' Easy, right?}