SUA Master Style Guide
Page Layouts
Header Images
The header image above with Bucky the Blowfish has to come before #main-content. It creates a div with the correct height to contain a header image. You have to assign the actual background image yourself.
div#header-image {
background: url(/images/ampersanimals/bucky-says.jpg) 0 0 no-repeat;
}
<div id="header-image"></div>
Similarly, the summary paragraph in the upper right is created using the #summary id. It too must exist outside of #main-content.
<div id="summary"> <h3 class="banner">Heading 3</h3> <p>This is a summary div with a paragraph inside. It appears purple because it's maroon with transparency over a blue background.</p> </div>
Standard Two-column Layout
Using div#main-content will create a single column to the right of the #left-nav with a 20px gutter (padding) like in the example below.
One-column Layout
If you are using the one-column template, just add an "extended" class to the #main-content div and the #header-image div so they extend to the full width of the page.
<div id="main-content" class="extended">page content</div>
Three-column Layout
To create a three-column layout (like this page), add the "middle-column" class to #main-content.
Add a div with the id #contextual to get the third column pictured below. This div must come after #main-content.
<div id="main-content" class="middle-column">page content</div>
To create a heading w/ a banner, just add the "banner" class to any h3 tag within #contextual.
<h3 class="banner">Heading</h3>
The "alt" Layout
There is also an "alt" class that is used in Reservations. It has a custom width to accommodate a narrower left column.
<div id="main-content" class="alt">page content</div>
Creating Columns
The .column class gives any block level element a width of 48% and will float left with a 2% right margin.
Div floated left with 50% width (48% width + 2% right margin): .column
second div with .column & .last classes (48% width + 2% left margin).
Note: Two-column layouts using the .column class now require the .last class for the second column. The style has been changed for better margins so it uses 100% of the available space.
Div with 1/3 width: .narrow
Add .wrap to force the element to wrap to the next line.
Div with 2/3 width: .wide
Creating two columns
<div class="column">First column</div> <div class="column last">Second column</div>
Creating three columns
<div class="column narrow">First column</div> <div class="column narrow">Second column</div> <div class="column narrow last">Third column</div>
Row Clear
.rowClear is back by popular demand. It's now simply called .clear
<div class="column narrow">Left floating div</div> <div class="clear"></div> <div class="column narrow">Another left floating div</div>
Lists
Nested Lists
These are the unordered list defaults.
- Yksi
- Kaksi
- Kolme
- Nejlä
- Viisi
-
This is a sub-list:
- Kuusi
- Seitsemän
- Kahdeksan
- Yhdeksän
- Kymmenen
-
This is a sub-sub-list:
- Punk
- Rock
- Science
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor dui, pharetra quis lacinia nec, dapibus vitae leo.
Ordered Lists
Default
- Bill Bryson
- Neal Stephenson
Alpha
- alpha
- beta
<ol class="alpha"> <li>alpha</li> <li>beta</li> </ol>
Lower-case Alpha
- alpha
- beta
<ol class="alpha lower"> <li>alpha</li> <li>beta</li> </ol>
Long Lists (Leading Zeroes)
- Raindrops Keep Fallin' on My Head - B. J. Thomas
- I'll Be There - The Jackson Five
- I Think I Love You - The Partridge Family
- Bridge Over Troubled Water - Simon and Garfunkel
- (They Long to Be) Close to You - Carpenters
- My Sweet Lord/Isn't It a Pity - George Harrison
- War - Edwin Starr
- American Woman/No Sugar Tonight - Guess Who
- Let It Be - The Beatles
- I Want You Back - The Jackson Five
<ol class="long"> <li>Raindrops Keep Fallin' on My Head - B. J. Thomas</li> <li>I'll Be There - The Jackson Five</li> <li>I Think I Love You - The Partridge Family</li> <li>Bridge Over Troubled Water - Simon and Garfunkel</li> <li>(They Long to Be) Close to You - Carpenters</li> <li>My Sweet Lord/Isn't It a Pity - George Harrison</li> <li>War - Edwin Starr</li> <li>American Woman/No Sugar Tonight - Guess Who</li> <li>Let It Be - The Beatles</li> <li>I Want You Back - The Jackson Five</li> </ol>
Roman Numbers
- Augustus
- Tiberius
- Gaius (Caligula)
- Claudius
<ol class="roman"> <li>Augustus</li> <li>Tiberius</li> <li>Gaius (Caligula)</li> <li>Claudius</li> </ol>
Lower-case Roman Numbers
- Iulius Vindex
- Clodius Macer
<ol class="roman lower"> <li>Iulius Vindex</li> <li>Clodius Macer</li> </ol>
Floating Lists
Since lists are block elements, we can simply apply a couple of the above classes to control their width and make them float.
- List item 1
- List item 2
- List item 1
- List item 2
<ul class="column narrow"> <li>List item 1</li> <li>List item 2</li> </ul> <ul class="column narrow"> <li>List item 1</li> <li>List item 2</li> </ul>
Definition Lists
- Definition Title
- Definition 1
- Definition 2
<dl> <dt>Definition Title</dt> <dd>Definition 1</dd> <dd>Definition 2</dd> </dl>
Table-like Definition Lists
These are useful for reducing the amount of markup to display information that might otherwise have existed in a two-column table.
1 <table class="data"> 2 <thead> 3 <tr> 4 <th colspan="2"><Heading</th> 5 </tr> 6 </thead> 7 <tbody> 8 <tr> 9 <td><strong>Title</strong></td> 10 <td>Definition</td> 11 </tr> 12 <tr> 13 <td><strong>Title</strong></td> 14 <td>Definition</td> 15 </tr> 16 <tr> 17 <td><strong>Title</strong></td> 18 <td>Definition</td> 19 </tr> 20 <tr> 21 <td><strong>Title</strong></td> 22 <td>Definition</td> 23 </tr> 24 </tbody> 25 </table>
Becomes:
1 <dl class="data"> 2 <dt class="heading">Heading</dt> 3 <dd> 4 <dl> 5 <dt>Title</dt> 6 <dd>Definition</dd> 7 <dt>Title</dt> 8 <dd>Definition</dd> 9 <dt>Title</dt> 10 <dd>Definition</dd> 11 <dt>Title</dt> 12 <dd>Definition</dd> 13 </dl> 14 </dd> 15 </dl>
And looks like:
- Heading
-
- Title
- Definition
- Title
- Definition
- Title
- Definition
- Title
- Definition
To use several headings in a single list, apply the last class to the last dd of the nested list to give the heading a better margin like so:
- Heading 1
-
- Title
- Definition
- Title
- Definition
- Title
- Definition
- Title
- Definition
- Heading 2
-
- Title
- Definition
- Title
- Definition
- Title
- Definition
- Title
- Definition
<dl class="data"> <dt class="heading">Heading 1</dt> <dd> <dl> <dt>Title</dt> <dd>Definition</dd> <dt>Title</dt> <dd>Definition</dd> <dt>Title</dt> <dd>Definition</dd> <dt>Title</dt> <dd class="last">Definition</dd> </dl> </dd> <dt class="heading">Heading 2</dt> <dd> <dl> <dt>Title</dt> <dd>Definition</dd> <dt>Title</dt> <dd>Definition</dd> <dt>Title</dt> <dd>Definition</dd> <dt>Title</dt> <dd class="last">Definition</dd> </dl> </dd> </dl>
The amount of markup is reduced for the same amount of information and is still semantically valid.
You can even nest definition lists within like so:
- Postal Rates
-
- Special Services (External Link.)
-
- Certificate of Mailing
- $1.15
- Certified Mail
- $2.80
- Delivery Confirmation
-
- Priority Mail
- $0.70
- Parcel Services
- $0.80
- First Class Parcels
- $0.80
- Signature Confirmation
- $2.35
<dl class="data"> <dt class="heading">Postal Rates</dt> <dd> <dl> <dt><a href="http://www.usps.com/all/insuranceandextraservices/welcome.htm" class="external" rel="external">Special Services</a></dt> <dd> <dl> <dt>Certificate of Mailing</dt> <dd>$1.15</dd> <dt>Certified Mail</dt> <dd>$2.80</dd> <dt>Delivery Confirmation</dt> <dd> <dl class="shorten"> <dt>Priority Mail</dt> <dd>$0.70</dd> <dt>Parcel Services</dt> <dd>$0.80</dd> <dt>First Class Parcels</dt> <dd>$0.80</dd> </dl> </dd> <dt>Signature Confirmation</dt> <dd>$2.35</dd> </dl> </dd> </dl> </dd> </dl>
Note: The tertiary nested list reverts back to a standard formatting and the list with the shorten class appends a colon to the right of the dt and the dt & dd both float left. Use this class judiciously. The formatting does not always work better than a standard definition list.
Headings
Headings also have matching semantic classes so that if you need to resize a heading, you can simply attach the corresponding class to either bump the size up or down.
Heading 1
There can be only one and the new template owns it. Sorry.
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 3 with the .h4 class
Heading 3 with the .h2 class
<h3 class="h4">Heading 3 with the .h4 class</h3> <h3 class="h2">Heading 3 with the .h2 class</h3>
Link Icons
PDF, Word & Excel files will now use the download icons by default using the a[attribute$="match"] selector (a[href$=".pdf"], for example). Use .no-icon for exceptions.
- Download PDF
- Download DOC
- Download XLS
- Download XLS (no icon)
- Download CAL
- Directions
- Arrow
- Back Arrow
- Outside Link (open in new window) (External Link.)
- Form
<ul class="downloads"> <li><a href="dontfollow.pdf">Download PDF</a></li> <li><a href="dontfollow.doc">Download DOC</a></li> <li><a href="dontfollow.xls">Download XLS</a></li> <li><a href="dontfollow.xls" class="no-icon">Download XLS (no icon)</a></li> <li><a class="download-cal" href="#">Download CAL</a></li> <li><a class="directions" href="#">Directions</a></li> <li><a class="arrow" href="#">Arrow</a></li> <li><a class="backarrow" href="#">Back Arrow</a></li> <li><a class="external" href="#">Outside Link <span>(open in new window)</span></a></li> <li><a class="form" href="#">Form</a></li> </ul>
These styles have been updated to use the a[href$=".pdf"] syntax for attaching the icons. For cases when you don't wish to have a download icon appear next to a link (e.g., a linked image), add the plain class.
<a href="dontfollow.pdf" class="plain">Download PDF</a>
<p class="form-link"><a href="#">Form Link</a></p>
A link that will open in a new window/tab.
<a href="bucky.php" rel="external">A link that will open in a new window/tab</a>.
<ul class="downloads rss-feed"> <li><a href="#">Download feed</a></li> <li><a href="#">Download feed</a></li> </ul>
Images
Note: Floats left by default.
Note: Image 'ad' styles have not been moved to the new design. A reassessment of their margins is in order in light of the new design dimensions.
Images w/ shadow
<img class="heading" src="/images/entertainment-springjam.png" alt="SpringJam" />
Text Styles
Use the details class for small text that is meant to provide extra information. For example, it can be used in many places where <small> used to be used. For example:
Here is a paragraph
Here is some additional information that might interest you.
<p>Here is a paragraph</p> <p class="details">Here is some additional information that might interest you.</p>
<small> has been given new semantic meaning in HTML5, so if you're HTML5, use small for details.
Here is a paragraph
Here is some additional information that might interest you.
<p> Here is a paragraph<br /> <small>Here is some additional information that might interest you.</small> </p>
'Big' and 'Bigger' text styles have not been moved over either. If there is a need for those styles, it should be context-driven and therefore semantic.
<del>Strikeout with a red line</del>
Note: The .strikeout class that was formerly attached to a span has not been moved over since it's not good semantic markup.
Featured Content
Alternate background
Note: The alternate background no longer has a border. Also the padding is built in to the alternate class so it can be attached to any block level element.
<p class="alternate">Alternate background</p>
Hidden Content
Use the .accessible class for content that you want to hide, but still want accessible for screen readers.
You can't see this content but it is accessible to screen readers
<p class="accessible">You can't see this content but it is accessible to screen readers</p>
Here are styles:
.accessible {
height: 1px !important;
left: -9999px !important;
overflow: hidden !important;
position: absolute !important;
top: -9999px !important;
width: 1px !important;
}
Messages
<p class="message info">This is informative. Use this class when the information is useful and important, but still the user could probably proceed without reading it.</p>
<p class="message alert">Important information. Use this when the user is likely to enter an error state if they do not heed the information in this alert message.</p>
<p class="message error">Error detected. This is an error state that the user must correct.</p>
<p class="message successful">Successful. The user has completed something.</p>
<div class="message info"> <h3>Here Ye, Hear Ye</h3> <p>A donkey, a donkey, my kingdom for a donkey.</p> </div>
<div class="message alert"> <h3>Just so you know...</h3> <p>Please don't feed the LOL cats.</p> </div>
<div class="message error"> <h3>Oops, you broke something!</h3> <p>Please correct the errors listed below:</p> <ul> <li>Your name is not 'Condor McBigbird'.</li> <li>There is no such location 'Wisconsin'.</li> </ul> </div>
<div class="message successful"> <h3>Successfully submitted!</h3> <p>We have received your response, please allow 2-5 business days for a reply.</p> <ul> <li>You have signed up for 34 spam lists.</li> <li>Your credit card number has been submitted to the black market.</li> <li>Your house is now being re-possessed.</li> </ul> </div>
Stats?
<p class="stats">Stats?</p>
Table Styles
Data
| Header 1 | Header 2 |
|---|---|
| Table Data | |
| Row 1 | |
| Row 2 | |
<table class="data"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr class="odd"> <td colspan="2">Table Data</td> </tr> <tr class="even"> <td colspan="2">Row 1</td> </tr> <tr class="odd"> <td colspan="2">Row 2</td> </tr> </tbody> </table>
Fancy
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
| Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 |
<table class="fancy"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> <td>Row 1 Column 3</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> <td>Row 2 Column 3</td> </tr> <tr> <td>Row 3 Column 1</td> <td>Row 3 Column 2</td> <td>Row 3 Column 3</td> </tr> </tbody> </table>
Left Nav Contact Us Button
- Create a simple form
- Make the action attribute point to contact-us.php
- Add the
contactclass to the submit button
<form action="contact-us.php" method="post"><p> <label for="f_contact" class="accessible">Contact Us</label> <input class="contact" type="submit" value="Contact Us" name="contact" id="f_contact" /> </p></form>
Note: This style only works within the #left-nav div.
Table of Contents
Heading 3
This is a summary div with a paragraph inside.