5 #kss KSS module

A basic "KSS" module for Chroma.

Use chroma-kss-markup() to export a chunk of HTML wrapped in a /* */ CSS comment. Then use chroma-kss-styles() to style it.

@TODO: These functions and mixins are a bit janky because it exports to HTML directly rather than to JSON or some other exportable data set.

5.1 #kss.chroma-kss-markup chroma-kss-markup()

Returns the HTML needed to display all colors in color() in a KSS style guide. The parameters are used to specify the classes for various elements.

Since regular text can only be output with Sass in certain contexts, you must wrap this function call in a CSS comment.

Usage:

// Include chroma's optional kss module.
@import 'chroma/kss';
// Include the colors defined for your project.
@import 'init';

/*
#{chroma-kss-markup()}
*/

Then use a Gulp.js or Grunt task to strip the leading and trailing lines (containing "/" and "/" respectively) from the generated file.

Parameters:
  • $wrapper-class
    Defaults to 'kss-style'.
  • $title-class
    Defaults to 'chroma-kss__title'.
  • $description-class
    Defaults to 'chroma-kss__description'.
  • $color-class
    Defaults to 'chroma-kss'.
  • $swatch-class
    Defaults to 'chroma-kss__swatch'.
  • $variable-class
    Defaults to 'chroma-kss__variable'.
  • $alt-text-class
    Defaults to 'chroma-kss__alt-text'.
  • $value-class
    Defaults to 'chroma-kss__value'.
  • $reference-class
    Defaults to 'chroma-kss__reference'.
Source: chroma/_kss.scss, line 15

5.2 #kss.chroma-kss-styles chroma-kss-styles()

A mixin to add a series of rulesets that style Chroma color swatches in a KSS style guide.

Since the mixin writes CSS selectors, the mixin can be used at the root of a stylesheet.

Usage:

// Include chroma's optional kss module.
@import 'chroma/kss';

@include chroma-kss-styles();
Parameters:
  • $wrapper-class
    Defaults to 'kss-style'.
  • $title-class
    Defaults to 'chroma-kss__title'.
  • $description-class
    Defaults to 'chroma-kss__description'.
  • $color-class
    Defaults to 'chroma-kss'.
  • $swatch-class
    Defaults to 'chroma-kss__swatch'.
  • $variable-class
    Defaults to 'chroma-kss__variable'.
  • $alt-text-class
    Defaults to 'chroma-kss__alt-text'.
  • $value-class
    Defaults to 'chroma-kss__value'.
  • $reference-class
    Defaults to 'chroma-kss__reference'.
Source: chroma/_kss.scss, line 104