kss-node Style Guide

3 #demo Demo

The source files for this demo can be found in the demo folder on GitHub.

Source: kss-headings.less, line 27

3.1 #demo.mixins Mixins

LESS mixins used in this demo.

Source: styles.less, line 21

3.1.1 #demo.mixins.button-colorize .button-colorize(@color)

Creates button styling with the specified color.

Parameters:
  • @color
    Button color.
Source: components/buttons.less, line 61

3.1.2 #demo.mixins.example .colors(@bg, @color)

Applies foreground and background colors.

Parameters:
  • @bg
    Background color.
    Defaults to: #f5f5f5
  • @color
    Foreground color.
    Defaults to: #900
Source: mixins/example.less, line 1

3.2 #demo.colors Colors

  • @textColor #111

    base text color

  • @textLighterColor #888

    lighter text color

  • @infoColor #224d66

    info

  • @successColor #5a792c

    success

  • @errorColor #c47908

    error

  • @warningColor #b62922

    warning

Source: styles.less, line 1

3.3 #demo.components Components

Reusable components that can be used across the site. So far this just includes buttons.

Source: styles.less, line 30

3.3.1 #demo.components.buttons Buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A majority of buttons in the site are built from the same base class.

Examples
Default styling
Link Button
.primary
Use this class to indicate that the button is the primary feature of this form.
Link Button
.remove
Use this class to indicate that the button will remove a feature, or other negative connotations.
Link Button
:hover
Highlight the button when hovered.
Link Button
:disabled
Make the button change appearance to reflect it being disabled.
Link Button
:active
"Press" the button down when clicked.
Link Button
Markup: components/buttons.hbs 
<a href="#" class="button {{modifier_class}}">Link Button</a>
<button class="button {{modifier_class}}">Button Element</button>
<input type="button" class="button {{modifier_class}}" value="input[type='button']"/>
Source: components/buttons.less, line 1

3.4 #demo.forms Forms

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Covers styles used for forms, such as the <input> and <select> elements.

Example

Link Button

Markup: forms/forms.hbs 
{{!-- Handlebars partials can nest other section's partials. --}}
<form>
<p>{{> "demo.forms.text.single-line" }}</p>
{{> "demo.forms.text.label-pairs" }}


<p>
{{> "buttons" }}
</p>
</form>
Source: styles.less, line 38

3.4.1 #demo.forms.text Text Input

Below are the text-oriented form elements used on the site.

Source: forms/base.less, line 1

3.4.1.1 #demo.forms.text.single-line Single-Line Text Boxes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Your standard, everyday text boxes.

Examples
Default styling
:hover
Highlight the text box when hovering
:focus
Similar to :hover, however it should demand more attention than when an input is simply hovered.
:disabled
When disabled, the input's appearance should reflect as such.
Markup 
<input type="text" class="[modifier class]" value="Text input"/>
Source: forms/base.less, line 8

3.4.1.2 #demo.forms.text.label-pairs Label/Text box Pairs

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

All labelled text boxes should be included in a wrapper <div> element for both layout convenience and specific styling.

Examples
Default styling
.disabled
Use this class when the text input inside is expected to be disabled.
.invalid
Use this class if the input has failed a validation check.
.valid
Use this class if the input has passed a validation check (intended for live validation in particular).
Markup 
<div class="mod-input text [modifier class]">
  <label>Text Label</label>
  <input type="text" class="" value="Text input"/></div>
Source: forms/base.less, line 58