Form

Base #

Here is an example of a basic form with a set of different controls.

Name

Country ---

Check me Radio me

Save Cancel

<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input type="text" name="name">
    </div>
    <div class="form-item">
        <label>Country</label>
        <select>
            <option value="">---</option>
        </select>
    </div>
    <div class="form-item">
        <label class="checkbox">
            <input type="checkbox"> Check me
        </label>
        <label class="checkbox">
            <input type="radio"> Radio me
        </label>
    </div>
    <div class="form-item">
        <textarea rows="6"></textarea>
    </div>
    <div class="form-buttons">
        <button class="button button-alpha">Save</button>
        <button class="button">Cancel</button>
    </div>
</form>

Item #

Use the form-item class to place controls line by line in the form.

<form class="form">
    <div class="form-item">...</div>
    <div class="form-item">...</div>
</form>

The margin between the form-item is specified in your vars/type in $type-space map, by default it looks like this:

$type-space: (
    ...
    form-item-to-item: 5rem
    ...
);

Buttons #

Use the form-buttons class to place buttons at the bottom of the form.

<form class="form">
    <div class="form-item">...</div>
    <div class="form-item">...</div>
    <div class="form-buttons">
        <button class="button">...</button>
    </div>
</form>

The margin between form-item and form-buttons is specified in your vars/type in $type-space map, by default it looks like this:

$type-space: (
    ...
    form-buttons-to-item: 6rem
    ...
);

Checkboxes #

By default, checkboxes are placed in the form item line by line. Each checkbox has a label tag with a checkbox class.

Check 1 Check 2 Check 3

<form class="form">
    <div class="form-item">
        <label class="checkbox">
            <input type="checkbox"> ...
        </label>
    </div>
</form>

Use form-checkboxes to place the checkboxes in one line.

Check 1 Check 2 Check 3

<form class="form">
    <div class="form-item form-checkboxes">
        <label class="checkbox">
            <input type="checkbox"> ...
        </label>
    </div>
</form>

Inputs #

Superkube generates inputs based on three maps, which should be written in your vars:

• $colors — specifies colors of input states;
• $inputs-scale — defines input sizes;
• $inputs — defines how the inputs should look in different states.

Also, each states has two behaviors: normal (base) and focus.

This is how it can look:

// Color
$colors: (
    ...
    input: (
        default: (
            base: (
                text: palette(neutral, darker),
                border: palette(neutral, light),
                background: palette(white)
            ),
            focus: ( ... )
        ),
        error: ( ... )
    )
    ...
);

// Scale
$inputs-scale: (
    regular: (
        font-size: type-size(input, regular),
        line-height: type-line(input, regular),
        border-radius: radius(small),
        padding: 0.3em 0.5em,
        height: 44px
    ),
    large: ( ... )
);

// Appearence
$inputs: (
    default: (
        base: (
            color: color(input, default, base, text),
            border: 1px solid color(input, default, base, border),
            background-color: color(input, default, base, background),
            box-shadow: none
        ),
        focus: ( ... )
    ),
    error: ( ... )
);

By default, Superkube generates two input styles and two scales:

• default and error input
• regular and large

// default
<input type="text">
<input type="text" class="input-large">

// error
<input type="text" class="input-error">
<input type="text" class="input-error input-large">

Own input state

Here is how to add your input state to your vars:

// Color
$colors: (
    ...
    button: (
        ...
        success: (
            base: (
                text: palette(positive, dark),
                border: rgba(palette(positive, base), .5),
                shadow: rgba(palette(positive, base), .3)
            ),
            focus: ( ... )
        )
        ...
    )
    ...
);

// Appearence
$inputs: (
    ...
    success: (
        base: (
            color: color(input, success, base, text),
            border-color: color(input, success, base, border),
            box-shadow: 0 0 2px color(input, success, base, shadow)
        ),
        focus: (
            border-color: color(input, success, focus, border)
        )
    )
    ...
);

As a result, Superkube will generate a state of input with class input-succes.

<input type="text" class="input-success">

Own input scale

To add your input size, you need to specify it in the $inputs-scale and add its text size to the $type map, for example like this:

// Type
$type: (
    ...
    input: (
        regular: 16px 1.5,
        large: 21px 1.5
        huge: 28px 1.25
    )
    ...
);

// Scale
$inputs-scale: (
    ...
    huge: (
        font-size: type-size(input, huge),
        line-height: type-line(input, huge),
        border-radius: radius(small),
        padding: 0.3em 0.65em,
        height: 68px
    )
    ...
);

As a result Superkube will generate input with new size:

• input-huge

<input type="text" class="input-huge">

Hint #

Use the hint class to make the description of the form fields.

Name Always nice to feel important.

Email

Please enter your email.

<form class="form">
    <div class="form-item">
        <label>Name <span class="hint">...</span></label>
        <input type="text">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input type="email">
        <div class="hint">...</div>
    </div>
</form>

Use the hint-success and hint-error classes to display different states of descriptions.

Name Always nice to feel important.

Email

Please enter your email.

<span class="hint hint-success">...</span>
<span class="hint hint-error">...</span>

Use the hint-req classes to indicate the required field.

Name *

Email

<span class="hint-req">*</span>