Forms || WBC GUI

Forms play an important role in our brand's products and services. All roads lead to a form so it’s important to get them right. These basic form elements have been carefully crafted and rigorously tested. Use them as the foundation for any form creation.

Checkboxes

Add version

to the Blender

1.0.0

Checkboxes can sit either to the left or the right of the label.

loading example…

<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

checkbox-flip

LESS

The main mixin is called: _checkboxes(WBC)

1.0.1

Checkboxes can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.

<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

checkbox-flip

LESS

The main mixin is called: _checkboxes(WBC)

1.0.2

Checkboxes can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.

<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

checkbox-flip

LESS

The main mixin is called: _checkboxes(WBC)

1.0.3

Checkboxes can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.

<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

checkbox-flip

LESS

The main mixin is called: _checkboxes(WBC)

1.0.4

Checkboxes can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS

The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.

<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

checkbox-flip

LESS

The main mixin is called: _checkboxes(WBC)

2.0.0

Checkboxes can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS

The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.

<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

checkbox-flip

LESS

The main mixin is called: _checkboxes(WBC)

2.0.1

Checkboxes can sit either to the left or the right of the label.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS

The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.

<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

checkbox-flip

LESS

The main mixin is called: _checkboxes(WBC)

2.0.2

Checkboxes can sit either to the left or the right of the label.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS

The checkboxes slimmed down to 24px after a month of cardio and strict diet. [#151](https://github.com/WestpacCXTeam/GUI-source/issues/151)
Printing the checkboxes although not very functional, will now at least look good and make clear what selection was selected.
Some love was given to IE8 though we can’t say the browser seems to return our affection.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS

The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.

<label class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

checkbox-flip

LESS

The main mixin is called: _checkboxes(WBC)

Input-Addons

Add version

to the Blender

1.0.0

Styled input fields with attached selects or buttons.

loading example…

<div class="input-addon">
	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
	<button type="submit" class="input-addon-btn">YOUR BUTTON TEXT</button>
</div>


<div class="input-addon">
	<label class="input-addon-select-wrapper">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<select class="input-addon-select">
			<option>Please select</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
		</select>
	</label>

	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
</div>

CSS

Modifier classes:

input-addon-faint
input-addon-flip

LESS

The main mixin is called: _input-addons(WBC)

1.0.1

Styled input fields with attached selects or buttons.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

The text inside the selects had just enough space so you could read them comfortably. Unless the text included a descender or ascender. In that case it would have been just a bit uncomfortable as you had to guess some parts of the letter. No more guessing. (#139)

<div class="input-addon">
	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
	<button type="submit" class="input-addon-btn">YOUR BUTTON TEXT</button>
</div>


<div class="input-addon">
	<label class="input-addon-select-wrapper">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<select class="input-addon-select">
			<option>Please select</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
		</select>
	</label>

	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
</div>

CSS

Modifier classes:

input-addon-faint
input-addon-flip

LESS

The main mixin is called: _input-addons(WBC)

2.0.0

Styled input fields with attached selects or buttons.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

The text inside the selects had just enough space so you could read them comfortably. Unless the text included a descender or ascender. In that case it would have been just a bit uncomfortable as you had to guess some parts of the letter. No more guessing. (#139)

<div class="input-addon">
	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
	<button type="submit" class="input-addon-btn">YOUR BUTTON TEXT</button>
</div>


<div class="input-addon">
	<label class="input-addon-select-wrapper">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<select class="input-addon-select">
			<option>Please select</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
		</select>
	</label>

	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
</div>

CSS

Modifier classes:

input-addon-faint
input-addon-flip

LESS

The main mixin is called: _input-addons(WBC)

2.0.1

Styled input fields with attached selects or buttons.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

The text inside the selects had just enough space so you could read them comfortably. Unless the text included a descender or ascender. In that case it would have been just a bit uncomfortable as you had to guess some parts of the letter. No more guessing. (#139)

<div class="input-addon">
	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
	<button type="submit" class="input-addon-btn">YOUR BUTTON TEXT</button>
</div>


<div class="input-addon">
	<label class="input-addon-select-wrapper">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<select class="input-addon-select">
			<option>Please select</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
		</select>
	</label>

	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
</div>

CSS

Modifier classes:

input-addon-faint
input-addon-flip

LESS

The main mixin is called: _input-addons(WBC)

2.0.2

Styled input fields with attached selects or buttons.
You can have a button or a select menu as an addon. To make it easier to use this element in a responsive site use the block option inside a col div.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS

The input-addons historically caused issues by refusing to dynamically size its width. Let’s not look back to those dark times but focus on the fact that we’ve fixed it now. (#239)
IE8 and IE9, although not our favorite browsers, received some love as well.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

The text inside the selects had just enough space so you could read them comfortably. Unless the text included a descender or ascender. In that case it would have been just a bit uncomfortable as you had to guess some parts of the letter. No more guessing. (#139)

<div class="input-addon">
	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
	<button type="submit" class="input-addon-btn">YOUR BUTTON TEXT</button>
</div>


<div class="input-addon">
	<label class="input-addon-select-wrapper">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<select class="input-addon-select">
			<option>Please select</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
		</select>
	</label>

	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
</div>

CSS

Modifier classes:

input-addon-faint
input-addon-flip

LESS

The main mixin is called: _input-addons(WBC)

Input-Fields

Add version

to the Blender

1.0.0

Input elements

Inputs are the most common form controls. Text-based input fields include support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and colour. The date element triggers the date selector in compliant browsers. Find out more about alert and error styling in forms.

loading example…

<input type="text" class="input-field" placeholder="YOUR PLACEHOLDER">

<div class="input-field-select-wrapper">
	<select class="input-field-select">
		<option>Please select</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
	</select>
</div>

LESS

The main mixin is called: _input-fields(WBC)

Input size

Set size using these classes to create larger or smaller form controls that match button sizes. There are only 2 sizes default and large. Use large for mobile apps.

loading example…

<input type="text" class="input-field input-field-lg" placeholder="YOUR PLACEHOLDER">

CSS

Modifier classes:

input-field-lg

LESS

The main mixin is called: _input-fields(WBC)

Disabled states

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

loading example…

<input type="text" class="input-field" placeholder="I'm a default text input" disabled>

<fieldset disabled>
	<input type="text" class="input-field" placeholder="I'm a default text input">
</fieldset>

LESS

The main mixin is called: _input-fields(WBC)

1.0.1

Input elements

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="YOUR PLACEHOLDER">

<div class="input-field-select-wrapper">
	<select class="input-field-select">
		<option>Please select</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
	</select>
</div>

LESS

The main mixin is called: _input-fields(WBC)

Input size

Set size using these classes to create larger or smaller form controls that match button sizes. There are only 2 sizes default and large. Use large for mobile apps.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field input-field-lg" placeholder="YOUR PLACEHOLDER">

CSS

Modifier classes:

input-field-lg

LESS

The main mixin is called: _input-fields(WBC)

Disabled states

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="I'm a default text input" disabled>

<fieldset disabled>
	<input type="text" class="input-field" placeholder="I'm a default text input">
</fieldset>

LESS

The main mixin is called: _input-fields(WBC)

1.0.2

Input elements

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="YOUR PLACEHOLDER">

<div class="input-field-select-wrapper">
	<select class="input-field-select">
		<option>Please select</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
	</select>
</div>

LESS

The main mixin is called: _input-fields(WBC)

Input size

Set size using these classes to create larger or smaller form controls that match button sizes. There are only 2 sizes default and large. Use large for mobile apps.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field input-field-lg" placeholder="YOUR PLACEHOLDER">

CSS

Modifier classes:

input-field-lg

LESS

The main mixin is called: _input-fields(WBC)

Disabled states

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="I'm a default text input" disabled>

<fieldset disabled>
	<input type="text" class="input-field" placeholder="I'm a default text input">
</fieldset>

LESS

The main mixin is called: _input-fields(WBC)

1.0.3

Input elements

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="YOUR PLACEHOLDER">

<div class="input-field-select-wrapper">
	<select class="input-field-select">
		<option>Please select</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
	</select>
</div>

CSS

Modifier classes:

input-field-block

LESS

The main mixin is called: _input-fields(WBC)

Input size

Set size using these classes to create larger or smaller form controls that match button sizes. There are only 2 sizes default and large. Use large for mobile apps.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field input-field-lg" placeholder="YOUR PLACEHOLDER">

CSS

Modifier classes:

input-field-lg

LESS

The main mixin is called: _input-fields(WBC)

Disabled states

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="I'm a default text input" disabled>

<fieldset disabled>
	<input type="text" class="input-field" placeholder="I'm a default text input">
</fieldset>

LESS

The main mixin is called: _input-fields(WBC)

2.0.0

Input elements

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="YOUR PLACEHOLDER">

<div class="input-field-select-wrapper">
	<select class="input-field-select">
		<option>Please select</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
	</select>
</div>

CSS

Modifier classes:

input-field-block

LESS

The main mixin is called: _input-fields(WBC)

Input size

Set size using these classes to create larger or smaller form controls that match button sizes. There are only 2 sizes default and large. Use large for mobile apps.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field input-field-lg" placeholder="YOUR PLACEHOLDER">

CSS

Modifier classes:

input-field-lg

LESS

The main mixin is called: _input-fields(WBC)

Disabled states

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="I'm a default text input" disabled>

<fieldset disabled>
	<input type="text" class="input-field" placeholder="I'm a default text input">
</fieldset>

LESS

The main mixin is called: _input-fields(WBC)

2.0.1

Input elements

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="YOUR PLACEHOLDER">

<div class="input-field-select-wrapper">
	<select class="input-field-select">
		<option>Please select</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
		<option>YOUR Option</option>
	</select>
</div>

CSS

Modifier classes:

input-field-block

LESS

The main mixin is called: _input-fields(WBC)

Input size

Set size using these classes to create larger or smaller form controls that match button sizes. There are only 2 sizes default and large. Use large for mobile apps.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field input-field-lg" placeholder="YOUR PLACEHOLDER">

CSS

Modifier classes:

input-field-lg

LESS

The main mixin is called: _input-fields(WBC)

Disabled states

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

We added a "block" class to the selects so they can stretch as wide as the input fields stretch. No stretch marks though. (#186)
IE8 and IE9 got some visual love because we care, not because they deserved it. (#193)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

Our recent move to system fonts means we trust the system to take care of something as basic as the display of a font. Turns out you can't trust Microsoft with such a task as they increase the size of the font rather than just the face. We fixed that and wrote an angry constructive letter to Redmond. It's always important to vent your frustrations in a productive manner. (#174)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS

Somewhere at Microsoft a person decided that placeholder text should look like input text. Making it less placeholder text and more like... text. We were sure there was logic in there somewhere but we couldn't find it so we made it a tint in all browsers (including the elusive IE) to match the default styling of sensible browsers. (#152)

<input type="text" class="input-field" placeholder="I'm a default text input" disabled>

<fieldset disabled>
	<input type="text" class="input-field" placeholder="I'm a default text input">
</fieldset>

LESS

The main mixin is called: _input-fields(WBC)

Input-Groups

Add version

to the Blender

1.0.0

Styled input fields with attached attributes ie $ or %.

loading example…

<label class="input-group">
	<span class="input-group-text">Income:</span>

	<span class="input-group-addon">AUS $</span>
	<input type="text" class="input-group-input" placeholder="Income">
	<span class="input-group-addon">.00</span>
</label>

LESS

The main mixin is called: _input-groups(WBC)

2.0.0

Styled input fields with attached attributes ie $ or %.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)

<label class="input-group">
	<span class="input-group-text">Income:</span>

	<span class="input-group-addon">AUS $</span>
	<input type="text" class="input-group-input" placeholder="Income">
	<span class="input-group-addon">.00</span>
</label>

LESS

The main mixin is called: _input-groups(WBC)

2.0.1

Styled input fields with attached attributes ie $ or %.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)

<label class="input-group">
	<span class="input-group-text">Income:</span>

	<span class="input-group-addon">AUS $</span>
	<input type="text" class="input-group-input" placeholder="Income">
	<span class="input-group-addon">.00</span>
</label>

LESS

The main mixin is called: _input-groups(WBC)

2.0.2

Styled input fields with attached attributes ie $ or %.
To make it easier to use this element in a responsive site use the block option inside a col div.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS

The input-groups historically caused issues by refusing to dynamically size its width. Let’s not look back to those dark times but focus on the fact that we’ve fixed it now. (#239)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)

<label class="input-group">
	<span class="input-group-text">Income:</span>

	<span class="input-group-addon">AUS $</span>
	<input type="text" class="input-group-input" placeholder="Income">
	<span class="input-group-addon">.00</span>
</label>

LESS

The main mixin is called: _input-groups(WBC)

Radios

Add version

to the Blender

1.0.0

Radio buttons can sit either to the left or the right of the label.

loading example…

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

radio-flip

LESS

The main mixin is called: _radios(WBC)

1.0.1

Radio buttons can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

radio-flip

LESS

The main mixin is called: _radios(WBC)

1.0.2

Radio buttons can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

radio-flip

LESS

The main mixin is called: _radios(WBC)

1.0.3

Radio buttons can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

radio-flip

LESS

The main mixin is called: _radios(WBC)

1.0.4

Radio buttons can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS

The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

radio-flip

LESS

The main mixin is called: _radios(WBC)

2.0.0

Radio buttons can sit either to the left or the right of the label.

loading example…

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS

The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

radio-flip

LESS

The main mixin is called: _radios(WBC)

2.0.1

Radio buttons can sit either to the left or the right of the label.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS

The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

radio-flip

LESS

The main mixin is called: _radios(WBC)

2.0.2

Radio buttons can sit either to the left or the right of the label.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS

The radios slimmed down to 24px after a month of cardio and strict diet. [#151](https://github.com/WestpacCXTeam/GUI-source/issues/151)
Printing the radios although not very functional, will now at least look good and make clear what selection was selected.
Some love was given to IE8 though we can’t say the browser seems to return our affection.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS

The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS

Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS

BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:

radio-flip

LESS

The main mixin is called: _radios(WBC)

Switches

Add version

to the Blender

1.0.0

Switches

These are very simple toggle switches ideal for use in settings or preference screens. The switch can be blank or contain a simple string for example; yes/no, on/off etc. Please note: These switches are a fixed width. They are not for use with longs text strings.

loading example…

<label class="switch">
	<input type="checkbox" class="switch-input">

	<span class="switch-text">
		Turn this setting:
		<span class="switch-text-off">Off</span>
		<span class="switch-text-on">On</span>
	</span>
</label>

CSS

Modifier classes:

switch-buff

LESS

The main mixin is called: _switches(WBC)

Switch sizes

Please do not use any other swtich heights than those shown here.

loading example…

<label class="switch switch-buff switch-sm">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

switch-sm
switch-lg
switch-xl

LESS

The main mixin is called: _switches(WBC)

Switch responsive sizes

You can resize the switches on our breakpoints. All you have to do is add the breakpoint to your size class. E.g. switch-sm becomes switch-sm-lg for a switch that will change to a small switch on the large breakpoint. Breakpoints are the same as we use in the grid.

Demo

loading example…

<label class="switch switch-buff switch-sm switch-xl-md">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

lists-tick

LESS

The main mixin is called: _switches(WBC)

1.0.1

Switches

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch">
	<input type="checkbox" class="switch-input">

	<span class="switch-text">
		Turn this setting:
		<span class="switch-text-off">Off</span>
		<span class="switch-text-on">On</span>
	</span>
</label>

CSS

Modifier classes:

switch-buff

LESS

The main mixin is called: _switches(WBC)

Switch sizes

Please do not use any other switch heights than those shown here.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch switch-buff switch-sm">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

switch-sm
switch-lg
switch-xl

LESS

The main mixin is called: _switches(WBC)

Switch responsive sizes

Demo

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch switch-buff switch-sm switch-xl-md">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

lists-tick

LESS

The main mixin is called: _switches(WBC)

2.0.0

Switches

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch">
	<input type="checkbox" class="switch-input">

	<span class="switch-text">
		Turn this setting:
		<span class="switch-text-off">Off</span>
		<span class="switch-text-on">On</span>
	</span>
</label>

CSS

Modifier classes:

switch-buff

LESS

The main mixin is called: _switches(WBC)

Switch sizes

Please do not use any other switch heights than those shown here.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch switch-buff switch-sm">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

switch-sm
switch-lg
switch-xl

LESS

The main mixin is called: _switches(WBC)

Switch responsive sizes

Demo

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch switch-buff switch-sm switch-xl-md">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

lists-tick

LESS

The main mixin is called: _switches(WBC)

2.0.1

Switches

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch">
	<input type="checkbox" class="switch-input">

	<span class="switch-text">
		Turn this setting:
		<span class="switch-text-off">Off</span>
		<span class="switch-text-on">On</span>
	</span>
</label>

CSS

Modifier classes:

switch-buff

LESS

The main mixin is called: _switches(WBC)

Switch sizes

Please do not use any other switch heights than those shown here.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch switch-buff switch-sm">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

switch-sm
switch-lg
switch-xl

LESS

The main mixin is called: _switches(WBC)

Switch responsive sizes

Demo

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch switch-buff switch-sm switch-xl-md">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

lists-tick

LESS

The main mixin is called: _switches(WBC)

2.0.2

Switches

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS

The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch">
	<input type="checkbox" class="switch-input">

	<span class="switch-text">
		Turn this setting:
		<span class="switch-text-off">Off</span>
		<span class="switch-text-on">On</span>
	</span>
</label>

CSS

Modifier classes:

switch-buff

LESS

The main mixin is called: _switches(WBC)

Switch sizes

Please do not use any other switch heights than those shown here.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS

The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch switch-buff switch-sm">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

switch-sm
switch-lg
switch-xl

LESS

The main mixin is called: _switches(WBC)

Switch responsive sizes

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS

The background of the switches have gone from light to white because that’s even lighter. (#221)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS

Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS

To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS

Being the new kid on the block, the switches needed a good talking to about the rules of the GUI street. All GUI kids need to be printable, have disabled states and behave while playing with the others. The switches promised to better and from now on hang around in the forms category where other like-minded GUI modules hang around. Proud parents here. #155, #156, #153
We removed the buff flavour of the switches. The class sounded cool but making it look different caused more confusion than coolness.

<label class="switch switch-buff switch-sm switch-xl-md">
	<input type="checkbox" class="switch-input">
	<span class="switch-text">Enable some setting?</span>
</label>

CSS

Modifier classes:

lists-tick

LESS

The main mixin is called: _switches(WBC)

# Checkboxes

CSS

LESS

What’s new since v1.0.0

CSS

LESS

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

What’s new since v1.0.2

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

What’s new since v1.0.3

What’s new since v1.0.2

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

What’s new since v1.0.4

What’s new since v1.0.3

What’s new since v1.0.2

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

What’s new since v2.0.0

What’s new since v1.0.4

What’s new since v1.0.3

What’s new since v1.0.2

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

What’s new since v2.0.1

What’s new since v2.0.0

What’s new since v1.0.4

What’s new since v1.0.3

What’s new since v1.0.2

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

# Input-Addons

CSS

LESS

What’s new since v1.0.0

CSS

LESS

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

What’s new since v2.0.0

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

What’s new since v2.0.1

What’s new since v2.0.0

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

# Input-Fields

Input elements

LESS

Input size

CSS

LESS

Disabled states

LESS

Input elements

What’s new since v1.0.0

LESS

Input size

What’s new since v1.0.0

CSS

Checkboxes

Input-Addons

Input-Fields