Rutgers University Libraries Website Style Guide

This style guide documents some of the CSS styling conventions we use on our website that affect the overall appearance of content, such as typography and alignment, and identifies the treatment of specific HTML elements, such as tables and forms. This will help developers better visualize and structure documents on our website. It should also be useful when advising faculty/staff on our website conventions. This guide should also be useful for all content creators and page owners who have a basic familiarity with HTML and CSS, even though they may work primarily with WYSIWYG editors.

While this document specifically addresses website styling conventions, please refer to the University Editorial Style Guide as well as the Rutgers University Libraries Style Sheets addendum for all editorial decisions.

All the styles below come from global settings defined in our stylesheet.

Quattrocento Sans is our main typeface.

  • The font stack we use is "Quattrocento Sans", Candara, "Gill Sans", Optima, Helvetica, sans-serif;
  • Headers and titles on the website use Montserrat. The font stack is "Montserrat", "Segoe UI", "Century Gothic", Verdana, sans-serif;.
  • Default font size for body copy is set at 16px.

We use ems throughout the website to provide maximum flexibility for our users. "Ems" grant users the highest level of control over content. They provide for easy typographic scaling since they are calculated based upon a predefined pixel measurement, or base font size. This also provides the freedom to control type sizes throughout the website by changing a single font size. The base font is 1em, which equals the most common browser default of 16px,  and all other font sizes are computed accordingly. We recommend using ems throughout for font size.

The line height (the vertical space between two lines) is set at 1.5 em, which works out to 24 px.

  • Body Copy: 1 em (16px), font: Quattrocento Sans (sans serif) with a line height of 1.5 em (24px ), color:#222222 (dark gray).
  • Fine Print: 0.75 em (12px), with a line height of 1.5 em (18px).
Block-title: The class "block-title" modifies the <h2> header tag, and is used to style titles in all locations where content is placed within a bordered box, and on the home page. On the libraries' home page, it is used to style titles such as "News", "Featured Events" and "Information for". It is also used to style "Frequently Asked Questions" in the bordered box on the Borrow/Request/Renew page.
 

Example of a Block-Title

h2.block-title {
  font-size:1em;
  font-weight:700;
  background:none;
  border:none;
  margin-bottom: 1em;
  padding: 0;
}
<div class="descriptive-page-right-box;">
<h2 class="block-title">Useful Links</h2>
<ul> <li> <a href="/how_do_i/find_an_article">How do I find an article on my topic?</a></li>
<li> <a href="/refworks">RefWorks</a></li>
<li>   ...
</li>
</div>

Headings: <h1> through <h6> are set at 36px, 28px, 21px, 19px. 17px and 15px by default. Color is #222222 (dark gray)

Example of Headings

<h1> Use the h1 tag for headings<h1>

<h2> Use the h2 tag for headings<h2>

<h3> Use the h3 tag for headings<h3>

<h4> Use the h4 tag for headings<h4>

<h5> Use the h5 tag for headings<h5>

All body copy, lists <ul> and <ol>, <p>, <blockquote> are left aligned within their containers. Containers might be an entire page or blocks within a page.

Blockquotes are identified to stand out from body copy.

Example of a blockquote

May in Ayemenem is a hot, brooding month. The days are long and humid. The river shrinks and black crows gorge on bright mangoes in still, dustgreen trees. Red bananas ripen. Jackfruits burst. Dissolute bluebottles hum vacuously in the fruity air. Then they stun themselves against clear windowpanes and die, fatly baffled by the sun.
- Arundhati Roy in The God of Small Things

Identify a blockquote using:

blockquote {
  color:  #444444;
  line-height:  1.8em;
  margin:  2em 4em 2em 4em; 
}
<blockquote> May in Ayemenem is a hot, brooding month. The days are long and humid. The river shrinks and black crows gorge on bright mangoes in still, dustgreen trees. Red bananas ripen. Jackfruits burst. Dissolute bluebottles hum vacuously in the fruity air. Then they stun themselves against clear windowpanes and die, fatly baffled by the sun. - Arundhati Roy in The God of Small Things <blockquote>

With the exception of the home page, all pages on the libraries' website are divided into two sections. The content is on the left of the page. The navigation and supporting information is on the right.

 

Example

1. Layout for a page with blocks of content
 

Example

2. Layout for a news article, or a page of text with an image

 

Lists on the website use a custom image (featherbullet_small.png) instead of the default bullet point.

Example of a bulleted list

  • Go to RUcore
  • Go to RUresearch, RUcore's research data portal
  • Deposit your publication
ul li {
  list-style-image: url("/sites/default/themes/RUL_D7/images/featherbullet_small.png");
}
<ul>
  <li>Go to RUcore<li>
  <li>Go to RUresearch, RUcore's research data portal<li>
  <li>Deposit your publication<li>
</ul>
Table headers are white text placed on a gray (#aaaaaa) background. To present data with clarity, table rows are striped alternately in gray (#edf1f7) and white. Column headings are bold and placed on a gray (#e6e6e6) background that is darker than the striping.

Examples of tables on the website are the Faculty and Staff Directory, and Library Hours.

Example of a table

Access Services
Lastname, Firstname Library Associate
Lastname, Firstname Library Supervisor
Lastname, Firstname Library Associate
Lastname, Firstname Library Supervisor
table {
  border: none;
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px 0;
  font-family: 'Quattrocento Sans', Candara, 'Gill Sans ', Optima, Helvetica, sans-serif;
}
thead {
  height: 2.5em;
  border-top: 1px solid #e6e6e6;
  background: #e6e6e6;
}
thead tr th.thead_label {
  background-color: #aaa;
  text-align: left;
  color: #fff;
   font-family: 'Quattrocento Sans', Candara, 'Gill Sans ', Optima, Helvetica, sans-serif;
  font-weight: 700;
  text-shadow: 0 1px 1px #666;
}
tr:nth-child(odd) {
  background-color: #fff;
  border-bottom: 1px solid #CCCCCC;
  padding: 0.1em 0.6em;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
  border-bottom: 1px solid #CCCCCC;
  padding: 0.1em 0.6em;
}
  <table class="dept_dir_table">
    <thead>
      <tr>
        <th class="thead_label" colspan="2">Access Services</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="name"><a href="#">Lastname, Firstname</a></td>
        <td class="email-phone">
          <a href="mailto:#">email1@libraries.rutgers.edu</a><br>848-xxx-yyyy
        </td>
        <td>Library Associate</td>
      </tr>
      <tr>
        <td class="name"><a href="#">Lastname, Firstname</a></td>
        <td class="email-phone">
          <a href="mailto:#">email2@libraries.rutgers.edu</a><br>848-xxx-yyyy
        </td>
        <td>Library Supervisor</td>
      </tr>
      <tr>
        <td class="name"><a href="#">Lastname, Firstname</a></td>
        <td class="email-phone">
          <a href="mailto:#">email3@libraries.rutgers.edu</a><br>848-xxx-yyyy
        </td>
        <td>Library Associate</td>
      </tr>
      <tr>
        <td class="name"><a href="#">Lastname, Firstname</a></td>
        <td class="email-phone">
          <a href="mailto:#">email4@libraries.rutgers.edu</a><br>848-xxx-yyyy
        </td>
        <td>Library Supervisor</td>
      </tr>
    </tbody>
  </table>
 
Forms on the website are visually delineated into different sections based on the fieldset. Fieldsets are identified using a gradient light grey (#e2e2e2) moving to white (#ffffff). Fieldset legends have a background color of darker gray, #aaaaaa. Fieldset labels and text contained in the fieldsets is colored #333333. The form's Submit button is colored blue #0058B7.

An example of a form on the website is the reserves form.

Example of a Form

Instructor Information
Course Information
(formatted as ##:###:###:##)
Lending Period

Loan Period: The standard loan period for materials on reserve is 2 hours.

Please allow the Library staff to make all requests for transfer of materials from other Rutgers Libraries.

Photocopies must be provided for the processing of electronic reserves.

Please prioritize your requests by week of the semester, it will help us manage workflow and ensure materials are available when students need them. Be aware that Media Center videos only go on reserve for periods of two weeks at a time. You can note the dates desired in the text box for the reserve items.

 
.fieldset-legend {
  font-size: 1em;
  margin-left: 16px;
  margin-bottom: 16px;
  display: block;
  font-weight: 700
}
legend {
  font-size: 28px;
  color: #333;
  margin-left: -18px;
  min-width: 450px;
  height: 1.5em;
  margin-bottom: -26px
}
.fieldset-wrapper {
  margin-top: 24px;
  margin-bottom: 24px
}
#submitButton {
  background: #36404e;
  border-color: #1859B7;
  text-shadow:: 0 1px 1px #001B38;
  color: #fff;
  width: 7em;
  height: 2.5em;
  position: relative;
  font-size: 16px
}