Configuring the Form mixins
Go beyond the defaults and make HTML forms work they way you want them to. Learn how to set up forms with this guide.
Forms are one of the most painful things to build out in a website. Thankfully Slate comes packed with a few mixins that can make this job real easy. This guide is an overview of the configuration settings that make your form tick.
The main config for the form as a whole is at the top of the style sheet. We tried hard to strike a balance between dictating how your form should look, whilst still giving you a quick way to setup the basics easily.
Since this is variable driven, it's totally possible to have several forms on the site with different settings, just copy the
$form-skin-default, variable, rename it, change what you want and feed it to the form mixin.
$form-skin: ( // Components components: ( baseform: true, inputs: true, addons: true, select: true, range: true, validation: true ), // Form Element form: ( margin: 0 0 0 0, padding: 0, color: $dark, ), // Legend Element legend: ( margin: 0 0 0 0, line-height: $line-height, ), // Fieldset Element fieldset: ( margin: 0 0 0 0, padding: 24px 0 24px 0, ), // Label Elements labels: ( color: $dark, spacing: 0 0 0 0, ), // Skins skins: ( inputs: $input-skin, addons: $input-skin, select: $input-skin, range: $input-skin, validation: $input-skin, ), );
Most of the settings should be self explantory, but we should probably explain two of them. Lets deal with the components first, and then take a look at skins.
Forms on a website are made up of a number of elements. Set all of these to true to get all the form features available in Slate. You can generate less code by setting some of them to false.
$form-skin-default: ( components: ( baseform: true, inputs: true, addons: true, select: true, validation: true ) ... );
|Baseform||baseform will enable some basic form tag stuff, basically a reset and some sensible defaults.|
|Inputs||inputs will enable the built in styled inputs which have their own variable to style those up. If you want to style your own inputs (why??), set this to false.|
|Addons||addons is an extension to the inputs and allows you to add a button perfectly aligned to either ends of an input. If you are not using this, set to false.|
|Validation||validation generates code for input validation states with HTML5 or via classes. Works great with server side validation. If you have other ideas on styling your validation, set this to false.|
$form-skin-default: ( ... skins: ( inputs: $input-default, addons: $addon-default, select: $select-default, validation: $validation-default, ) );
|Inputs||inputs sets the variable to use for global form inputs. This can be edited in src/sass/config/_config-forms.scss.|
|Addons||addons sets the variable to use for global form add-ons. This can be edited in src/sass/config/_config-forms.scss.|
|Select||select sets the variable to use for global select elements. This can be edited in src/sass/config/_config-forms.scss.|
|Validation||validation sets the variable to use for global form validation states. This can be edited in src/sass/config/_config-validation.scss.|