Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# basscss-base-forms v1.0.2

# Base Forms

NPM Github

Forms use base styles for their structure with color styles applied to adjust the look and feel. This creates a rhythmic consitency among all forms while allowing thematic differences where needed. Form elements do not rely on nested styles or markup structure, so utility styles can be used for contextual adjustments.

## Inline Forms

By default, form elements display inline.

Search

    <form>
      <label>Search</label>
      <input type="text" class="mb0 field-light">
      <button class="button-blue">Go</button>
    </form>

## Stacked Forms

Use `.block` and other utilities to stack form elements. The use of utilities allows for a lot of flexibility when building form layouts.

Email Address Password Select
Remember me

    <form class="sm-col-6">
      <label>Email Address</label>
      <input type="text" class="block full-width field-light">
      <label>Password</label>
      <input type="password" class="block full-width field-light">
      <label>Select</label>
      <select class="block full-width field-light">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
      </select>
      <label class="block full-width mb2">
        <input type="checkbox" checked>
        Remember me
      </label>
      <button type="submit" class="button-blue">Sign In</button>
      <button type="reset" class="button-gray">Cancel</button>
    </form>

Fieldsets can be reset with .fieldset-reset to allow for easier styling of the fieldset and legend.

Fieldset Legend Hamburger Hot Dog

    <form class="sm-col-6">
      <fieldset class="fieldset-reset">
        <legend class="h3 bold">Fieldset Legend</legend>
        <label>Hamburger</label>
        <input type="text" class="block full-width field-light">
        <label>Hot Dog</label>
        <input type="text" class="block full-width field-light">
      </fieldset>
      <button type="sumbit" class="button-blue">Submit</button>
    </form>