Css-toolkit-form NPM

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="jane.doe@example.com">
    <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>