Basic Form Usage

Forms. We all hate them. With just a few lines you can have your self a very nice form with barely any effort at all.

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. To learn how to use specific parts on their own, please read the advanced use guide.

To take it a little further, you can make use of the grid system to very quickly get some consistent structure for your forms:

Styling the form

All the visual attributes for the forms can be changed via variables in config/_config-forms.scss. The look and feel of buttons is controlled by config/_config-buttons.scss and of course you can add your styles on top.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.