ExpressionEngine®
Style Guide

Interaction Guidelines

Listings are used to view content from the database in a compact listing, allowing users to easily manage the content after it's been saved.

If a listing has an edit tool in it's manage toolbar, it should also link the "title" of that content to it's edit form as well.

Listings should be paginated at a rate of 25 items per page. Listings must be wrapped in div.tbl-wrap to help with smaller width devices.

Listings may be searchable, and sortable. Listings may allow reordering, and filtering by specific criteria.

Listings may have bulk actions, such as removal, editing, closing, etc...

Table Form

Listing tables must be wrapped in a div.tbl-ctrls.

To allow user to perform actions on the tabular data, you need a form tag in the div.tbl-ctrls

All listing tables must include a title, use an h1.

HTML

<div class="tbl-ctrls">
	<form>
		<h1>Page title</h1>
	</form>
</div>

Visual Output

Page title

back to the top


back to the top


Filter Options Requires: Table Form

To add a filtering options, use div.filters.

The div.filters must be placed after the h1.

You may add additional li menus within the div.filters for various types of filtering.

Usage

For giving the user specific filtering for the listing. e.g. filter list by status, or author.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">
			<b>Filters: </b>
			<ul>
				<li>
					<a class="has-sub" href="">option <span class="faded">([Option Name])</span></a>
					<div class="sub-menu">
						<fieldset class="filter-search">
							<input type="text" value="" placeholder="filter channels">
						</fieldset>
						<ul>
							<li><a href="">[Option Name]</a></li>
							<li><a href="">[Option Name]</a></li>
							<li><a href="">[Option Name]</a></li>
							<li><a href="">[Option Name]</a></li>
							<li><a href="">[Option Name]</a></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
	</form>
</div>

back to the top


Bulk Action Controls Requires: Table Form

To add a bulk actions controls use fieldset.tbl-bulk-act.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<fieldset class="tbl-bulk-act">
			<select>
				<option>-- with selected --</option>
				<option>Delete</option>
				<option>Edit</option>
				<option>Show/Open</option>
				<option>Hide/Close</option>
			</select>
			<input class="btn submit" type="submit" value="submit">
		</fieldset>
	</form>
</div>

Visual Output

Page title

back to the top


Pagination Requires: Table Form

To add pagination, use div.paginate.

You may use a class of a.act to mark the currently selected page link.

Note: Pagination must not have more than seven visible links. first, previous, page before, current page, page after, next, last.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<div class="paginate">
			<ul>
				<li><a href="">First</a></li>
				<li><a href="">Prev</a></li>
				<li><a href="">1</a></li>
				<li><a class="act" href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">Next</a></li>
				<li><a href="">Last</a></li>
			</ul>
		</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

back to the top


Tables Common

The table itself, is comprised of rows and columns.

Use tr.alt on every other tr to create a striped table effect.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td>Row 1, Column 3, Cell 3</td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td>Row 2, Column 3, Cell 3</td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td>Row 3, Column 3, Cell 3</td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 1, Column 3, Cell 3
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 Row 2, Column 3, Cell 3
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 Row 3, Column 3, Cell 3

back to the top


“Responsive” Requires: Tables Common

You can make tables pseudo-responsive.

Use div.tbl-wrap wrapping the table.

This must be used on all tables.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<div class="tbl-wrap">
			<table cellspacing="0">
				<thead>
					<tr>
						<th>Heading One</th>
						<th>Heading Two</th>
						<th>Heading Three</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Row 1, Column 1, Cell 1</td>
						<td>Row 1, Column 2, Cell 2</td>
						<td>Row 1, Column 3, Cell 3</td>
					</tr>
					<tr>
						<td>Row 2, Column 1, Cell 1</td>
						<td>Row 2, Column 2, Cell 2</td>
						<td>Row 2, Column 3, Cell 3</td>
					</tr>
					<tr>
						<td>Row 3, Column 1, Cell 1</td>
						<td>Row 3, Column 2, Cell 2</td>
						<td>Row 3, Column 3, Cell 3</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 1, Column 3, Cell 3
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 Row 2, Column 3, Cell 3
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 Row 3, Column 3, Cell 3

back to the top


Empty Requires: Tables Common

A table will sometimes appear empty.

Use tr.no-results wrapping the empty td colspan=“n”

Alternatively, you may have a table that is empty, and you don’t know what the columns are. Use table.empty.no-results with a single tr and no ths

Usage

Empty tables must contain a message, and a call to action button, allowing the user to know what’s missing, and allow the creation of the missing type of content.

They should all follow this exact language syntax. `No [item type] found.` And then if there is a way for the user to create the proper missing content there should be an action button with the language “Create [item type]” that links to the creation form for the proper content.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>	
				<tr>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
				</tr>
			</thead>	
			<tbody>
				<tr class="no-results">
					<td colspan="3">No <b>[item](s)</b> found <a class="btn action" href="">Create new [item]</a></td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>
<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0" class="empty no-results">
			<tbody>
				<tr>
					<td>No <b>[item](s)</b> found <a class="btn action" href="">Create new [item]</a></td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title (empty)

Heading One Heading Two Heading Three
No [item](s) found Create new [item]

Page title (empty, no headers)

No [item](s) found Create new [item]

back to the top


Sub Headings Requires: Tables Common

A table may have sub headings for organizational purposes.

Use tr.sub-heading, wrapped around a td colspan=“n”.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td>Row 1, Column 3, Cell 3</td>
				</tr>
				<tr class="sub-heading">
					<td colspan="3">This is a Sub Heading</td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td>Row 2, Column 3, Cell 3</td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td>Row 3, Column 3, Cell 3</td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 1, Column 3, Cell 3
This is a Sub Heading
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 Row 2, Column 3, Cell 3
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 Row 3, Column 3, Cell 3

back to the top


Row Highlighting Requires: Tables Common

Tables have options for highlighting rows of the table.

  • .selected Use when a row’s checkbox has been selected.
  • .pending Use when a row’s content is pending approval.
  • .banned Use when a row’s content is marked for removal or user banning.

Note: Highlighting a tr overrides the tr hover background color change.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
				</tr>
			</thead>
			<tbody>
				<tr class="selected">
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td>Row 1, Column 3, Cell 3</td>
				</tr>
				<tr class="pending">
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td>Row 2, Column 3, Cell 3</td>
				</tr>
				<tr class="banned">
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td>Row 3, Column 3, Cell 3</td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 1, Column 3, Cell 3
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 Row 2, Column 3, Cell 3
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 Row 3, Column 3, Cell 3

back to the top


Status Flags Requires: Tables Common

Table rows can have status flags.

  • .st-spam used to indicate spam.
  • .st-error used to indicate an error.
  • .st-closed used to indicate a closed item.
  • .st-banned used to indicate a banned item.
  • .st-open used to indicate an open item.
  • .st-draft used to indicate a draft item.
  • .st-pending used to indicate a pending item.
  • .st-info used to indicate more info.
  • .st-note used to indicate a note.
  • .st-warning used to indicate a warning.
  • .st-locked used to indicate a locked item.
  • .st-unlocked used to indicate an unlocked item.
  • .st-enable used to indicate an enabled item.
  • .st-disable used to indicate a disabled item.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td><span class="st-spam">spam</span></td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td><span class="st-error">error</span></td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td><span class="st-closed">closed</span></td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td><span class="st-banned">banned</span></td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td><span class="st-open">open</span></td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td><span class="st-draft">draft</span></td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td><span class="st-pending">pending</span></td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td><span class="st-info">info</span></td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td><span class="st-note">note</span></td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td><span class="st-warning">warning</span></td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td><span class="st-locked">locked</span></td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td><span class="st-unlocked">unlocked</span></td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td><span class="st-enable">enabled</span></td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td><span class="st-disable">disabled</span></td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 spam
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 error
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 closed
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 banned
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 open
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 draft
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 pending
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 info
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 note
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 warning
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 locked
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 unlocked
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 enabled
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 disabled

back to the top


Actions Row Requires: Tables Common

You can add a row to the bottom of the table for inline action buttons.

Use a class of tr.tbl-action, as the last tr of a table.

You must also use tr.last immediately preceding the tr.tbl-action.

Usage

For when your listing requires a direct call to action.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td>Row 1, Column 3, Cell 3</td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td>Row 2, Column 3, Cell 3</td>
				</tr>
				<tr class="last">
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td>Row 3, Column 3, Cell 3</td>
				</tr>
			</tbody>
			<tr class="tbl-action">
				<td colspan="3"><a class="btn action submit" href="">Action Button</a></td>
			</tr>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 1, Column 3, Cell 3
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 Row 2, Column 3, Cell 3
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 Row 3, Column 3, Cell 3
Action Button

back to the top


Light Tables Requires: Tables Common

Sometimes you might need to have a smaller table of items within a larger table.

Use table.light.

table.light, must appear within another table.

Usage

For when Xzibit knows you like tables, so he puts a table in your table, dog.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td>Row 1, Column 3, Cell 3</td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td>
						<table class="light">
							<tr>
								<td>Row 1, Column 1, Cell 1</td>
								<td>Row 1, Column 2, Cell 2</td>
							</tr>
							<tr>
								<td>Row 2, Column 1, Cell 1</td>
								<td>Row 2, Column 2, Cell 2</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td>Row 3, Column 3, Cell 3</td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 1, Column 3, Cell 3
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 Row 3, Column 3, Cell 3

back to the top


Sorting Requires: Tables Common

You can add table sorting to the table columns.

Use a.sort, within each th you want sortable.

Use a.sort.asc to manipulate the arrow.

Use th.highlight to highlight the column(s) being sorted.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th class="highlight">Heading One <a href="#" class="sort asc"></a></th>
					<th>Heading Two <a href="#" class="sort"></a></th>
					<th>Heading Three <a href="#" class="sort"></a></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td>Row 1, Column 3, Cell 3</td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td>Row 2, Column 3, Cell 3</td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td>Row 3, Column 3, Cell 3</td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 1, Column 3, Cell 3
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 Row 2, Column 3, Cell 3
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 Row 3, Column 3, Cell 3

back to the top


Bulk Checkboxes Requires: Tables Common

You can add checkboxes, and a select all checkbox to each table row, for use with the bulk action controls.

Use th.check-ctrl to give the column a proper width.

Usage

For when your listing can have bulk actions performed on it. A checked row must be highlighted with class .selected

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
					<th class="check-ctrl"><input type="checkbox" title="select all"></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td>Row 1, Column 3, Cell 3</td>
					<td><input type="checkbox"></td>
				</tr>
				<tr>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td>Row 2, Column 3, Cell 3</td>
					<td><input type="checkbox"></td>
				</tr>
				<tr>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td>Row 3, Column 3, Cell 3</td>
					<td><input type="checkbox"></td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 1, Column 3, Cell 3
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 Row 2, Column 3, Cell 3
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 Row 3, Column 3, Cell 3

back to the top


Toolbars Requires: Tables Common

When a .toolbar appears within a table listing it requires an additional div.toolbar-wrap in order for it to behave better in responsive situations.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
					<th class="check-ctrl"><input type="checkbox" title="select all"></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td>
						<div class="toolbar-wrap">
							<ul class="toolbar">
								<li class="view"><a href=""></a></li>
							</ul>
						</div>
					</td>
					<td><input type="checkbox"></td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2

back to the top


Reorder Requires: Tables Common

You can add reordering handles to each row of the table.

Use an empty th.reorder-col.

For each row use a td.reorder-col with a span.ico.reorder inside.

Usage

For allowing a user to reorder the content listing. If a listing allows reordering, the order should be saved, and be accessible via template tags.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page title</h1>
		<div class="filters">...</div>
		<table cellspacing="0">
			<thead>
				<tr>
					<th class="reorder-col"></th>
					<th>Heading One</th>
					<th>Heading Two</th>
					<th>Heading Three</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="reorder-col"><span class="ico reorder"></span></td>
					<td>Row 1, Column 1, Cell 1</td>
					<td>Row 1, Column 2, Cell 2</td>
					<td>Row 1, Column 3, Cell 3</td>
				</tr>
				<tr>
					<td class="reorder-col"><span class="ico reorder"></span></td>
					<td>Row 2, Column 1, Cell 1</td>
					<td>Row 2, Column 2, Cell 2</td>
					<td>Row 2, Column 3, Cell 3</td>
				</tr>
				<tr>
					<td class="reorder-col"><span class="ico reorder"></span></td>
					<td>Row 3, Column 1, Cell 1</td>
					<td>Row 3, Column 2, Cell 2</td>
					<td>Row 3, Column 3, Cell 3</td>
				</tr>
			</tbody>
		</table>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page title

Heading One Heading Two Heading Three
Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 1, Column 3, Cell 3
Row 2, Column 1, Cell 1 Row 2, Column 2, Cell 2 Row 2, Column 3, Cell 3
Row 3, Column 1, Cell 1 Row 3, Column 2, Cell 2 Row 3, Column 3, Cell 3

back to the top


Non-table Listing

To create a non-table based listing use div.tbl-list-wrap wrapped around a ul.tbl-list.

This listing style can use the same filters as the normal table listing, but it has to be placed inside the div.tbl-list-wrap.

This is an alternative listing UI, for use when a table gets in the way. It is likely that ExpressionEngine will eventually switch to this listing UI for most content listings.

HTML

<div class="tbl-ctrls">
	<form>
		<fieldset class="tbl-search right">...</fieldset>
		<h1>Page Title</h1>
		<div class="tbl-list-wrap">
			<div class="filters">...</div>
			<!-- remove the class has-filters, if the filters aren't being used. -->
			<div class="tbl-list-ctrl has-filters">
				<label class="ctrl-all"><span>select all</span> <input type="checkbox"></label>
			</div>
			<ul class="tbl-list">
				<li>
					<div class="tbl-row selected">
						<div class="reorder"></div>
						<div class="txt">
							<div class="main">
								<b>[category_name]</b>
							</div>
							<div class="secondary">
								<span class="faded">ID#</span> [id] <span class="faded">/</span> [category_url_title]
							</div>
						</div>
						<ul class="toolbar">
							<li class="edit"><a href="http://localhost/el-projects/ee-cp/views/channel-cat-list-edit.php"></a></li>
						</ul>
						<div class="check-ctrl"><input type="checkbox" checked="checked"></div>
					</div>
					<ul class="tbl-list">
						<li>
							<div class="tbl-row">
								<div class="reorder"></div>
								<div class="txt">
									<div class="main">
										<b>[category_name]</b>
									</div>
									<div class="secondary">
										<span class="faded">ID#</span> [id] <span class="faded">/</span> [category_url_title]
									</div>
								</div>
								<ul class="toolbar">
									<li class="edit"><a href="http://localhost/el-projects/ee-cp/views/channel-cat-list-edit.php"></a></li>
								</ul>
								<div class="check-ctrl"><input type="checkbox"></div>
							</div>
							<ul class="tbl-list">
								<li>...</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<div class="tbl-row drag-placeholder">
						<div class="none"></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="paginate">...</div>
		<fieldset class="tbl-bulk-act">...</fieldset>
	</form>
</div>

Visual Output

Page Title

  • [category_name]
    ID# [id] / [category_url_title]
    • [category_name]
      ID# [id] / [category_url_title]
      • [category_name]
        ID# [id] / [category_url_title]
    • [category_name]
      ID# [id] / [category_url_title]