KSS Knyle Style Sheets

Documentation for any flavor of CSS that you’ll love to write. Human readable, machine parsable, and easy to remember.

Works great with CSS, SCSS, LESS, and much more.

// A button suitable for giving a star to someone.
//
// :hover             - Subtle hover highlight.
// .star-given        - A highlight indicating you've already given a star.
// .star-given:hover  - Subtle hover highlight on top of star-given styling.
// .disabled          - Dims the button to indicate it cannot be used.
//
// Styleguide 2.1.3.
a.button.star{
  ...
  &.star-given{
    ...
  }
  &.disabled{
    ...
  }
}

Documentation for humans

Documentation is all about communication. Between people, not computers. So why should your documentation format cater to computers?

KSS’s documentation syntax is human readable, but just structured enough to be machine parsable.

And it takes less than 5 minutes to learn the syntax.

Works with SCSS, LESS, and more

KSS is designed to work with every flavor of CSS out there — preprocessor or not. Choose whatever works for you.

Automatically generate styleguides

Create example HTML for your CSS and automatically generate variations of each element.

Ever wanted to see the hover, active, and visited states for a link all at once? No problem.

Learn how to generate a living styleguide for your project.