Responsive Pattern Lib.

Form StylesView Example

Level Pattern description.

Example

HTML

<form>
  <label class="form-title" for="name">Name:</label>
  <input type="text" name="name" id="name" />

  <label class="form-title" for="email">Email:</label>
  <input type="email" name="email" id="email" />

  <label class="form-title">Favorite Color</label>
  <label class="choice"><input type="radio" name="radio" value="Red" />Red</label>
  <label class="choice"><input type="radio" name="radio" value="Blue" />Blue</label>
  <label class="choice"><input type="radio" name="radio" value="Green" />Green</label>

  <label class="form-title" for="checkbox">Favorite Animal</label>
  <label class="choice"><input type="checkbox" name="checkbox" value="Dog" />Dog</label>
  <label class="choice"><input type="checkbox" name="checkbox" value="Cat" />Cat</label>
  <label class="choice"><input type="checkbox" name="checkbox" value="Other" />Other</label>

  <label class="form-title" for="select">Age:</label>
  <select name="select" id="select">
    <option value="age-group-1">1-17</option>
    <option value="age-group-2">18-50</option>
    <option value="age-group-3">>50</option>
  </select>

  <label class="form-title" for="textarea">Tell us more:</label>
  <textarea  cols="50" rows="8" name="textarea" id="textarea"></textarea>

  <input type="submit" value="Submit" />

</form>

CSS

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
	display: block;
	margin-bottom: 10px;
	font-size: 1em;
	padding:5px;
	min-height: 2.75em;
	min-width: 200px;
	max-width: 300px;
	width: 100%;
}

input[type="submit"] {
	min-height: 3em;
	padding: 0 2.75em;
	font-size: 1em;
	border: none;
	background: mediumseagreen;
	color: white;
}

.form-title {
	display:block;
	font-weight: bold;
}

label input {
	margin-right: 10px;
}

.choice {
	margin-right: 15px;
	padding: 5px 0;
	display: block;
}

.choice + .form-title {
	margin-top: 10px;
}

@media screen and (min-width: 600px){
	.choice {
		display: inline;
	}
}

Fading TableView Pattern

Easy When the table is too wide, columns appear off stage and the user can scroll to the right to see them. The right fade is present to tell the user that there is more data to be seen.

• Pros:

• Accommodates small to medium sized tables
• The fade is neat touch

• Cons:

• Any row headers to the left of the table can be forgotten about when the user finally scrolls to the right end of the table
• The fade never goes away when the end of the table is reached (but this can be done with JS)

Example

HTML

<h3>Weekly Workout in Minutes</h3>
<table class="table-overflow">
	<thead>
		<th></th>
		<th>Monday</th>
		<th>Tuesday</th>
		<th>Wednesday</th>
		<th>Thursday</th>
		<th>Friday</th>
		<th>Saturday</th>
		<th>Sunday</th>
	</thead>

	<tbody>
		<tr>
			<td>Yoga</td>
			<td>60</td>
			<td>15</td>
			<td>-</td>
			<td>90</td>
			<td>60</td>
			<td>90</td>
			<td>30</td>
		</tr>
		<tr>
			<td>Cardio</td>
			<td>30</td>
			<td>30</td>
			<td>60</td>
			<td>30</td>
			<td>30</td>
			<td>-</td>
			<td>60</td>
		</tr>
		<tr>
			<td>Weights</td>
			<td>-</td>
			<td>90</td>
			<td>60</td>
			<td>-</td>
			<td>60</td>
			<td>-</td>
			<td>-</td>
		</tr>
	</tbody>
</table>

CSS

td, th {
	padding: 10px;
}
table {
	border: 2px solid #eee;
	border-collapse: collapse;
	border-spacing: 0;
}

@media screen and (max-width: 600px) {
	.table-overflow {
		display:block;
		overflow-x: scroll;

		/*used http://www.cssmatic.com/box-shadow*/
		-webkit-box-shadow: inset -28px 0px 40px -30px #ddd;
		-moz-box-shadow: inset -28px 0px 40px -30px #ddd;
		box-shadow: inset -28px 0px 40px -30px #ddd;
	}
}

Stacked TableView Pattern

Easy On smaller resolutions, each row has its own section with the column headings being repeated for each. This pattern takes up more vertical space, but we have more of that on smaller portrait-oriented screens.

• Pros:

• This pattern accommodates very wide tables
• This works well on mobile devices

• Cons:

• It is harder to compare data
• This pattern relies on adding a data-label attribute to every td element

Example

HTML

<h3>Weekly Workout in Minutes</h3>
<table class="table-overflow">
	<thead>
		<th></th>
		<th>Monday</th>
		<th>Tuesday</th>
		<th>Wednesday</th>
		<th>Thursday</th>
		<th>Friday</th>
		<th>Saturday</th>
		<th>Sunday</th>
	</thead>

	<tbody>
		<tr>
			<td>Yoga</td>
			<td data-label="Monday">60</td>
			<td data-label="Tuesday">15</td>
			<td data-label="Wednesday">-</td>
			<td data-label="Thursday">90</td>
			<td data-label="Friday">60</td>
			<td data-label="Saturday">90</td>
			<td data-label="Sunday">30</td>
		</tr>
		<tr>
			<td>Cardio</td>
			<td data-label="Monday">30</td>
			<td data-label="Tuesday">30</td>
			<td data-label="Wednesday">60</td>
			<td data-label="Thursday">30</td>
			<td data-label="Friday">30</td>
			<td data-label="Saturday">-</td>
			<td data-label="Sunday">60</td>
		</tr>
		<tr>
			<td>Weights</td>
			<td data-label="Monday">-</td>
			<td data-label="Tuesday">90</td>
			<td data-label="Wednesday">60</td>
			<td data-label="Thursday">-</td>
			<td data-label="Friday">60</td>
			<td data-label="Saturday">-</td>
			<td data-label="Sunday">-</td>
		</tr>
	</tbody>
</table>

CSS

td, th {
	padding: 10px;
}

table {
	border: 2px solid #eee;
	border-collapse: collapse;
	border-spacing: 0;
}

@media screen and (max-width: 600px) {
	table, th, td, tr {
		display: inline-block;
	}

	thead {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	td {
		text-align: center;
		width: 100%;
	}

	td[data-label] {
		text-align: right;
		border-bottom: 1px solid #eee;
	}

	td:before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
	}
}