Brand Identity Program

Web development

Applying utility classes

The Web templates enable NMSU Web pages to present a consistent, header, footer, navigation bar, and text design. However, specific types of elements in the content area can also benefit from a consistent style.

For this purpose, the style sheets provide Utility Classes to style content. The use of the utility classes are not required, however, utilitiy classes enables your site to maintain visual consistency with the branding standards.

The figure class

The figure class enables the positioning and display of

• photos
• diagrams
• other media

Typically, a figure is going to be an image floated to the left or right of the page, but may also be centered, given a border, header, and/or caption.

To apply the figure class first wrap your figure contents with: <div class="figure" /> </div>

To extend the positioning possibilities include one or more of the following classes by separating each term with a space:

• on-the-left: This floats the figure on the left.
• on-the-right: This floats the figure on the right.
• in-the-middle: This centers the figure.
• bordered: This creates a border around the figure.

<div class="figure on-the-right bordered" /"> </div>

To add a caption and title there are two special utility classes you can include:

Student Photo

Figure 1.0
A student enjoying her class at New Mexico State University.

1. figure-title
2. figure-caption

The use of figure-title will draw a title and figure-caption will create a caption inside your figure.

Note the image located at the right:

• It is positioned to the right and surrounded by a border.
• There is a title at the top (Student Photo)
• And a caption below (A student enjoying her class at New Mexico State University.)

Titles and captions can easily push the width of the figure box wider than desired. To make caption wrap at the width of an image inside the figure, include a style definition in the <div> in the manner shown below.

Refer to the code block below

<div class="figure on-the-right bordered" style="width: 180px" />
<div class="figure-title">Student Photo</div>
<img src="http://brand.nmsu.edu/web/documentation/float_example.jpg" alt="Smiling student" />
<div class="figure-caption"> Figure 1.0
A student enjoying her class at New Mexico State University.
</div>
</div>

Zebra tables

"Zebra" tables are tables with rows that alternate in color to make it easy to distinguish rows as your eye travels across the page.

To apply this utility class:

• Tag the table as class "zebra-table"
• Tag alternating body rows with the "zebra-row" class, starting with the second row.

Table heads and footers are styled along with the body rows.

Refer to the code block below

<table class="zebra-table"> <thead> <tr><th>Chile Type</th> <th>Heat Rating</th></tr> </thead> <tfoot> <tr> <td colspan="2"> Heat ratings are measured in <em>Scovilles</em>. </td> </tr> </tfoot> <tbody> <tr> <td>Habañero</td> <td>350,000 - 550,000</td> </tr> <tr class="zebra-row"> <td>Thai</td> <td>70,000 - 80,000</td> </tr> <tr> <td>Piquin</td> <td>30,000 - 40,000</td> </tr> <tr class="zebra-row"> <td>Jalapeño</td> <td>3,500 - 4,500</td> </tr> </tbody> </table>

The document-authors class

This attributes a document to particular authors, as in the case of a publication. A document-authors class is provided to wrap the names of the authors.

To apply this utility class, wrap the names of the document authors in a <div> of class "document-authors".

<div class="document-authors"> John Doe, Jane Doe </div>

Note: The "Authors:" text is added dynamically by the style sheet; all you need inside the <div> are the names of the authors. (This is so that if you ever need to parse the document with a computer program, you can extract the authors without extraneous text in there.)

The nota bene class

The nota bene class provides parenthetical notes or instructions outside the context of the actual content of the page.

For instance, it can be applied to instructions to help the user fill out a web submission form.

URL: Example: http://www.nmsu.edu

To apply this utility class, just tag a <div> or <span> with the "nb" class.

Subheadings

Sometimes, the title of a document or other Web item has a subheading in its title. Often, the title of the document is wrapped in <h1> tags, but long subheadings make these titles awkward.

For this reason, we provide a "subhead" utility class.

To apply this utility class, wrap the subhead contents with <span class="subhead"></span>.

<h1> Sweeney Todd: <span class="subhead">The Demon Barber of Fleet Street</span> </h1>

Contact Us

For more information, contact Marketing Services between 8 a.m. and 5 p.m. at 505-646-3221, or bip@nmsu.edu.