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.

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

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

Applies foreground and background colors.

  • @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


  • @successColor #5a792c


  • @errorColor #c47908


  • @warningColor #b62922


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
Default styling
Link Button
Use this class to indicate that the button is the primary feature of this form.
Link Button
Use this class to indicate that the button will remove a feature, or other negative connotations.
Link Button
Highlight the button when hovered.
Link Button
Make the button change appearance to reflect it being disabled.
Link Button
"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

Link Button

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

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

Default styling
Use this class when the text input inside is expected to be disabled.
Use this class if the input has failed a validation check.
Use this class if the input has passed a validation check (intended for live validation in particular).
<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