Files

• _forms.scss
• forms.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/forms

Module Overview

Examples

Your Name

Your Message

Submit

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

Tip: Use the Grid System classes to structure your forms.

Faux Placeholders

Faux placeholders are label elements positioned to look like a placeholder, which animate to above the field when focused.

Your Name

Your Message

Submit

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

To use faux placeholders, add the fauxPlaceholders modifier to your form module: form-fauxPlaceholders. Also ensure that your elements are structured as above.

Ensure that your inputs and labels have appropriate pairing attributes (not shown in above code).

HTML5 Validation (with Faux Placeholders)

These forms use HTML5's form validation and CSS3's pseudo selectors to style valid/invalid fields, letting your users know immedietly whether their input is valid.

Your Name

Your Message

Submit

<form class="form-html5-fauxPlaceholders">
    <div class="form_group">
        <input required type="text" class="form_input" placeholder="E.g. John Doe">
        <label>Your Name</label>
    </div>
    ...
</form>

Notice the 'required' attribute on line 3. Learn more about HTML5 validation.

Form Group With Icon

Username

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

To crete an input group with an icon, add the hasIcon modifier to your form_group component: form_group-hasIcon, and place your desired icon (using Font Awesome icons) underneath the input field as shown above.

With Faux Placeholder

Username

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

Small Form Groups

Username

<form class="form">
    <label class="heading-light-size-2">Username</label>
    <div class="form_group-small">
        <input type="text" class="form_input" placeholder="Ex: SkyUX">
    </div>
</form>

To create a small form group, add the small modifier to your form_group component: form_group-small. To ensure any labels you use are the appropriate size, you can use one of the various heading classes, e.g. heading-size-2.

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>

To create form groups that sit tighter with each other, use the compound modifier on your form_group component: form_group-compound.

Plain Input Fields

Username

<form class="form well-dark">
    <label>Username</label>
    <div class="form_group">
        <input type="text" class="form_input-plain" placeholder="Ex: SkyUX">
    </div>
</form>

To create a plain input field with no border, use the plain modifier on your form_input component: form_input-plain.

Input Field With Opaque Background

Username

<form class="form well">
    <label>Username</label>
    <div class="form_group">
        <input type="text" class="form_input-bg" placeholder="Ex: SkyUX">
    </div>
</form>

To create an input field with an opaque background, use the bg modifier on your form_input component: form_input-bg.

Practical Examples

Form - Choose Quantity

Add To Cart

<form class="form">
    <div class="span">
        <input class="button-border-grey-3" type="button" value="-">
        <input class="form_input-quantity" type="text" step="1" min="1" name="quantity" value="1" title="quantity">
        <input class="button-border-grey-3" type="button" value="+">
    </div>
    <button class="button-primary" type="subtmi">Add To Cart</button>
</form>

Login Form

Username

Password

Remember Me?

Login

<form class="form-fauxPlaceholders-html5">
    <div class="form_group-compound-has-icon">
        <input required type="text" class="form_input" placeholder="Ex: SkyUX">
        <i class="form_icon fa fa-user"></i>
        <label>Username</label>
    </div>
    <div class="form_group-compound-has-icon">
        <input required type="password" class="form_input" placeholder="••••••••">
        <i class="form_icon fa fa-key"></i>
        <label>Password</label>
    </div>
    <div class="row">
        <div class="span-8 va-middle">
            <input type="checkbox"> 
            <label>Remember Me?</label>
        </div>
        <div class="span-4 va-middle">
            <button type="submit" class="button-block-primary">Login</button>
        </div>
    </div>
</form>

Contact Us Form

Full Name

Email Address

Your Message

Submit Message

<form class="form-fauxPlaceholders-html5">
    <div class="span-8">
        <div class="row-flow">
            <div class="form_group span-6">
                <input type="text" class="form_input-bg" id="fullName" placeholder="Ex: John Smith" required="">
                <label for="fullName">Full Name</label>
            </div>
            <div class="form_group span-6">
                <input type="email" class="form_input-bg" id="emailAddress" placeholder="john@smith.com" required="">
                <label for="emailAddress">Email Address</label>
            </div>
        </div>
        <div class="form_group">
            <textarea 
                class="form_input-bg" 
                placeholder="We aim to respond to all messages within 24 hours." 
                id="yourMessage" 
                rows="8" 
                required=""
            ></textarea>
            <label for="yourMessage">Your Message</label>
        </div>
        <button type="submit" class="button-block-primary-size-3">Submit Message</button>
    </div>
<<form>

Customizing

The forms can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
weight	lighter	The font-weight of all form modules.
input-color	base('text-color')	The text color of form input components.
input-border	1px solid color('greyscale', 'grey-3')	The border of form input components.
input-padding	0.65em	The padding of form input components.
bg-color	rgba(black, 0.025)	The background color of form input components with the bg modifier.
bg-focus-color	white	The background color of form input components with the bg modifier when focused.
valid-color	color('validation', 'valid')	The color for when an HTML5 form group is valid.
invalid-color	color('validation', 'invalid')	The color for when an HTML5 form group is invalid.
group-small-size	font-size('size-2')	The font-size of form group components with the small modifier.

To change one of the above values, pass your new value(s) to the forms() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include forms((
	'valid-color'   : #00ace5,
	'invalid-color' : black
));

Username