@toomuchdesign/suitcss-components-form NPM

SUIT CSS components-form

A very lightweight SUIT component for forms.

Read more about SUIT's design principles.

For a more extended approach see giuseppeg's suitcss-components-form.

This library is a mantainance fork of an old draft by Nicolas Gallagher.

Installation

NPM: npm install @toomuchdesign/suitcss-components-form --save
Download: zip

Available classes

Form - Provides some basic display and alignment adjustments to form elements.
Form--inline -.
Form-field - The wrapper for a label-control pair.
Form-field--stacked - Modifier to stack labels on top of controls.
Form-label - A control's visual label.
Form-input - Styles intended for text-based controls (e.g., textarea or input)

Configurable variables

--Form-input-border-color
--Form-input-border-radius
--Form-input-color
--Form-input-bg-color
--Form-input-placeholder-color
--Form-input-placeholder-opacity
--Form-input-font-size
--Form-input-padding
--Form-input-onfocus-outline-width
--Form-select-background
--Form-select-background-2x
--Form-select-background-width
--Form-label-color
--Form-label-font-size
--Form-label-font-weight
--Form-field-padding
--Form--inline-form-field-margin

Usage

Example compact form:

<form class="Form">
    <fieldset>
        <label for="email">Email</label>
        <input class="Form-input" id="email" type="email" placeholder="Email">

        <label for="password">Password</label>
        <input class="Form-input" id="password" type="password" placeholder="Password">

        <input id="remember" type="checkbox">
        <label for="remember">Remember me</label>

        <button type="submit" class="Button">Sign in</button>
    </fieldset>
</form>

Example of horizontally arranged label-control pairs:

<form class="Form">
    <div class="Form-field">
        <label class="Form-label" for="name">Choose username</label>
        <input class="Form-input" id="name" placeholder="">
    </div>

    <div class="Form-field">
        <input id="remember" type="checkbox">
        <label for="remember">Remember me</label>
    </div>

    <button type="submit" class="Button">Sign up</button>
</form>

Example of a stacked form:

<form class="Form">
    <div class="Form-field Form-field--stacked">
        <label class="Form-label" for="name">Choose username</label>
        <input class="Form-input" id="name" placeholder="">
    </div>

    <button type="submit" class="Button">Sign up</button>
</form>

See the test file for more examples.