Skip to content
Base Forms
CSS JavaScript HTML
Branch: master
Clone or download
matthewhartman Base Forms V4.1.0
- Removed gulp and replaced with webpack
- Updated scripts in package.json
- Updated documentation
- Version bump for index.scss/less and package.json
Latest commit fb092ee Dec 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
less Base Forms V4.1.0 Dec 10, 2018
scss Base Forms V4.1.0 Dec 10, 2018
.gitignore Base Forms V4.0.0 Apr 10, 2018
.travis.yml Base Forms V4.1.0 Dec 10, 2018
changelog.md Base Forms V4.1.0 Dec 10, 2018
index.css Base Forms V4.1.0 Dec 10, 2018
index.css.map Base Forms V4.1.0 Dec 10, 2018
index.html Base Forms V4.1.0 Dec 10, 2018
package-lock.json Base Forms V4.1.0 Dec 10, 2018
package.json Base Forms V4.1.0 Dec 10, 2018
readme.md Base Forms V4.1.0 Dec 10, 2018
webpack.config.js Base Forms V4.1.0 Dec 10, 2018
webpack.dev.config.js Base Forms V4.1.0 Dec 10, 2018

readme.md

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.

Travis Build Status David Dependencies Status


Table of contents


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


License

Code released under the MIT Open Source license.

You can’t perform that action at this time.