KSS Style Guide

This style guide documents the designs of this website which are built with component-based styles and Sass variables, functions and mixins. To ensure it is always up-to-date, this style guide is automatically generated from comments in the Sass files.

Organization

Design components are reusable designs that can be applied using just the CSS class names specified in the component. We categorize our components to make them easy to find.

Defaults

sass/base — The default “base” components apply to HTML elements. Since all of the rulesets in this class of styles are HTML elements, the styles apply automatically.

Layouts

sass/layouts — Layout components position major chunks of the page. They just apply positioning, no other styles.

Components

sass/components — Miscellaneous components are grouped together, but feel free to further categorize these.

Navigation

sass/navigation — Navigation components are specialized design components that are applied to website navigation.

Forms

sass/forms — Form components are specialized design components that are applied to forms or form elements.

In addition to the components, our component library also contains these folders:

Colors and Sass

sass/init — This Sass documents the colors used throughout the site and various Sass variables, functions and mixins. It also initializes everything we need for all other Sass files: variables, 3rd-party libraries, custom mixins and custom functions.

Style guide helper files

sass/style-guide — files needed to build this automated style guide; includes some CSS overrides for the default KSS style guide