Awesomeness - Components

Table

Standard Table

Tables are styled to match the look of awesomeness. On smaller screen you can add a label to each table-data by using the data-attribute data-label.

Example

First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Porn Name	Date of Birth
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968
Jokey	Smurf	Giving Exploding Presents	Smurflow	Smurf	Smurflane Smurfmutt	Smurfuary Smurfteenth, 1945
Cindy	Beyler	Sales Representative	Red	Wars	Lori Quivey	July 5, 1956
Captain	Cool	Tree Crusher	Blue	Wars	Steve 42nd	December 13, 1982

Imports

SASS:

@import "base";
@import "imports/modules/table";

Code

<table class="table">
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>...</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-label="First Name">James</td>
			<td data-label="Last Name">Matman</td>
			<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">The</td>
		  	<td data-label="Last Name">Tick</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">Jokey</td>
		  	<td data-label="Last Name">Smurf</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">Cindy</td>
		  	<td data-label="Last Name">Beyler</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name"Captain</td>
		  	<td data-label="Last Name">Cool</td>
		  	<td>...</td>
		</tr>
	</tbody>
</table>

Different States

Table rows can have three different states by adding the following classes to the tr element: .table__row--selected, .table__row--lastedited & .table__row--disabled.

Example

First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Porn Name	Date of Birth
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968
Jokey	Smurf	Giving Exploding Presents	Smurflow	Smurf	Smurflane Smurfmutt	Smurfuary Smurfteenth, 1945
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968

Imports

SASS:

@import "base";
@import "imports/modules/table";

Code

<table class="table">
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>...</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		  	<td data-label="First Name">The</td>
		  	<td data-label="Last Name">Tick</td>
		  	<td>...</td>
		</tr>
		<tr class="table__row--selected">
			<td data-label="First Name">James</td>
			<td data-label="Last Name">Matman</td>
			<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">The</td>
		  	<td data-label="Last Name">Tick</td>
		  	<td>...</td>
		</tr>
		<tr class="table__row--lastedited">
		  	<td data-label="First Name">The</td>
		  	<td data-label="Last Name">Tick</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">The</td>
		  	<td data-label="Last Name">Tick</td>
		  	<td>...</td>
		</tr>
		<tr class="table__row--disabled">
		  	<td data-label="First Name">Jokey</td>
		  	<td data-label="Last Name">Smurf</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">The</td>
		  	<td data-label="Last Name">Tick</td>
		  	<td>...</td>
		</tr>
	</tbody>
</table>

Condensed Table

If you want a table to show up with less padding and a smaller font-size just add the class .table--condensed to it and see the result:

Example

First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Porn Name	Date of Birth
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968
Jokey	Smurf	Giving Exploding Presents	Smurflow	Smurf	Smurflane Smurfmutt	Smurfuary Smurfteenth, 1945
Cindy	Beyler	Sales Representative	Red	Wars	Lori Quivey	July 5, 1956
Captain	Cool	Tree Crusher	Blue	Wars	Steve 42nd	December 13, 1982

Imports

SASS:

@import "base";
@import "imports/modules/table";

Code

<table class="table table--condensed">
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>...</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-label="First Name">James</td>
			<td data-label="Last Name">Matman</td>
			<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">The</td>
		  	<td data-label="Last Name">Tick</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">Jokey</td>
		  	<td data-label="Last Name">Smurf</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">Cindy</td>
		  	<td data-label="Last Name">Beyler</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">Captain</td>
		  	<td data-label="Last Name">Cool</td>
		  	<td>...</td>
		</tr>
	</tbody>
</table>

Table with Dividers

A table can also have some dividers in it. Simply add the class .table__row--divider to a row to style it like a table header.

Example

First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Porn Name	Date of Birth
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968
Jokey	Smurf	Giving Exploding Presents	Smurflow	Smurf	Smurflane Smurfmutt	Smurfuary Smurfteenth, 1945
Cindy	Beyler	Sales Representative	Red	Wars	Lori Quivey	July 5, 1956
Captain	Cool	Tree Crusher	Blue	Wars	Steve 42nd	December 13, 1982
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968

Imports

SASS:

@import "base";
@import "imports/modules/table";

Code

<table class="table table--condensed">
	<thead>
		<tr>
			<th data-label="First Name">First Name</th>
			<th data-label="Last Name">Last Name</th>
			<th>...</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-label="First Name">James</td>
			<td data-label="Last Name">Matman</td>
			<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">The</td>
		  	<td data-label="Last Name">Tick</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">Jokey</td>
		  	<td data-label="Last Name">Smurf</td>
		  	<td>...</td>
		</tr>
		<tr class="table__row--divider">
		  	<td data-label="First Name">Cindy</td>
		  	<td data-label="Last Name">Beyler</td>
		  	<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">Captain</td>
		  	<td data-label="Last Name">Cool</td>
		  	<td>...</td>
		</tr>
		<tr>
			<td data-label="First Name">James</td>
			<td data-label="Last Name">Matman</td>
			<td>...</td>
		</tr>
		<tr>
		  	<td data-label="First Name">The</td>
		  	<td data-label="Last Name">Tick</td>
		  	<td>...</td>
		</tr>
	</tbody>
</table>