@getbase/forms NPM

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.

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

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:

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

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

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

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

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

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`

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`