SUIT form

A very lightweight SUIT component for forms.

Read more about SUIT's design principles.

Installation

• Bower: bower install --save suit-form
• Component(1): component install suitcss/suit-form
• Download: zip
• Git: git clone https://github.com/suitcss/form.git

Available classes

• Form - Provides some basic display and alignment adjustments to form elements.
• Form--inline -.
• Form-item - The wrapper for a label-control pair.
• Form-item--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)

Usage

SUIT form depends on normalize.css:

@import "/bower_components/normalize-css/normalize.css";
@import "/bower_components/suit-form/form.css";

SUIT form works best with other structural packages, especially:

• suit-utils-state - for accessible hiding of labels
• suit-utils-dimension - for dimension control of form elements
• suit-button - for form buttons

Example compact form:

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

        <label class="u-isHiddenVisually" 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">#</button>
    </fieldset>
</form>

Example of horizontally arranged label-control pairs:

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

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

    <button type="submit" class="Button u-before1of4">#</button>
</form>

Example of a stacked form:

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

    <button type="submit" class="Button">#</button>
</form>

See the test file for more examples.

Testing

Install Node (comes with npm). It's recommended that you also globally install Component(1): npm install -g component.

From the repo root, install the project's development dependencies:

make

To run the CSS Lint tests and build the front-end development bundle:

make test

Basic visual tests are in test.html.

Browser support

• Google Chrome (latest)
• Opera (latest)
• Firefox 4+
• Safari 5+
• Internet Explorer 8+