Base Forms

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.

Table of contents

• Overview
• Installation
• Documentation
• Demo
• Support
• Authors
• 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:

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:

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

SCSS Import:

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

LESS Import:

/* 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 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.

Authors

Matthew Hartman

• https://twitter.com/matthewhartmans
• https://github.com/matthewhartman

License

Code released under the MIT Open Source license.