Form Elements

Buttons, Inputs, Dropdowns, and More

There are certain places where the default styles in browsers just aren't good enough or too inconsistent between the various browsers. One of the most worst areas of this are the various form elements, so Frow provides a consistent starting point across browsers for you to build off of.

<label>
  Name
  <input type="text" placeholder="Placeholder Text"></input>
</label>

<label>
  ZIP Code
  <input type="tel" maxlength="5"></input>
</label>

<label>
  Dropdown
  <select>
    <optgroup label="Group 1">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </optgroup>
  </select>
</label>

<label class="row-start">
  <input type="checkbox"></input>
  Option 1
</label>

<label class="row-start">
  <input type="radio" name="group-one" checked></input>
  Option 1
</label>

<div class="frow justify-around">
  <button class="col-xs-3-10">Regular</button>
  <button class="col-xs-3-10" disabled>Disabled</button>
  <a type="button" class="col-xs-3-10">Anchor</a>
</div>
Anchor

Customizable: You can color the elements to match your projects theme instantly using Sass variables, or even disable Frow's form styling completely.

Labels

To improve the usefulness of wrapping labels around form elements, labels by default are display:flex. You can use any of the Frow Shortcuts to alter the behavior of contents within the label.

<label>
  Address
  <input></input>
</label>

<label class="column-center">
  Address
  <input></input>
</label>

<label class="row-start">
  Address
  <input></input>
</label>
Customize To Your Liking

Frow's elements are a simple starting point ready for customization. Whether you love the default look and just want to add a splash of color, or want to do a big overhaul, Frow has provided you with a great starting point across all browsers. Make the design yours!

<style>
  select.my-custom-select {
    border: 0;
    border-radius: 3px;
    background-color: lightseagreen;
    color: #fff;
  }
  button.my-custom-button {
    background: none;
    border: 2px solid lightseagreen;
    color: lightseagreen;
  }
</style>

Customizable: Just want to change the overall color to match your theme? You don't even need to write CSS if you just use Frow's Sass variables. Have themed buttons in under 30 seconds.

Utilities