ExpressionEngine®
Style Guide

Interaction Guidelines

Starting with ExpressionEngine 3.0 we're moving to a more flexible user interface and visual language. To create an inviting and useful UI for our content editors and site managers. Built on a solid foundation, making quick iterations not only possible, but easy. Maintaining familiarity for long time customers, and improving the interface for all customers.

UI Ideals

When expanding ExpressionEngine with new features, and add ons, always maintain the goals of familiarity and improvement. This style and interaction guide is both an internal map, and an external guide.

Navigation

Navigation should be clean, concise and to the point. If you require secondary navigation for a feature, add on or CP section, use a sidebar. Main navigation should never be more than one (1) level deep.

Column Group

ExpressionEngine 3 uses a fluid 16 column grid.

Grids are made of of rows and columns, class .col-group will create a row.

HTML

<div class="col-group">
	...
</div>

back to the top


Columns Requires: Column Group

Columns require two classes .col and a width class .w-n.

Columns inside a .col-group must add up to 16.

Example: two columns, .w-12 and .w-4.

HTML

<div class="col-group">
	<div class="col w-4">
		...
	</div>
	<div class="col w-12">
		...
	</div>
</div>

back to the top


Content Box & Sidebar Requires: Columns

For the most flexibility, we don’t add visual styles directly to the rows and columns.

A div with the class of .box must be added inside a column, to give us something to anchor design visuals to.

Adding a class of .sidebar to a div.box, creates the sidebar.

The sidebar is used to add secondary navigation in the CP

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
			...
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
			...
		</div>
	</div>
</div>

Visual Output

Box header

back to the top


Content Box, Text Only Requires: Content Box & Sidebar

Deprecation notice

This UI pattern is deprecated as of version 3.3.3, and will be removed in version 5.0.

Use Content Box, Text Box instead.

You can create a text only box by wrapping your text in div.txt-wrap

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
			<div class="txt-wrap">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<ul class="checklist">
					<li>list item</li>
					<li class="last">another list item</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Visual Output

Box header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • list item
  • another list item

back to the top


Content Box, Text Box Requires: Content Box & Sidebar

You can create a text box by wrapping your text in div.md-wrap

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
			<div class="md-wrap">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<ul>
					<li>list item</li>
					<li class="last">another list item</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Visual Output

Box header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • list item
  • another list item

back to the top


back to the top


Basic List Requires: Content Box & Sidebar

The sidebar may contain basic lists. To create a basic list use an ul.

The basic list is used to list additional pages under a heading.

A basic list must have a heading.

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
			<h2>Header</h2>
			<ul>
				<li><a href="">List Item</a></li>
			</ul>
			<h2><a href="">Header</a></h2>
			<ul>
				<li><a href="">List Item</a></li>
				<li><a href="">Another List Item</a></li>
			</ul>
			<h2>Header</h2>
			<ul>
				<li><a href="">List Item</a></li>
				<li><a href="">Another List Item</a></li>
				<li><a href="">One More List Item</a></li>
			</ul>
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
		</div>
	</div>
</div>

back to the top


Basic List Highlights Requires: Basic List

A basic list has an alternate item highlighting option.

  • .remove indicates that clicking initiates a delete action.

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
			<h2>Header</h2>
			<ul>
				<li><a href="">List Item</a></li>
			</ul>
			<h2><a href="">Header</a></h2>
			<ul>
				<li><a href="">List Item</a></li>
				<li><a href="">Another List Item</a></li>
			</ul>
			<h2>Header</h2>
			<ul>
				<li><a href="">List Item</a></li>
				<li><a href="">Another List Item</a></li>
				<li class="remove"><a href="">One More List Item</a></li>
			</ul>
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
		</div>
	</div>
</div>

back to the top


Folder List Requires: Content Box & Sidebar

The sidebar may contain a folder type list. Use a div.scroll-wrap wrapped around a ul.folder-list.

The div.scroll-wrap prevents the folder list from growing too large vertically.

A folder list should be used to represent directory structures, templates groups, upload directories, etc…

A folder list must have a heading.

A folder list, and a basic list may appear in the same sidebar.

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
			<h2>Header</h2>
			<div class="scroll-wrap">
				<ul class="folder-list">
					<li><a href="">Folder</a></li>
					<li><a href="">Folder 2</a></li>
					<li><a href="">Folder 3</a></li>
					<li><a href="">Folder 4</a></li>
					<li><a href="">Folder 5</a></li>
					<li><a href="">Folder 6</a></li>
					<li><a href="">Folder 7</a></li>
					<li><a href="">Folder 8</a></li>
					<li><a href="">Folder 9</a></li>
				</ul>
			</div>
			<h2>Header</h2>
			<ul>
				<li><a href="">List Item</a></li>
				<li><a href="">Another List Item</a></li>
				<li><a href="">One More List Item</a></li>
			</ul>
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
		</div>
	</div>
</div>

back to the top


Folder List Highlights Requires: Folder List

An folder list has two alternate item highlighting options.

  • .act indicates the currently selected item.
  • .default indicates the primary, or default item.

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
			<h2>Header</h2>
			<div class="scroll-wrap">
				<ul class="folder-list">
					<li class="default"><a href="">Folder</a></li>
					<li class="act"><a href="">Folder 2</a></li>
					<li><a href="">Folder 3</a></li>
					<li><a href="">Folder 4</a></li>
					<li><a href="">Folder 5</a></li>
					<li><a href="">Folder 6</a></li>
					<li><a href="">Folder 7</a></li>
					<li><a href="">Folder 8</a></li>
					<li><a href="">Folder 9</a></li>
				</ul>
			</div>
			<h2>Header</h2>
			<ul>
				<li><a href="">List Item</a></li>
				<li><a href="">Another List Item</a></li>
				<li><a href="">One More List Item</a></li>
			</ul>
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
		</div>
	</div>
</div>

back to the top


Folder List Toolbar Requires: Folder List

Each “folder li” in a folder list requires a toolbar.

The tool bar may include the tools .edit and .remove.

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
			<h2>Header</h2>
			<div class="scroll-wrap">
				<ul class="folder-list">
					<li>
						<a href="">Folder</a>
						<ul class="toolbar">
							<li class="edit"><a href=""></a></li>
							<li class="remove"><a href=""></a></li>
						</ul>
					</li>
					<li>
						<a href="">Folder 2</a>
						<ul class="toolbar">
							<li class="edit"><a href=""></a></li>
							<li class="remove"><a href=""></a></li>
						</ul>
					</li>
					<li>
						<a href="">Folder 3</a>
						<ul class="toolbar">
							<li class="edit"><a href=""></a></li>
							<li class="remove"><a href=""></a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
		</div>
	</div>
</div>

Visual Output

Box header

back to the top


back to the top


Section Header

All sections of the ExpressionEngine CP require a section header.

The section header is built out like a normal column group, but requires a class of .full and .mb on the .box

The section header may contain a search form, if this form exists it should search only the CP section.

HTML

<div class="col-group">
	<div class="col w-16">
		<div class="box full mb">
			<form class="tbl-ctrls">
				<fieldset class="tbl-search right">
					<input placeholder="type phrase..." type="text" value="">
					<input class="btn submit" type="submit" value="search section">
				</fieldset>
				<h1>Section Manager</h1>
			</form>
		</div>
	</div>
</div>
<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
		</div>
	</div>
</div>

Visual Output

Section Manager

Box header

back to the top


Section settings Requires: Section Header

You can add a settings button to the section header. Use a .toolbar inside the h1.

HTML

<div class="col-group">
	<div class="col w-16">
		<div class="box full mb">
			<form class="tbl-ctrls">
				<fieldset class="tbl-search right">
					<input placeholder="type phrase..." type="text" value="">
					<input class="btn submit" type="submit" value="search section">
				</fieldset>
				<h1>
					Section Manager
					<ul class="toolbar">
						<li class="settings"><a href="" title="settings"></a></li>
					</ul>
				</h1>
			</form>
		</div>
	</div>
</div>
<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
		</div>
	</div>
	<div class="col w-12">
		<div class="box">
			<h1>Box header</h1>
		</div>
	</div>
</div>

Visual Output

Section Manager

Box header