Coatroom

Coatroom is an easy way to create a front end component library. A tool that helps you create, organize and get an
overview of all your components.

Components are made of HTML and CSS, generated by a template and
LESS and documented by creating style guides written in Markdown to help other
developers understand how and when to use these components.

An object to add external style guide documents. Keys is the document title, value is the path to the file.

input.scripts {array of strings} [optional]

An array of .js JavaScript files. These files will automatically be appended to the overview page, enable it to include custom JavaScript.

input.externalStylesheets {array of strings} [optional]

An array of external CSS stylesheets that may be appended to the overview page, enable it to include external custom CSS such as fonts.

input.defaultTableHeaderBackgroundColor {strings} [optional]

Possible to set a custom table header color.

input.defaultTableCellBackgroundColor {strings} [optional]

Possible to set a custom table cell color.

output {object}

output.overview {string}

Path to a file which will be the generated overview page.

output.less {string}

Path to a file which will be the generated concatenated LESS file.

output.css {string} [optional]

Path to a file which will be the generated compiled CSS file.

validation {string} [optional]

validation.disallowedCSSRules {array of strings} [optional]

An array of CSS properties that should be disallowed within components. It is also possible to disallow property values by writing position=absolute, while allowing all other values with z-index!=0.

validation.disallowedCSSUnits {array of strings} [optional]

An array of units that should be disallowed within components.

How components work

A component consists of a folder and various files residing in that folder. The file of the folder is the same name of the
CSS class name. For example if the folder is called "btn" then the core CSS class for the component will be btn.

component.less

Coatroom also uses flavor of Documented Style Sheets in order to obtain component data such as its name, description, states and types.

Here is a list of supported annotations Coatroom uses:

Annotation

Description

@name

The name of the component.

@description

A short description of the component.

@state

List of different states the component can be in. CSS pseudo classes (:hover, :active, :disabled) for the component are usually the states, but this can be expanded to custom states depending on your own conventions.

@type

List of different types the component can be of. For example, a button can be a confirm or a warning button. These should only be small alternative alterations, as only the CSS will change, not the template markup.

@overviewBackgroundColor

If you want to change the color of the component background table cell with a specific color.

component.mustache

This contains the HTML template of the component. The template needs to have the {{classes}} curly braces. Coatroom
will use this template and replace the {{classes}} placeholder with real CSS classes, based on the different states
and types, when generating the overview page.