FormHack

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

FormHack now supports vanilla CSS using CSS Custom Variables!

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.

Installation

1. Download from Github (SCSS and SASS versions available)

2. Clone the repo

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

3. Install via bower

    bower install formhack
    

Example Config

This is an example config which shows the default settings:

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

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

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

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

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

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

// Layout
$fh-centered: false !default;
$fh-display: block !default;
// Font
$fh-font-family: 'Raleway', sans-serif !default
$fh-font-size: 16px !default
$fh-font-color: rgb(40, 40, 40) !default

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

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

// Select Vendor Styling
$fh-allow-select-vendor-styling: true !default

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

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

// Layout
$fh-centered: false !default
$fh-display: block !default
:root {
  /* 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: var(--fh-border-color);
  --fh-focus-font-color: var(--fh-font-color);

  /* Select Vendor Styling */
  --fh-select-vendor-styling: none; /* comment this out to maintain vendor styling */


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

  /* Layout */
  --fh-layout-display: block;
  --fh-layout-margin: 10px 0; /* change to "10px auto" to center */
  --fh-layout-text-align: left;
}

With these default settings, you can acheive the styling below:

Input

Value 1
Value 2
Value 3
Value 1
Value 2
Value 3

Datalist

Textarea

Select and Option

Buttons and Input Type Submit/Reset

Fieldset

Legend Title