Configuring the Form mixins

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.

Basic use

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.

Components

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
 )
 ...
);

Skins

$form-skin-default: (
 ...
 skins: (
 inputs: $input-default,
 addons: $addon-default,
 select: $select-default,
 validation: $validation-default,
 )
);