ireade / formhack

A hackable css form reset

FormHack

FormHack is a hackable SASS-based css form reset. Although there are standard css resets for forms out there, I wanted to create one that I could easily customize for any site, without having to worry about cross-browser compatibility and differences.

FormHack works by providing a few variables that allow you to change some common attributes such as border-radius, input height/width, and colours. By changing these attributes, you will get a beautiful form that is consistent across all major browsers. I have also organised the code in a way that is (hopefully) easy for you to edit if you want to alter more than the given settings.

If you have any questions or suggestions for how I can make this better, tweet me at @ireaderinokun.

Getting Started

You can use any of the following methods to start using Formhack -

Install with Bower

bower install formhack

Clone this repository

git clone https://github.com/ireade/formhack.git

Config

This is the default config and the variables you can change -

// Font
$fh-font-family: 'Raleway', sans-serif;
$fh-font-size: 16px;
$fh-font-color: rgb(40, 40, 40);

// Borders
$fh-border-radius: 5px;
$fh-border-width: 1px;
$fh-border-style: solid;
$fh-border-color: rgb(200, 200, 200);

// Inputs, Textareas, Select, Option
$fh-input-height: 40px;
$fh-input-width: 100%;
$fh-input-max-width: 400px;
$fh-input-bg-color: #fff;
$fh-focus-bg-color: rgb(220, 220, 220);
$fh-focus-border-color: $fh-border-color;
$fh-focus-font-color: $fh-font-color;

// Select Vendor Styling
$fh-allow-vendor-styling: true;

// Fieldset & Legend Styling
$fh-fieldset-bare: false;

// Buttons & Input Submits
$fh-button-height: 40px;
$fh-button-width: 100%;
$fh-button-max-width: 200px;
$fh-button-font-color: $fh-font-color;
$fh-button-bg-color: $fh-focus-bg-color;
$fh-button-hover-bg-color: $fh-border-color;
$fh-button-hover-font-color: $fh-font-color;

// Layout
$fh-centered: false;
$fh-display: block;

Variables

Here is an explanation of what some of the variables control.

Variable	Description
$fh-allow-vendor-styling	Boolean. Specifies whether you want the select element to have the different browser styling
$fh-fieldset-bare	Boolean. Specifies whether you want the fieldset element to be styled or bare.
$fh-centered	Boolean. Specifies whether the elements should be centered
$fh-display	String. Specifies what value you want the display css property to be set to