Size: Theme: Gridlines:

Overview

Documentation of the various Cutestrap classes are automatically generated from comments inside of the source code. This is done using kss-node.

The Cutestrap Docs are updated automatically whenever Cutestrap is updated, so it is the ultimate source of truth since it’s living documentation.

You can extend Cutestrap’s styleguide by cloning the repo and changing some KSS comments. The docs folder will update with the latest changes.

Example

The snippet below is taken from the Button Docs and we can use it to learn the KSS Syntax.

/*

Buttons

Buttons and their variations

Markup:
<button class="button ">Button</button>

.-secondary - A button with secondary colors
.-outlined - An outlined button
.-link - A button that looks like a link
.-block - Block level button
.-large - A large button
.-small - A small button
.-small.-outlined - A small, outlined button

Styleguide 3.0

*/

Let’s begin with the last line:

Styleguide 3.0

This is the part that indicates the hierarchy of the section. This is used for navigation and also for ordering on the page itself. You can have a page generated from across multiple different CSS files, if desired.

Buttons

This is the title of the section. Since the Styleguide section is the top level for this example (e.g. x.0, where x is 3 for this specific example), our styleguide will also use this for our navigation text.

Buttons and their variations

This is a little description that will show below the title of the section.

Markup:

The lines immediately after Markup: are used to generate the example output and also to be shown as is. The modifier_class will be substituted with the various modifiers.

.-secondary - A button with secondary colors

The modifiers are the classes right after the Markup:. Each item will be looped over to show an example of the markup rendered with that modifier. After the hyphen is the description, which will display near the example.