Forms

HTML forms are probably the most daunting aspect of front-end development to markup and style. BaseWeb’s goal is to give you the tools for making forms easy to build and customize regardless of how simple or complex a form may be.

Structure

Along with all standard form elements, BaseWeb provides you with .form-group, .form-header, .form-action and .input-group classes to use for structuring a form layout. You also have the BaseWeb Grid System available for creating more complex form layouts.

<form>
  <header class="form-header">
    ...
  </header><!-- .form-header -->

  <div class="form-group">
    <div class="input-group">
      ...
    </div><!-- .input-group -->
  </div><!-- .form-group -->

  <div class="form-group">
    <div class="row">
      <div class="col col-6">
        <div class="input-group">
          ...
        </div><!-- .input-group -->
      </div><!-- .col -->
      <div class="col col-6">
        <div class="input-group">
          ...
        </div><!-- .input-group -->
      </div><!-- .col -->
    </div><!-- .row -->
  </div><!-- .form-group -->

  <footer class="form-action">
    ...
  </footer><!-- .form-action -->
</form>

Form Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in ultricies nunc. Maecenas egestas tellus eget ipsum fermentum commodo. Nam rhoncus magna quam, quis commodo lorem fermentum quis.

Variable Map

Form variables are encompassed within the $forms map and are used throughout all form mixins to set default values.

$forms: (
  'vertical-spacing' : 1.5rem,
  'vertical-align' : 0.75rem,
  'font-family' : inherit,
  'base-font-size' : 1em,
  'base-line-height' : 1.5em,
  'font-size' : 1em,
  'line-height' : 1.5em,
  'color' : $color,
  'color-label' : $color-dark,
  'color-placeholder' : #aaa,
  'color-select-arrow' : $color-dark,
  'border-radius' : $border-radius,

  'input' : (
    'padding' : 0.75em,
    'background' : rgba($white, 0.5),
    'border' : 1px solid rgba($black, 0.2),
    'box-shadow' : (0 1px 3px rgba($black, 0), inset 0 1px 3px rgba($black, 0.05)),

    'focus' : (
      'background': rgba($white, 1),
      'border': 1px solid rgba($blue, 1),
      'box-shadow': (0 1px 3px rgba($black, 0.05), inset 0 1px 3px rgba($black, 0)),
    )
  ),

  'choice' : (
    'padding' : 0.75em 0.75em 0.75em 2.25em,
    'background' : rgba($black, 0.05),
    'border' : 1px solid transparent,
    'box-shadow' : none,
  )
) !default;

Classes

These are that classes that BaseWeb provides for structuring a form. They are supplementary to a form’s base structure elements and can be omitted or expanded upon (using form mixins) depending on your needs.

.form-group

Form groups are the first structure element used in a BaseWeb forms. It applies our vertical spacing and a hook for adding modifier classes and custom styles.

<form>
  <div class="form-group">
    ...
  </div>
  <div class="form-group">
    ...
  </div>
  ...
</form>

.form-header

Used to define a form header. It gets the vertical spacing and custom typographic styles for headings and paragraph elements that it contains.

<form>
  <header class="form-header">
    <h2>...</h2>
    <p>...</p>
  </header>
</form>

Form Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in ultricies nunc. Maecenas egestas tellus eget ipsum fermentum commodo. Nam rhoncus magna quam, quis commodo lorem fermentum quis.

.form-action

Action groups are used to wrap form submission, resets and other form actions. It’s also a way to apply custom styles and modifiers as a form footer. Within the .form-action element, you also have the .input-align class to align none-input elements vertically.

<form>
  <footer class="form-action">
    ...
  </footer>
</form>

.input-group

Input groups are used to wrap groups of related input elements. It, like form groups, applies vertical spacing and another hook for adding modifier classes.

<form>
  <div class="form-group">
    <div class="input-group">
      ...
    </div>
    <div class="input-group">
      ...
    </div>
  </div>
</form>

.inline

You can create inline forms by adding the class .inline to form structure elements. If applied to a .form-group element, it also makes children .form-group and .input-group elements inline as well.

<form>
  <div class="form-group inline">
    ...
  </div>
</form>

Elements

BaseWeb supports a wide range of input types and form elements. By default, form inputs are set to display block at 100% width. They also receive half of the vertical spacing set in $forms.

The .inline class is available for all form elements to manually set them inline with spacing margins. They can also be set inline by applying .inline to a parent element.

Input

The .input class is used to style the most common input types: text, password, date, month, week, time, email, number, search, tel, url and color.

<input class="input" type="text" placeholder="Name">
<input class="input" type="email" placeholder="Email">
<input class="input" type="url" placeholder="http://">

Textarea

The .input class is used to style textareas. The height is then reset to auto so that it can be manually set with the rows attribute. They also have their max-width set to 100% so that they can’t be resized passed the width of their container.

<textarea class="input" rows="4"></textarea>

Select

Select elements are styled with the .input class and also receive custom styles with dropdown arrow. There are also custom styles applied to select elements that use the size and multiple attributes.

<select class="input">
  <option>Select Option 1</option>
  <option>Select Option 2</option>
  <option>Select Option 3</option>
</select>

<select class="input" multiple>
  ...
</select>

Checkbox and Radio

BaseWeb styles checkbox and radio inputs by wrapping them with labels and applying .checkbox and .radio classes to them.

<label class="checkbox">
  <input type="checkbox"> Checkbox Example 1
</label>

<label class="radio">
  <input type="radio" name="radio-1"> Radio Example 1
</label>

Choice

Choice elements are custom styled checkbox and radio input elements. They are represented by adding the .choice class to the wrapping label element of checkboxes and radios.

They receive extra padding so that they match the height of .input elements which also makes them more user friendly.

<label class="choice">
  <input type="checkbox"> Choice Checkbox Example 1
</label>

<label class="choice">
  <input type="radio" name="radio-1"> Choice Radio Example 1
</label>

Label

You’ll rarely have a form without labels and are styled differently depending on their context. There are a number of classes that are available to modify the appearance and behavior of labels.

<label>Default Label</label>

<!-- Makes subtle styles for sub label -->
<label class="sub">...</label>

<!-- Hides lables but keeps them accessible for screen readers -->
<label class="hide">...</label>

<!-- Makes labels display block with top padding for alignment -->
<label class="block">...</label>

<!-- Makes labels display inline-block with top padding for alignment -->
<label class="inline">...</label>

Notes

Notes are custom form elements in BaseWeb and are represented using the .note class. Notes can work as descriptive text, help text or any sort of informative text to help a user navigate a form. They are contextual and receive unique spacing based on their siblings.

<p class="note">...</p>

<div class="note">
  <p>...</p>
  <p>...</p>
</div>

This is an example note.

This is an example note.

State Classes

There are three validation states represented through the classes .success, .warning and .error. There’s also a fourth state class .active, that is used to simulate the focus styles for form inputs. It’s also possible to add these states to form elements directly.

<div class="form-group success">...</div>
<div class="form-group warning">...</div>
<div class="form-group error">...</div>
<div class="form-group active">...</div>

Mixins

Because of the complexity of HTML forms, BaseWeb mainly favors using classes and context to style forms. But there are a small set of mixins that can be used to expand form customization.

placeholder

Sets the placeholder text color for input fields that use the placeholder attribute.

@include placeholder( $color, $options: () );
Variable Type Default
$color Color $forms('color-placeholder')
$options Map $forms

make-form-group-base

Creates the styles for a base form group by applying vertical spacing.

@include make-form-group-base( $options: () );
Variable Type Default
$options Map $forms

make-form-group-inline

Creates the styles for making an inline form group element.

@include make-form-group-inline( $options: () );
Variable Type Default
$options Map $forms

make-input-inline

Creates the styles for making an inline form element.

@include make-input-inline( $options: () );
Variable Type Default
$options Map $forms

© 2018 . All rights reserved.