charon-sass

5.0.12 • Public • Published

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.

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?

Package Sidebar

Install

npm i charon-sass

Weekly Downloads

0

Version

5.0.12

License

MIT

Last publish

Collaborators

  • bhalash