3 Demo

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

Source: kss-headings.less, line 27

3.1 Mixins

LESS mixins used in this demo.

Source: styles.less, line 1

3.1.1 .button-colorize(@color)

Creates button styling with the specified color.

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

3.1.2 .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 Components

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

Source: styles.less, line 10

3.2.1 Buttons

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 
<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 Forms

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

Example

false

false

false 

<form>
<p>false</p>
false


<p>
false
</p>
</form>
Source: styles.less, line 18

3.3.1 Text Input

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

Source: forms/base.less, line 1

3.3.1.1 Single-Line Text Boxes

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. 
<input type="text" class="[modifier class]" value="Text input"/>
Source: forms/base.less, line 8

3.3.1.2 Label/Text box Pairs

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). 
<div class="mod-input text [modifier class]">
  <label>Text Label</label>
  <input type="text" value="Text input"/>
</div>
Source: forms/base.less, line 58