Advanced Usage

Go off the wall and make custom forms while leaning on Slates variables to help out.

Depending on what you want to achieve, you may not want any styling at all. Yeah, ok thats a bit crazy but you might have a really wild form design and it might just be easy to roll your own skin. Thats not say you can't still use Slates helpers and build on them - you know it makes sense, Rodney.

Let's take example. We recommend setting up global forms, and then adjusting on a case by case basis. This will keep your code light.

Start off with something like this, which will give you the default form skin, using the settings from the config/_config-forms.scss:

.form {
  @include form-complete;
}

You can then go ahead and override or reset things:

.form {
  @include form-complete;
  &.custom-form {
    @include select($select-custom);
    @include inputs-all {
      @include type-free(18px, 12px, 12px);
      font-weight: $bold;
      background-color: $bright;
      border: 0;
      border-bottom: 4px solid $primary;
      &:focus {
        border: 0;
        border-bottom: 4px solid darken($primary, 20%);
        outline: none;
      }
    }

    select {
      border-bottom: 4px solid $primary;
      font-weight: $bold;
      &:focus {
        border-bottom: 4px solid darken($primary, 20%);
        outline: none;
      }
    }

    label {
      @include type-free(20px, 12px, 0);
      font-family: $customfont;
      font-weight: $bold;
    }
  }
}

You will end up with a custom form that looks like this:

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.