formbase

Better default styles for common input elements.

formbase eliminates cross browser bugs, inconsistencies across systems and applies a beautiful default styling to several input elements.

Demos
Features
Setup
Usage
Options
Semver strategy

Demos

Name	Description	Link
Default	Includes all features.	Try it on CodePen

Features

Works in all modern browsers (and IE11)
No JavaScript, just CSS
Works with inputs, textareas, checkboxes and radio buttons
Zero dependencies

Setup

We recommend to install formbase using Bower or npm.

bower install formbase

npm install formbase

Include the CSS file in the head…

<link rel="stylesheet" href="dist/formbase.min.css">

…or import the SASS file directly:

@import 'src/styles/main';

Usage

Input

<input class="input" type="text">

Textarea

<textarea class="input" rows="8" cols="40"></textarea>

Select

<select class="select">
	<option selected disabled>-</option>
	<option value="one">One</option>
	<option value="two">Two</option>
</select>

Radio

<div class="control">
	<input class="control__input" id="Radio" type="radio">
	<label class="control__label" for="Radio">Radio</label>
</div>

Checkbox

<div class="control">
	<input class="control__input" id="checkbox" type="checkbox">
	<label class="control__label" for="checkbox">Checkbox</label>
</div>

Options

Import src/styles/main.scss directly to customize formbase:

$formbase__prefix     : ''; // Class name prefix
$formbase__gutter     : 1.8rem; // Base size for margin and padding
$formbase__background : #fff; // Background color
$formbase__svg        : #000; // Fill color for svgs (hex value only!)
$formbase__border     : #bbb; // Border color
$formbase__active     : #0c69d6; // Active highlight color
$formbase__shadow     : inset 0 1px 3px rgba(0, 0, 0, .05); // Shadow styling
$formbase__duration   : .3s; // Transition duration
$formbase__timing     : ease; // Transition timing

@import "src/styles/main";

Semver strategy

Any change to CSS rules whatsoever is considered backwards-breaking and will result in a new major release. Others changes with no impact on rendering are considered backwards-compatible and will result in a new patch release. No changes to CSS rules can add functionality in a backwards-compatible manner, therefore no changes are considered minor.

syndicatefx/formbase