One-Nexus

The documentation pages are still being written, please bear with us.

Quick Look

Default

<form class="form">
    <div class="form_group">
        <label class="form_label">Your Name</label>
        <input type="text" class="form_input" placeholder="E.g. John Doe">
    </div>
    <div class="form_group">
        <label class="form_label">Your Message</label>
        <textarea class="form_input" placeholder="Enter your message..."></textarea>
    </div>
    <button type="submit" class="button">Submit</button>
</form>

With HTML5 Validation

<form class="form">
    <div class="form_group-validate">
        <input required type="text" class="form_input" placeholder="E.g. John Doe">
        <label class="form_label">Your Name</label>
    </div>
    <div class="form_group-validate">
        <textarea required class="form_input" placeholder="Enter your message..."></textarea>
        <label class="form_label">Your Message</label>
    </div>
    <button type="submit" class="button">Submit</button>
</form>

Sass

Load the form styles by including the forms() mixin:

@include forms();

The following options can be passed to the mixin to customize the forms:

Option	Description	Default
`name`	The name used when generating the CSS selector	`'form'`
`input-color`	The text color for input elements	`core('text-color')`
`input-border`	The border for input elements	`1px solid color('greyscale', 'grey-3')`
`input-padding`	The padding for input elements	`0.75em`
`valid-color`	The color for valid HTML5 inputs	`color('validation', 'valid')`
`invalid-color`	The color for invalid HTML5 inputs	`color('validation', 'valid')`

The above options can be passed to the mixin like so:

@include forms((
    'input-color': color('brand', 'brand-3'),
    'input-border': 1px solid color('brand', 'brand-3')
));

The above example produces the following form:

<form class="form">
    <div class="form_group">
        <label class="form_label">Your Name</label>
        <input type="text" class="form_input" placeholder="E.g. John Doe">
    </div>
    <div class="form_group">
        <label class="form_label">Your Message</label>
        <textarea class="form_input" placeholder="Enter your message..."></textarea>
    </div>
    <button type="submit" class="button-brand-3">Submit</button>
</form>

Examples

Form Group With Icon

<form class="form">
    <label class="form_label">Username</label>
    <div class="form_group-has-icon">
        <input type="text" class="form_input" placeholder="Ex: SkyUX">
        <i class="form_icon fa fa-user"></i>
    </div>
</form>

Tighter Form Groups (with icons)

<form class="form">
    <div class="form_group-compound-has-icon">
        <input type="text" class="form_input" placeholder="Username">
        <i class="form_icon fa fa-user"></i>
    </div>
    <div class="form_group-compound-has-icon">
        <input type="password" class="form_input" placeholder="••••••••">
        <i class="form_icon fa fa-key"></i>
    </div>
</form>

Forms