npm package: @getbase/forms
Description: Base Forms
Author: Matthew Hartman
Latest version: 4.1.0

# [Base Forms](http://getbase.org)

Base Forms is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.

[![Travis Build Status][travis-img]][travis] [![David Dependencies Status][david-img]][david]

[travis-img]:   https://img.shields.io/travis/getbase/forms.svg?branch=master
[david-img]:    https://img.shields.io/david/dev/getbase/forms.svg?branch=master&label=dependencies
[travis]:       https://travis-ci.org/getbase/forms
[david]:        https://david-dm.org/getbase/forms?type=dev

* * *

## Table of contents

* [Overview](#overview)
* [Installation](#installation)
* [Documentation](#documentation)
* [Demo](#demo)
* [Support](#support)
* [Authors](#authors)
* [License](#license)

* * *

## Overview

Base Forms contains styles for inputs, textarea, radios, checkboxes and other form elements.

* * *

## Installation

If you have an existing project and would like to include the Base forms module, run the following command:

```bash
npm install --save @getbase/forms
```

Once you have the forms module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:

#### CSS Import:
  ```css
  @import url("https://unpkg.com/@getbase/forms/index.css");
  ```

#### SCSS Import:

  ```scss
  /* Import Base Forms */
  @import "~@getbase/forms/scss/index";
  /* Your Other Styles */
  @import "main"
  ```


#### LESS Import:

  ```less
  /* Import Base Forms */
  @import "~@getbase/forms/less/index";
  /* Your Other Styles */
  @import "main"
  ```

* * *

## Documentation

Base Forms includes styles for inputs, textarea, radios, checkboxes and other form elements.

#### Helpers (Applies to SCSS/LESS)

| Helper Class | Purpose | Example | Outcome |
| ------------ | ------- | ------- | ------- |
| `.field` | Applies a width of `100%` | `<input class="field" />` | Applies a width of `100%` to a `field` element |
| `.disabled` | Applies a class of `disabled` | `<input class="disabled" />` | Applies disabled state to a `field` element |

### SCSS

#### Variables

| Variable | Purpose | Default | 
| -------- | ------- | ------- |
| `$base-input-height` | Height applied to all inputs | `36px` |
| `$base-input-placeholder-color` | Color applied to placeholder copy | `#999` |
| `$base-input-border-size` | Border size applied to all inputs | `1px` |
| `$base-input-border-radius` | Border radius applied to all inputs | `0px` |
| `$base-input-color` | Color applied to all inputs | `#000` |
| `$base-input-background-color` | Background color applied to all inputs | `#fff` |
| `$base-input-border-color` | Border color applied to all inputs | `#ccc` |
| `$base-input-border-focus-color` | Border color applied to all inputs on active | `#000` |
| `$base-select-box-height` | Height applied to select boxes | `36px` |

### LESS

#### Variables

| Variable | Purpose | Default | 
| -------- | ------- | ------- |
| `@base-input-height` | Height applied to all inputs | `36px` |
| `@base-input-placeholder-color` | Color applied to placeholder copy | `#999` |
| `$base-input-border-size` | Border size applied to all inputs | `1px` |
| `@base-input-border-radius` | Border radius applied to all inputs | `0px` |
| `@base-input-color` | Color applied to all inputs | `#000` |
| `@base-input-background-color` | Background color applied to all inputs | `#fff` |
| `@base-input-border-color` | Border color applied to all inputs | `#ccc` |
| `@base-input-border-focus-color` | Border color applied to all inputs on active | `#f7c723` |
| `@base-select-box-height` | Height applied to select boxes | `36px` |

* * *

## Demo

[View page example](https://unpkg.com/@getbase/forms/index.html) with the forms stylesheet applied.

* * *

## Support

* IE10+ and all other modern browsers.
* Please specify browsers you need to support in `package.json` according to [browserslist docs](https://github.com/ai/browserslist#queries).

* * *

## Authors

#### Matthew Hartman

* [https://twitter.com/matthewhartmans](https://twitter.com/matthewhartmans)
* [https://github.com/matthewhartman](https://github.com/matthewhartman)

* * *

## License

Code released under the [MIT Open Source](https://opensource.org/licenses/MIT) license.