CSS Toolkit - Form

A CSS Toolkit module that templates common structural form elements to be extended with modifier classes.

Installation

• npm: npm install css-toolkit-form

Available Classes

• form-control - [form controls]
• checkbox - [checkboxs]
• radio - [radios]
• form-group - Any group of form control, vertical rhythm for forms.

Configuration

Adjust the custom properties to change the base defaults using postcss-custom-properties. For Example:

• --form-padding: .375rem .75rem;
• --form-color: #333;
• --form-background: #fff;
• --form-border-width: 1px;
• --form-border-color: currentColor;
• --form-vertical-rhythm: 1rem;

Use

Examples:

<form>

  <fieldset class="form-group">
    <label for="exampleInputEmail">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="[e-mail]">
    <small>We'll never share your email with anyone else.</small>
  </fieldset>

  <fieldset class="form-group">
    <label for="exampleInputPassword">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
  </fieldset>

  <fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>

  <fieldset class="input-group">
    <label for="exampleTextarea">Textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </fieldset>

  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>

  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>

  <div class="radio disabled">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
      Option three is disabled
    </label>
  </div>

  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>

</form>

Theming / Extending

As the module focuses on common structural styles, You can build your website-specific theme styles in your build process with PostCSS. For example:

@import "css-toolkit-form";

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

Basic visual tests are in test/index.html.

Browser Support

• Edge
• Firefox
• Google Chrome
• Internet Explorer 11+
• Opera
• Safari