Buttons

When to Use

Buttons are available for use with forms, but can be used standalone. Below are examples of the various button styles available.

Buttons can be used with either <button> or <a> elements. Use whichever is more semantically appropriate for your need.

Functionality

Execute appropriate action and move the user to the next step.

Rendered Code

Regular Buttons

btn btn-primary btn btn-primary disabled btn secondary btn btn-transparent


Small Buttons

btn btn-primary btn btn-primary


Special Styles

button with number12

btn btn-transparent no-padding

icon

Centered Button
HTML 
Regular Buttons


btn btn-primary
btn secondary
btn btn-primary disabled
btn btn-transparent






Small Buttons

btn btn-primary
btn btn-primary







Special Styles


	button with number12





btn btn-transparent no-padding




icon






  Centered Button
CSS 
.btn {
  background: #ccc;
  border: 0;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  margin-right: 10px;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  /* icon */
}
.btn.inactive {
  background: #f3f3f3;
  border-color: #ddd;
  color: #ddd !important;
  cursor: pointer;
  text-shadow: none;
}
.btn:hover {
  color: #333;
  text-decoration: none;
}
.btn:last-child {
  margin-right: 0;
}
.btn .fa {
  margin-right: 8px;
  position: relative;
  top: 1px;
}

/* styling */
.btn.btn-primary,
.btn.btn-secondary {
  border-radius: 30px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
.btn.btn-primary.inactive,
.btn.btn-secondary.inactive {
  cursor: pointer !important;
}

.btn.btn-primary {
  background-color: #07A9DF;
  background-image: -webkit-linear-gradient(#07A9DF, #1683b8);
  background-image: linear-gradient(#07A9DF, #1683b8);
  color: #fff;
}
.btn.btn-primary.inactive {
  background: #ddd !important;
  color: #fff !important;
}
.btn.btn-primary:active {
  background: #999;
}
.btn.btn-primary:hover {
  background: #1683b8;
  color: #fff;
}

.btn.btn-secondary {
  background-color: #949494;
  background-image: -webkit-linear-gradient(#cbc8c8, #949494);
  background-image: linear-gradient(#cbc8c8, #949494);
  color: #fff;
}
.btn.btn-secondary.inactive {
  background: #949494 !important;
  color: #fff !important;
}
.btn.btn-secondary:active {
  background: #999;
}
.btn.btn-secondary:hover {
  background: #949494;
  color: #fff;
}

.btn.btn-transparent {
  background: transparent;
  color: #1683b8;
  font-weight: 700;
  text-decoration: underline;
  text-transform: uppercase;
}
.btn.btn-transparent.inactive {
  background: transparent !important;
  color: #ddd !important;
  cursor: pointer !important;
}
.btn.btn-transparent:active {
  background: #999;
}
.btn.btn-transparent:hover {
  color: #141F48;
  text-decoration: underline;
}

.btn.btn-small {
  font-weight: 300;
  padding: 7px 12px;
  text-transform: none;
}

.btn.btn-counter {
  background: transparent;
  color: #fff;
  font-weight: 700;
  margin-right: 0;
  overflow: hidden;
  padding: 0;
  text-transform: uppercase;
}
.btn.btn-counter .text,
.btn.btn-counter .number {
  background: #07A9DF;
  display: inline-block;
  padding: 15px 25px;
}
.btn.btn-counter .text {
  border-radius: 30px 0 0 30px;
  background-color: #07A9DF;
  background-image: -webkit-linear-gradient(#07A9DF, #1683b8);
  background-image: linear-gradient(#07A9DF, #1683b8);
}
.btn.btn-counter .text.inactive {
  cursor: pointer !important;
}
.btn.btn-counter .number {
  background-color: #1683b8;
  border-radius: 0 30px 30px 0;
  background-image: -webkit-linear-gradient(#0296c7, #056fa1);
  background-image: linear-gradient(#0296c7, #056fa1);
  margin-right: 5px;
  padding-left: 18px;
}

.center_button {
  text-align: center;
}

/* Button Actions */
.btn,
.btn-function,
.btn-action {
  cursor: pointer;
}

.btn .fa,
.btn-function .fa,
.btn-action .fa {
  margin-right: 7px;
}

.btn .fa:hover,
.btn-function .fa:hover,
.btn-action .fa:hover {
  color: inherit;
}
JavaScript 
// No JavaScript Required

Checkboxes

When to Use

The check boxes are used when the user is allowed to make multiple selections from a list of items. A checked item marks a selection by the user.

A required input field is marked with an orange star.

Functionality

Styling is controlled using UniformJS.

Rendered Code

Checkboxes, Block Style


Checkboxes, Inline Style

HTML 
		

			
    
				
  • 
					
					
				
    • 
				
  • 
					
					
				
    • 
				
  • 
					
					
				
    •
CSS 
		ul.checklist li {
			float: left;
			margin-right: 20px;
			min-width: 33.3%;
		}

		ul.checklist .checker {	 float: left }
		ul.checklist label {
			float: left;
			top: 2px;
			width: 90%;
		}

		div.selector {
			background-position: 0 -275px;
			height: 55px;
			line-height: 55px;
			margin-left: -3px;
			overflow: hidden;
			padding: 0 0 0 10px;
			position: relative;
		}

		div.selector select {
			-moz-opacity: 0;
			background: none;
			border: none;
			filter: alpha(opacity=0);
			height: 50px;
			left: 0px;
			opacity: 0;
			position: absolute;
			top: 2px;
			width: 100%;
		}

		div.selector span {
			background-position: right 0;
			cursor: pointer;
			display: block;
			display: block;
			height: 55px;
			line-height: 55px;
			overflow: hidden;
			padding-right: 55px;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
		}

		div.selector.fixedWidth {	 width: 100% }
		div.selector.fixedWidth span {	width: 100% }
		div.selector.active {	 background-position: 0 -330px }
		div.selector.active span {	background-position: right -55px }
		div.selector.hover, div.selector.focus {	background-position: 0 -440px }
		div.selector.hover span, div.selector.focus span {	background-position: right -55px !important }
		div.selector.hover span, div.selector.focus span {	background-position: right -165px }
		div.selector.hover.active, div.selector.focus.active {	background-position: 0 -440px }
		div.selector.hover.active span, div.selector.focus.active span {	background-position: right -165px }
		div.selector.disabled, div.selector.disabled.active {	 background-position: 0 -495px }
		div.selector.disabled span, div.selector.disabled.active span {	 background-position: right -220px }
		div.selector {	background-position: 0 -276px !important }
		div.selector.hover, div.selector.focus {	background-position: 0 -331px !important }
JavaScript 
		$("select, input[type=text], input[type=checkbox], input[type=radio], input[type=password], input[type=search]").uniform({
			selectAutoWidth: false
		});
		$('input[type="checkbox"]').prop('checked', false);
		$.uniform.update();

Date of Birth

When to Use

When the user needs to enter the date of birth for the patient they'll use drop downs to select month/date/year. This was selected as a usable alternative to a date-picker which confuses many users, particularly in selecting the correct year.

Functionality

These behave just as any other drop downs. Content as shown.

Rendered Code
HTML
CSS 
/* DOB */
label[id^='dob-'] .selector.fixedWidth {
  margin-top: 0;
  width: 100px;
}
label[id^='dob-'] .selector.fixedWidth span {
  max-width: 1100px;
  width: 100%;
}
JavaScript 
// Initilizes UniformJS
$("select, input[type=text], input[type=checkbox], input[type=radio], input[type=password], input[type=search]").uniform({
	selectAutoWidth: false
});

Datepicker

When to Use

The date picker is used to aid the user in entering a date. It displays a small calendar and the user can navigate back and forth to pick at date. NOT applicable for date of birth. Then we will use separate drop downs for month/date/year. The user can edit the date once selected or enter the date by typing it in.

A required input field is marked with an orange star.

Functionality

Allow the user to enter a date successfully.

Rendered Code
HTML
CSS 
/* --- Datepicker  http://fengyuanchen.github.io/datepicker/ -------------------- */
.datepicker-container {
  font-size: 12px;
  font-family: arial, helvetica, sans-serif;
  line-height: 30px;
  float: left;
  position: absolute;
  z-index: 201312;
}

.datepicker-arrow,
.datepicker-arrow:after {
  border: 5px solid transparent;
  display: block;
  height: 0;
  width: 0;
}

.datepicker-arrow {
  border-bottom-color: #9cf;
  margin: 0 10px;
  position: relative;
}

.datepicker-arrow:after {
  border-bottom-color: #fff;
  content: " ";
  left: -5px;
  position: absolute;
  top: -4px;
}

.datepicker-content {
  border: 1px solid #ccc;
  border-top-color: #9cf;
  box-shadow: 0 0 3px #ccc;
  width: 210px;
  box-sizing: content-box;
}

.datepicker-prev,
.datepicker-next {
  font-size: 18px;
}

.datepicker-content ul:before,
.datepicker-content ul:after {
  content: "";
  display: table;
}

.datepicker-content ul:after {
  clear: both;
}

.datepicker-content ul {
  margin: 0;
  padding: 0;
  width: 102%;
  *zoom: 1;
}

.datepicker-content li {
  background-color: #fff;
  cursor: pointer;
  float: left;
  height: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 30px;
}

.datepicker-content .col-1 {
  width: 30px;
}

.datepicker-content .col-2 {
  width: 60px;
}

.datepicker-content .col-3 {
  width: 90px;
}

.datepicker-content .col-4 {
  width: 120px;
}

.datepicker-content .col-5 {
  width: 150px;
}

.datepicker-content .col-6 {
  width: 180px;
}

.datepicker-content .col-7 {
  width: 210px;
}

.datepicker-content li:hover {
  background-color: #eee;
}

.datepicker-content .selected,
.datepicker-content .selected:hover {
  color: #36f;
}

.datepicker-content .disabled,
.datepicker-content .disabled:hover {
  color: #ccc;
}

.datepicker-years li,
.datepicker-months li {
  height: 52.5px;
  line-height: 52.5px;
  width: 52.5px;
}

.datepicker-week li,
.datepicker-week li:hover {
  background-color: #fff;
  cursor: default;
}
JavaScript 
var now = Date.now();
$("#dateTBD").datepicker({
	isDisabled: function(date) {
		return date.valueOf() < now ? true : false;
	}
});

Input Boxes

When to Use

The input boxes are one of the primary ways for collecting user input. Here you can see input boxes in two states, default and error. When a user has submitted a page and we validate the input we use the red box to highlight those that we were unable to validate.

A required input field is marked with an orange star.

Functionality

Allow users to enter text.

Rendered Code
HTML
CSS 
/** --- Forms -------------------- */
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: #ddd;
  font-size: 1em;
}

input, select {
  box-sizing: border-box;
  display: block;
  width: 100%;
}
input.error, select.error {
  border-color: #ee5a4a;
}
input.validated, select.validated {
  border-color: #b4be00;
}

input[disabled] {
  background-color: #ccc !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea,
datalist + input {
  background-color: #fff;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #4A4A4A;
  margin: 0 0 10px 0;
  outline: none;
  padding: 0.4em 1em;
}
input[type="text"]:active,
input[type="email"]:active,
input[type="tel"]:active,
input[type="url"]:active,
input[type="date"]:active,
input[type="password"]:active,
input[type="number"]:active,
input[type="search"]:active,
select:active,
textarea:active,
datalist + input:active {
  outline: none;
}

input[type="search"] {
  font-size: 18px;
  padding-left: 3em;
}
input[type="search"]::-webkit-input-placeholder {
  color: #4A4A4A;
}
input[type="search"]:-moz-placeholder {
  color: #4A4A4A;
}
input[type="search"]::-moz-placeholder {
  color: #4A4A4A;
}
input[type="search"]:-ms-input-placeholder {
  color: #4A4A4A;
}

textarea {
  box-sizing: border-box;
  width: 100%;
}

.lt-ie9 input[type="text"] {
  background: #fff;
  -webkit-filter: none;
          filter: none;
  line-height: 32px;
}
.lt-ie9 .input_prepend {
  background: #fff;
  border: 1px solid #dcd8d8;
  border-radius: 0px;
  color: #4A4A4A;
  font-size: 16px;
  margin: 0 0 10px 0;
  outline: none;
  padding: 0.4em 1em;
}
.lt-ie9 .input_prepend:active {
  outline: none;
}
.lt-ie9 .input_prepend input {
  background: none;
  border: none;
  -webkit-filter: none;
          filter: none;
  overflow: visible;
  padding: 13px 0 0 0 !important;
}
JavaScript 
// Initilizes UniformJS
$("select, input[type=text], input[type=checkbox], input[type=radio], input[type=password], input[type=search]").uniform({
	selectAutoWidth: false
});

Radio Buttons

When to Use

The radio buttons are used when the user is only allowed to select one from a short list of items (usually 5 or less). A dot marks a selection by the user.

Functionality

Styling is controlled using UniformJS.

Rendered Code

Radio List, Block Example


Radio List, Inline Example

HTML 

	
    
		
  • 
			
			
		
    • 
		
  • 
			
			
		
    • 
	







Radio List, Inline Example



	
    
		
  • 
			
			
		
    • 
		
  • 
			
			
		
    •
CSS 
/* Radio Lists - Block */
.radiolist {
  list-style: none;
  margin: 0;
  overflow: auto;
}
.radiolist::after {
  clear: both;
  content: "";
  display: table;
}
.radiolist:after {
  display: table-cell;
}
.radiolist li.inline-field {
  width: auto;
}
.radiolist div.radio {
  float: left;
}
.radiolist div.radio + label {
  display: block;
  margin-left: 32px;
  position: relative;
  top: 3px;
}
JavaScript 
// Initilizes UniformJS
$("select, input[type=text], input[type=checkbox], input[type=radio], input[type=password], input[type=search]").uniform({
	selectAutoWidth: false
});

Select Dropdown

When to Use

These are used when the user is supposed to make a selection from a long list of items.

A required input field is marked with an orange star.

Functionality

Styling is controlled using UniformJS.

Rendered Code
HTML
CSS 
/* Select */
div.selector {
  /* start cap */
  background-position: 0 -246px;
  line-height: 46px;
  height: 46px;
  margin-left: -3px;
  padding: 0 0 0 13px;
  position: relative;
  overflow: hidden;
}
div.selector span {
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  background-position: right -18px;
  cursor: pointer;
  display: block;
  height: 46px;
  line-height: 46px;
  padding-right: 46px;
  width: 100%;
}
div.selector.fixedWidth {
  width: 100%;
}
div.selector.fixedWidth span {
  width: 100%;
}
div.selector select {
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  border: none;
  background: none;
  position: absolute;
  height: 46px;
  top: 0;
  left: 0px;
  width: 100%;
}
div.selector.active {
  background-position: 0 -303px;
}
div.selector.active span {
  background-position: right -75px;
}
div.selector.hover, div.selector.focus {
  background-position: 0 -303px;
}
div.selector.hover span, div.selector.focus span {
  background-position: right -75px;
}
div.selector.hover.active, div.selector.focus.active {
  background-position: 0 -303px;
}
div.selector.hover.active span, div.selector.focus.active span {
  background-position: right -75px;
}
div.selector.disabled, div.selector.disabled.active {
  background-position: 0 -246px;
}
div.selector.disabled span, div.selector.disabled.active span {
  background-position: right -18px;
}
JavaScript 
// Initilizes UniformJS
$("select, input[type=text], input[type=checkbox], input[type=radio], input[type=password], input[type=search]").uniform({
	selectAutoWidth: false
});

Sizing & Positioning Helpers

When to Use

By default, form fields will take up the length of their container. If you would like more control, the container can be given a CSS class with a width set. Below are examples of that CSS class being used.

Functionality

Not applicable.

Rendered Code

Sizing

Containers can be given a class of .input-small, .input-medium or .input-large.



Positioning

Containers with a CSS class of .inline-field will stack next to each other. Objects floated next to one another should reside in a clearfixed container.


HTML 


	

	

		




Positioning
 

Containers with a CSS class of .inline-field will stack next to each other. Objects floated next to one another should reside in a clearfixed container.
CSS 
/* Field Widths -------------------- */
.input-small {
  display: block;
  width: 80px;
}

.input-medium {
  display: block;
  width: 180px;
}

.input-large {
  display: block;
  width: 280px;
}

/* --- Inline Stacking Forms (place class on Label) -------------------- */
.inline-field {
  display: inline-block;
  float: left;
  margin-right: 25px;
  min-width: 80px;
}
.inline-field:last-child {
  margin-right: 0;
}
JavaScript 
/* Not Applicable */

Telephone

When to Use

Whenever the user need to enter a phone or fax number. This format helps to minimize input mistakes by the user by splitting the number up in familiar chunks.

Functionality

Styling is controlled using UniformJS.

Rendered Code
HTML
CSS 
		label.input_group.phone_number input {
			float: left;
			margin-right: 5px;
			width: 70px;
		}

		label.input_group.phone_number input:last-child { width: 86px; }
JavaScript 
// Initilizes UniformJS
$("select, input[type=text], input[type=checkbox], input[type=radio], input[type=password], input[type=search]").uniform({
	selectAutoWidth: false
});