Skip to content

Latest commit

 

History

History
190 lines (134 loc) · 4.47 KB

README.md

File metadata and controls

190 lines (134 loc) · 4.47 KB

vui-input

Bower version NPM version Build status Dependency Status

This component contains Sass mixins and CSS which can be used to style different types of HTML input elements (text, checkboxes, radios, selects and textareas).

For further information on this and other VUI components, see the docs at ui.valence.d2l.com.

Installation

vui-input can be installed from Bower:

bower install vui-input

Or alternatively from NPM:

npm install vui-input

Usage

To style each type of input, first include its SCSS file from either bower_components or node_modules, depending on where it was installed from. Then, apply the mixin using a selector of your choosing -- an element or class selector is most common.

Text Inputs:

HTML:

<input type="text" placeholder="Enter a name..." />

SASS:

@import 'bower_components/vui-input/input.scss';
// or...
@import 'node_modules/vui-input/input.scss';

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"] {
	@include vui-input();
}

Result:

screenshot of text input

Checkboxes:

Browser Compatibility: Due to lack of support for custom input styling in Firefox and older versions of IE, checkboxes rendered in those browsers will have the operating system default style.

HTML:

<label class="checkbox-label">
	<input type="checkbox" />ketchup
</label><br />
<label class="checkbox-label">
	<input type="checkbox" />mustard
</label>

SASS:

@import 'bower_components/vui-input/input-checkbox.scss';
// or...
@import "node_modules/vui-input/input-checkbox.scss";

input[type="checkbox"] {
	@include vui-input-checkbox();
}

.checkbox-label {
	@include vui-input-checkbox-label();
}

Note: the vui-input-checkbox-label mixin used above helps control the alignment of the label text in situations where it might wrap onto multiple lines.

Result:

screenshot of checkboxes

Radios:

Browser Compatibility: Due to lack of support for custom input styling in Firefox and older versions of IE, radio buttons rendered in those browsers will have the operating system default style.

HTML:

<label class="radio-label">
	<input type="radio" name="food" checked />hot dog
</label><br />
<label class="radio-label">
	<input type="radio" name="food" />hamburger
</label>

SASS:

@import 'bower_components/vui-input/input-radio.scss';
// or...
@import "node_modules/vui-input/input-radio.scss";

input[type="radio"] {
	@include vui-input-radio();
}

.radio-label {
	@include vui-input-radio-label();
}

Note: the vui-input-radio-label mixin used above helps control the alignment of the label text in situations where it might wrap onto multiple lines.

Result:

screenshot of radio buttons

Selects:

HTML:

<select>
	<option>Option 1</option>
	<option>Option 2</option>
</select>

SASS:

@import 'bower_components/vui-input/select.scss';
// or...
@import "node_modules/vui-input/select.scss";

select {
	@include vui-input-select();
}

Result:

screenshot of select inputs

Textareas:

HTML:

<textarea placeholder="Enter a description..."></textarea>

SASS:

@import 'bower_components/vui-input/textarea.scss';
// or...
@import "node_modules/vui-input/textarea.scss";

textarea {
	@include vui-input-textarea();
}

Result:

screenshot of textareas

Coding styles

See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.