Form Elements

Buttons, Inputs, Dropdowns, and More

Frow's goal is not to style your page for you, but rather to make it easier do your own styling. However, there are certain places where the default starting point in browsers just isn'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 does apply some styling.

<label>Name</label>
<input type="text" placeholder="Placeholder Text"></input>
<div class="frow gutters">
    <div class="col-md-1-2">
        <label>Zipcode</label>
        <input type="text" pattern="\d*" maxlength="5"></input>
    </div>
    <div class="col-md-1-2">
        <label>Color</label>
        <select>
            <option>Red</option>
            <option>Green</option>
            <option>Blue</option>
        </select>
    </div>
</div>
<label>Text Area</label>
<textarea></textarea>
<div class="frow card-shadow">
    <button>Submit</button>
</div>
Reset Available

If you need an element to revert back to its default (non-Frow) styling, just add a .reset class to it. Be warned: it will be ugly again. Click here to toggle the .reset class below.

<label class="reset">Name</label>
<input class="reset"></input>
<div class="frow gutters">
    <div class="col-md-1-2">
        <label class="reset">Zipcode</label>
        <input class="reset"></input>
    </div>
    <div class="col-md-1-2">
        <label class="reset">Color</label>
        <select class="reset">
            <option>Red</option>
            <option>Green</option>
            <option>Blue</option>
        </select>
    </div>
</div>
<label class="reset">File Upload</label>
<input type="file" class="reset"></input>
<label class="reset">Text Area</label>
<textarea class="reset"></textarea>
<div class="frow card-shadow">
    <button class="reset">Submit</button>
</div>
Yuck!
Customize Away

Frow's elements are a simple starting point ready for customization. Frow has done the hard part of getting all the browsers in sync, now the design is up to you. Create your own classes for different colors or styles to 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>
Goodies

Frow is from Cody Sherman via Beg.in