Documentation

Base CSS

The base.css included with the theme applies the ISU template and comes with a number of CSS modules and utility classes.

Typography

The default font face used is Arial with a fallback to sans-serif in case a client browser cannot display that font. The base font size is 14px with a line height of 20px.

All headings (except h1) have a bottom margin of 8px. While paragraphs, lists, etc. have a bottom margin of 16px.

Headings

Create headings using the default h1 through h6 elements.

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5
<h1>h1 Heading 1</h1>
<h2>h2 Heading 2</h2>
<h3>h3 Heading 3</h3>
<h4>h4 Heading 4</h4>
<h5>h5 Heading 5</h5>

Section Header

Apply the .wd-u-Heading class to a heading to give it a gold bottom border.

Lorem ipsum

<h2 class="wd-u-Heading">Lorem ipsum</h2>
<h2 class="section-header">Lorem ipsum</h2>

Lead copy

Apply the .wd-u-TextLead class to an element to make it stand out.

Quisque semper euismod elit in congue. Etiam non eros sit amet mauris.

<p class="wd-u-TextLead">Quisque semper euismod elit in congue. Etiam non eros sit amet mauris.</p>
<p class="lead">Quisque semper euismod elit in congue. Etiam non eros sit amet mauris.</p>

Blockquotes

Blockquotes have a left border and the text is a lighter color to make it stand out. Use blockquote elements along with the small and cite elements.

Ultrices posuere cubilia Curae; Aliquam et convallis erat.

Quis congue eros est in ante

Ultrices posuere cubilia Curae; Aliquam et convallis erat.

Quis congue eros est in ante
<blockquote>
	<p>Ultrices posuere cubilia Curae; Aliquam et convallis erat.</p>
	<small>Quis congue <cite>eros est in ante</cite></small>
</blockquote>
<blockquote class="wd-u-PullRight">
	<p>Ultrices posuere cubilia Curae; Aliquam et convallis erat.</p>
	<small>Quis congue <cite>eros est in ante</cite></small>
</blockquote>
<blockquote>
	<p>Ultrices posuere cubilia Curae; Aliquam et convallis erat.</p>
	<small>Quis congue <cite>eros est in ante</cite></small>
</blockquote>

Lists

Ordered/Unordered

  1. Phasellus bibendum neque nec
  2. Praesent mollis vulputate tempus.
  3. Ultrices nec semper pede
    • Ultrices nec semper pede
    • Pede magna rutrum lacinia
    • Donec sodales nunc quis nulla
  4. Sed sodales neque sit amet velit
<ol>
	<li>...</li>
	<li>...</li>
</ol>

No Bullets

Apply the class .wd-u-ListUnstyled to remove bullets and left padding.

  1. Phasellus bibendum neque nec
  2. Praesent mollis vulputate tempus.
  3. Ultrices nec semper pede
    • Ultrices nec semper pede
    • Pede magna rutrum lacinia
    • Donec sodales nunc quis nulla
  4. Sed sodales neque sit amet velit
<ol class="wd-u-ListUnstyled">
	<li>...</li>
	<li>...</li>
</ol>
<ol class="no-bullets">
	<li>...</li>
	<li>...</li>
</ol>

Definition Lists

Example Term One
Pharetra ac facilisis hendrerit, laoreet eget massa.
Another Term Two
Praesent mollis vulputate tempus. Etiam at leo tincidunt mauris blandit ultrices eget eu.
Some Other Term Three
Vel accumsan aliquet, nulla quam adipiscing magna.
<dl>
	<dt>...</dt>
	<dd>...</dd>
</dl>

Definition Lists (Table Layout)

Apply the .wd-u-ListTable class to dl elements to place the term and the definition on the same line.

You can use the modifier --wide to increase the width of the dt elements.

You can use the modifier --right to right align the dt elements.

Example Term One
Pharetra ac facilisis hendrerit, laoreet eget massa.
Another Term Two
Praesent mollis vulputate tempus. Etiam at leo tincidunt mauris blandit ultrices eget eu.
Some Other Term Three
Vel accumsan aliquet, nulla quam adipiscing magna.
Example Term One
Pharetra ac facilisis hendrerit, laoreet eget massa.
Another Term Two
Praesent mollis vulputate tempus. Etiam at leo tincidunt mauris blandit ultrices eget eu.
Some Other Term Three
Vel accumsan aliquet, nulla quam adipiscing magna.
<dl class="wd-u-ListTable">
	<dt>...</dt>
	<dd>...</dd>
</dl>
<dl class="wd-u-ListTable--wide">
	<dt>...</dt>
	<dd>...</dd>
</dl>
<dl class="wd-u-ListTable--right">
	<dt>...</dt>
	<dd>...</dd>
</dl>
<dl class="table-layout">
	<dt>...</dt>
	<dd>...</dd>
</dl>
<dl class="table-layout wide">
	<dt>...</dt>
	<dd>...</dd>
</dl>

Grids

The template comes with a grid component that can be used to quickly create responsive layouts using flexible width grids.

The grid component is composed of the grid object which contains one or more grid cells. The grid object is given the class .wd-Grid and grid cells are given the class .wd-Grid-cell.

 
 
 
 
<div class="wd-Grid--3on1">
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
</div>
<div class="grid-row">
	<div class="grid g-1-3"></div>
	<div class="grid g-1-3"></div>
	<div class="grid g-1-3"></div>
	<div class="grid g-1-1"></div>
</div>

Box sizing

You should not style grid objects. Instead place a div element inside the grid object and apply background-color, padding, etc. to this element.

Read the documentation on grids

Figures

Apply the .wd-Figure class to an element containing an image to create figure objects.

If the image is not full width you can use the --left and --right modifiers to float the figure left or right.

Campanile at Iowa State

Mauris vel ligula est. Nulla nec dui tellus. Quisque venenatis, orci ac commodo scelerisque, ligula lorem semper purus, id cursus neque magna sit amet purus. Aliquam dictum dui vitae dolor ultricies hendrerit. Curabitur dignissim metus vel risus iaculis laoreet. Maecenas sit amet eros lectus, eget luctus eros.

<div class="wd-Figure--left">
	<img src="/img/campanile.jpg" alt="Campanile at Iowa State"/>
</div>
<div class="figure left">
	<img src="/img/campanile.jpg" alt="Campanile at Iowa State"/>
</div>

Read the documentation on figures

Forms

The template comes with 3 different form layouts. The component expects forms to be in a very particular HTML structure similar to a <table> element. All form controls are placed within a form container. This container is composed of rows where each row then contains a label and an input element.

  • Value is required and can't be empty

A description for this field.

<form ...>
	<div class="wd-Form">...</div>
</form>
<form ...>
	<div class="wd-form">...</div>
</form>

Read the documentation on forms

Notification Messages

Simple alerts and notifications that you can use to display warning, error, or success messages. Apply the class .wd-Alert to create a notification object.

Attention:

This is the default notification.

<div class="wd-Alert">
	<h4>Attention:</h4>
	<p>This is the default notification.</p>
</div>
<div class="notify-msg">
	<h4>Attention:</h4>
	<p>This is the default notification.</p>
</div>

You can use the following modifiers to change the notification's color scheme: --warning, --error, or --success

Warning: Something requires your attention!

Error: Something has gone horribly wrong!

Success: Some action has been successfully performed.

<p class="wd-Alert--warning">
	<strong>Warning:</strong> Something requires your attention!
</p>
<p class="wd-Alert--error">
	<strong>Error:</strong> Something has gone horribly wrong!
</p>
<p class="wd-Alert--success">
	<strong>Success:</strong> Some action has been successfully performed.
</p>
<p class="notify-msg warning">
	<strong>Warning:</strong> Something requires your attention!
</p>
<p class="notify-msg error">
	<strong>Error:</strong> Something has gone horribly wrong!
</p>
<p class="notify-msg success">
	<strong>Success:</strong> Some action has been successfully performed.
</p>

Pagination

Apply the class .wd-Pagination to create pagination controls.

<ul class="wd-Pagination">
	<li><a href="#p1">Prev</a></li>
	<li><a href="#p1">1</a></li>
	<li><a class="active" href="#p2">2</a></li>
	<li><a href="#p3">3</a></li>
	<li><a href="#p4">4</a></li>
	<li><a href="#p4">Next</a></li>
</ul>
<div class="pagination">
	<a class="prev" href="#p1"><span>Prev</span></a>
	<a class="page" href="#p1">1</a>
	<span class="page active">2</span>
	<a class="page" href="#p3">3</a>
	<a class="page" href="#p4">4</a>
	<a class="next" href="#p4"><span>Next</span></a>
</div>

Buttons

Apply the class .wd-Button to a link to create button objects. Wrap buttons in an element with the .wd-Button-group class to group buttons together. Wrap groups in an element with the .wd-Button-toolbar class to create a toolbar of buttons.

<div class="wd-Button-toolbar">
	<a class="wd-Button" href="#view">View</a>
	<div class="wd-Button-group">
		<a class="wd-Button" href="#add">Add</a>
		<a class="wd-Button" href="#edit">Edit</a>
		<a class="wd-Button" href="#delete">Delete</a>
	</div>
</div>
<div class="btn-stack clearfix">
	<div class="btn-group">
		<a class="btn" href="#view">View</a>
	</div>
	<div class="btn-group">
		<a class="btn" href="#add">Add</a>
		<a class="btn" href="#edit">Edit</a>
		<a class="btn" href="#delete">Delete</a>
	</div>
</div>

Read the documentation on buttons

Tables

Apply the class .wd-Table to a table element.

First NameLast NameEmailActions
JaneDoesample@example.orgView - Edit - Delete
JaneDoesample@example.orgView - Edit - Delete
JaneDoesample@example.orgView - Edit - Delete
<table class="wd-Table">
	...
</table>
<table class="table">
	...
</table>

Read the documentation on tables

Tabbed Navigation

Use ul elements along with the class .wd-Tab-navs to create tabbed navigation objects.

Sed pede sapien, laoreet at, feugiat ac, blandit nec, augue. Curabitur justo dolor, nonummy ac, faucibus a, mattis sed, est.

Etiam quam. Mauris est metus, semper nec, aliquam venenatis, molestie ut, enim. Proin justo. Donec augue mauris, nonummy ac.

Pellentesque in, tempor in, turpis. Sed luctus mauris non elit. Maecenas eget tellus.

<ul class="wd-Tab-navs">
	<li><a class="active" href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
</ul>
<div class="wd-Tab-panes">
	<div class="wd-Tab-pane active">...</div>
	<div class="wd-Tab-pane">...</div>
	<div class="wd-Tab-pane">...</div>
</div>
<ul class="tab-navs">
	<li><a class="active" href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
</ul>
<div class="tab-panes">
	<div class="tab-pane active">...</div>
	<div class="tab-pane">...</div>
	<div class="tab-pane">...</div>
</div>

Miscellaneous

Utility classes for typography and layout tweaks.

No Wrapping

Apply the class .wd-u-TextTruncate to ensure text does not wrap.

Integer venenatis magna in quam laoreet consectetur. Sed tempus varius ante nec eleifend. Aliquam dictum dui vitae dolor ultricies hendrerit. Curabitur dignissim metus vel risus iaculis laoreet.

<span class="wd-u-TextTruncate">...</span>
<span class="nowrap">...</span>

Text Align

Apply the classes .wd-u-TextLeft, .wd-u-TextCenter, and .wd-u-TextRight to align text accordingly.

Integer venenatis magna in quam laoreet consectetur.

Integer venenatis magna in quam laoreet consectetur.

Integer venenatis magna in quam laoreet consectetur.

<p class="wd-u-TextLeft">...</p>
<p class="wd-u-TextCenter">...</p>
<p class="wd-u-TextRight">...</p>
<p class="text-left">...</p>
<p class="text-center">...</p>
<p class="text-right">...</p>

Floats

Apply the class .wd-u-PullLeft or .wd-u-PullRight to apply left or right floats.

Integer venenatis magna.
Integer venenatis magna.
<div class="wd-u-PullLeft">...</div>
<div class="wd-u-PullRight">...</div>
<div class="pull-left">...</div>
<div class="pull-right">...</div>

Clearfix

Apply the class .wd-u-Clearfix to clear floats.

<div class="wd-u-Clearfix">...</div>
<div class="clearfix">...</div>

Print

Apply the classes .wd-u-VisiblePrint and .wd-u-HiddenPrint to control whether objects show up when printing.

Will only show when printing.
Will be hidden when printing, but show up otherwise.
<div class="wd-u-VisiblePrint">...</div>
<div class="wd-u-HiddenPrint">...</div>
<div class="visible-print">...</div>
<div class="hidden-print">...</div>

Responsive Visibility

Control whether objects are displayed on a desktop, tablet, or a phone.

Phones
< 720px
Tablets
≥ 720px
Desktops
≥ 980px
.wd-u-VisibleDesktop Hidden Hidden Visible
.wd-u-VisibleTablet Hidden Visible Hidden
.wd-u-VisiblePhone Visible Hidden Hidden
.wd-u-HiddenDesktop Visible Visible Hidden
.wd-u-HiddenTablet Visible Hidden Visible
.wd-u-HiddenPhone Hidden Visible Visible
Phones
< 720px
Tablets
≥ 720px
Desktops
≥ 980px
.visible-desktop Hidden Hidden Visible
.visible-tablet Hidden Visible Hidden
.visible-phone Visible Hidden Hidden
.hidden-desktop Visible Visible Hidden
.hidden-tablet Visible Hidden Visible
.hidden-phone Hidden Visible Visible