# 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 1

### 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.components Components

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

Source: `styles.less`, line 10

### 3.2.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.3 #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

Text Label

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 18

### 3.3.1 #demo.forms.text Text Input

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

Source: `forms/base.less`, line 1

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