Skip to content
Better default styles for common input elements.
CSS JavaScript
Branch: master
Clone or download

Latest commit

Latest commit c0568c5 May 10, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos Use flex for radio and option + Add long control text to test wrap May 5, 2019
dist Add a transition to all elements Feb 4, 2020
src/styles Add a transition to all elements Feb 4, 2020
.gitattributes Initial commit Nov 27, 2016
.gitignore Ignore `yarn.lock` and `package-lock.json` files Aug 8, 2017
CHANGELOG.md Updated changelog Mar 20, 2020
LICENSE Update copyright Jan 9, 2020
README.md Fix vars docs May 5, 2019
bower.json Remove gulp reference from bower Apr 21, 2019
build.js Update build May 10, 2020
package.json 12.0.1 Mar 20, 2020

README.md

formbase

Dependencies Donate via PayPal

Better default styles for common input elements.

formbase

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

Contents

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, selects, checkboxes and radio buttons
  • Consistent styling across browsers
  • Zero dependencies

Setup

We recommend installing formbase using npm or yarn.

npm install formbase
yarn add 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 the look of formbase:

$formbase__prefix: ''; // Class name prefix
$formbase__margin: .9rem; // Margin
$formbase__padding: .6rem; // Padding
$formbase__select_size: 12px; // Size of the select arrow
$formbase__control_size: 20px; // Size of the checkbox and radio button (1)
$formbase__radius: 0; // Input border radius
$formbase__svg: #000; // Hex color for svgs (2)
$formbase__color: #000; // Input and label color
$formbase__placeholder: #999; // Input placeholder color
$formbase__background: #fff; // Background color
$formbase__border: #bbb; // Border color
$formbase__active: #17f; // 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

// (1) It's recommended to use an absolute unit (px) for the control size to avoid half pixels. Half pixels can transform the circle of the radio control into an egg.
// (2) Only works with hex values

@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.

You can’t perform that action at this time.