Manager/Administrator Toolkit

These resources help you create accurate, consistent NIU webpages in Cascade. The examples use Bootstrap 4 and the NIU Theme 4.0 stylesheet. Questions? Contact the web team at webcommunications@niu.edu.

• Typography
• Buttons
• Tables
• Icons

Typography

Theme 4.0 applies heading and text styles automatically. Georgia and Montserrat are the approved web alternatives to the Chronicle and Gotham typefaces in the university graphic standards.

Emphasis and Lead Text

Use bold or italics sparingly and only for words or short phrases. Wrap text in a small tag to de-emphasize it. Add the lead class to a paragraph that should stand out like a heading but is not one.

This paragraph uses the lead class.

<p class="lead">This paragraph uses the lead class.</p>

<h2>Heading Text<br/><small>Subtitle text</small></h2>

Buttons

Every button needs the btn class plus a color class. Use btn-primary for red and btn-default for black.

Basic Red Button Black Button

<a class="btn btn-primary" href="/path">Basic Red Button</a>
<a class="btn btn-default" href="/path">Black Button</a>

<p class="text-center">
<a class="btn btn-primary" href="/path">Centered Button</a>
</p>

<div class="row">
<div class="col-sm-8 offset-sm-2">
<a class="btn btn-primary btn-block" href="/path">Partial Width Button</a>
</div>
</div>

<a class="btn btn-primary" href="/path"><i aria-hidden="true" class="fa-solid fa-question"></i> Frequently Asked Questions</a>
<a class="btn btn-primary" href="/path">Apply Today <i aria-hidden="true" class="fa-solid fa-chevron-right"></i></a>

Tables

Use tables for tabular data only. Every table needs the table class, a caption that describes its contents, and th elements with a scope for column or row headings. Do not format headings as bold td content, and do not use the border, cellspacing or cellpadding attributes.

<table class="table table-bordered">
<caption>Description of the table</caption>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Row heading</th>
<td>Data</td>
</tr>
</tbody>
</table>

Combine classes as needed and list table first, as in class="table table-bordered table-striped".

Icons

Font Awesome

Themes with Font Awesome can use any icon from the Font Awesome library. Add the icon's classes to an i tag and mark decorative icons aria-hidden="true". The link or adjacent text must carry the meaning. Some icons need additional JavaScript depending on the theme. Contact webcommunications@niu.edu for help.

<i class="fa-solid fa-bookmark" aria-hidden="true"></i>

Social Icons

Use social icons in place of linked thumbnail images. Wrap the icon in an element with the social class to add brand color and a hover effect. Include screen reader text so the link has a name.

Facebook X Instagram YouTube LinkedIn

<a class="social" href="https://www.facebook.com/NorthernIllUniv" rel="noopener noreferrer"><i aria-hidden="true" class="fa-brands fa-facebook-f" data-toggle="tooltip" title="Facebook"></i><span class="sr-only">Facebook</span></a>

The hover effect is available for these icon classes:

To request the hover effect for another brand icon, email webcommunications@niu.edu with a link to the icon in the Font Awesome library.

Glyphicons

Older website themes built on Bootstrap 3 use Glyphicons. Add the glyphicon name as a class on a span tag in the HTML editor. Sites on Theme 4.0 use Font Awesome instead.