Data & Forms
Section description.
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;
}
}