Basic Form Usage | Slate Framework

Working with Forms.

It's really easy to get a form up and running with Slate. At the absolute minimum, you need the following in your style sheet:

.form {
 @include form-complete;
}

Obviously the class can be anything you like, or you can do it directly on the form element. This will set up all the form input elements, select elements, and validation states.

Example Form

Name

Age

Telephone Number

Newsletter Sign Up

Choose a color

Choose a flavor:

Pets

Event Start

Appointment Time

Newsletter Sign-Up

How much? £

Pet Select

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Donation

Message

Styling the form

All the visual attributes for the forms can be changed via variables in 01-settings/_settings-forms.scss and 01-settings/_settings-forms-skin.scss.