Style Guide & Instructions

View document source for cut-and-paste HTML and CSS code.

Headings

`<h1>` Level Heading Title (italic, bold)

`<h2>` Level Heading Title (italic, bold)

`<h3>` Level Heading Title (italic, bold)

`<h4>` Level Heading Title (italic, bold)

`<h5>` Level Heading Title (italic, bold)

`<h6>` Level Heading Title (italic, bold)

Navigation

Main / Primary Navigation

Main navigation is in the form of tabs (see above for an example).

System / Secondary Navigation

Secondary navigation is for supporting or meta functionality of the application itself. It's for features such as help, log in / out, shortcut to dashboard, related links, user profile, application settings / preferences, search, etc. It is not related to main tasks a user may perform.

Random Access Progress Bar

Should appear below header (see example above). Used in a multistep process. Contains optional status indicators. (red x) symbolizes either "error in section" or "incomplete section". (green check) symbolizes "error free" or "completed section". Black bold text indicates current section.

Sequential Progress Bar

Should appear below header section at the top of the page. Used in a sequential multistep process where jumping between sections is disabled.

Breadcrumbs

Can be implemented with embedded dividers or CSS-generated dividers

CSS-generated dividers

Content embedded CSS dividers

Horizontal link list

Pagination

Prev / Next

Button Groups

Although it is possible to use different types of elements in a button group, use the same button element type for best results. Either use only <a> or <button> elements in a button group.

Mixed buttons `<a>`, `<button>`, `<input>`

Link buttons `<a>`

Button element buttons `<button>`

Submit Buttons

Primary Action Secondary Action Small Delete Disabled

Heading with a permalink anchor #

Allows end users to reference a particular section of a document when sending out links. Hover over the heading above to see the permalink.

Font Icons with @font-face embedded fonts

Foundation Icons General (http://www.zurb.com/playground/foundation-icons/)
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0 ` - = [ ] \ ; ' , . /
~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? "

Entypo Regular (http://www.entypo.com/)
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0 ` - = [ ] \ ; ' , . /
~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? "

Modern Pictograms (http://johncaserta.com/modern-pictograms/)
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0 ` - = [ ] \ ; ' , . /
~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? "

Font Awesome (http://fortawesome.github.com/Font-Awesome/)
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0 ` - = [ ] \ ; ' , . /
~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? "

Aside sidenote

.sidebar in the right margin for minor content, notes, definitions, reminders or any other short piece of text that’s an addendum and not main content

Text Styles & Usage

Not available = -

Fancy & = & (<abbr class="amp" title="and">&</abbr>)

Word Break <wbr> - use when you need to manually suggest a logical word break in case browser window is narrowed and content is too long to fit in (URLs) e.g., http://reference.sitepoint.com/html/wbr

“This is a blockquote of text Although it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use

The same button element Although it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in

A button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button element.”

“This is a blockquote of text Although it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use

The same button element Although it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in

A button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button element

“This is a blockquote of text Although it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use

The same button element Although it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in

A button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button elementAlthough it is possible to use different types of elements in a button group, use the same button element

5January

Modifying the XHTML Template

To use the Style Guide simply cut and paste the desired sections into your document.

All application pages consist of the header, content, and footer sections. The header section requires a few modifications. For example, the application name should be changed. In the case of the footer, only the path pointing to the Rutgers logo may need to be changed. The content area will require most customization. There are a few prebuilt components that may be used in this area. For the most part, the developer will have to provide data and custom code to populate this area.

This is an example of an inline text link.

Mandatory Changes

These changes mostly consist of replacing default template content with application specific content.

Document Attributes (`<head>` section)

Update document title by changing content of the <title> element
Update path to application specific CSS file
Update path to application specific JavaScript

Page Attributes (`<body>` tag)

Class attribute of the <body> element - should be the JIRA application code eg. MYR for myRutgers
Id attribute of the <body> element - should be a unique page name eg. login

Page Header Section (`<div id="header">`)

Navigation section:
- Remove the help link if no help is provided for the application (if needed)
- Remove the “Log Out” link for public applications (if needed)
- Remove the navigation (if needed)
Update application name

Main Navigation Section (`<div id="nav-main">`)

Update link names
Update link URLs
Update id attribute of each link (active elements are controlled through a combination of body id and link id)

Some applications do not need main navigation and so this main navigation section should be removed from the markup.

Content Section (`<div class="content">`)

Page title found in the <h2>
Remove template text
Add and customize pre-built components (tabbed sections, tables, forms, etc.); add data; add custom components

Adding Components

Including different components is a straight forward process of cutting and pasting code from this Style Guide and modifying it where necessary. Prebuilt components, custom components, application data should be added to the content section of the template. Please keep the prebuilt component structure as is. This is especially important with respect to id and class attributes and their values. Prebuilt components should be modified through changes to the component's content area. Also, some components may be added only once (eg. tabbed panel). If more than one instance of a component is required modification of the CSS and XHTML will be needed.

Status Messages

Typically only one status message is needed on a page. It either consists of an informative text, an error message as a result of some action, or a confirmation of a prior action. ?

Close Icon

"Closes" or sets the parent element to display:none;

Help Icon with Tooltip ?

Tooltips are position aware so those placed near the right side of the screen will automatically flip over to the left of the cursor.

Info message title

Info message - [p.info]

Please fix the following error(s):

Static error message(s) - [div.errors ul li]
Dynamic (fade in) error message(s) - [div#status.errors ul li]

Success message title

Static confirm action message - [div.info ul li]
Dynamic (fade in) confirm action message - [div#msg.info ul li]

Error! Inline error message

Notice: Inline info message *.

Inline help message

Congratulations! You have successfully created your account.

Simple Tabs

Simple Tabs (Centered)

Simple Tabs (Right)

Simple Tabs (Reversed)

Tabbed Pannel Group (jQuery)

... tab 1 content goes here ...

... tab two content goes here ...

... tab THREE content goes here ...

... tab IV content goes here ...

... tab panel 5 content goes here ...

Collapsible Content (Long navigation)

Close All | Open All

ESS Links

Heading

Sample Content

Content here....

Heading

Sample Content

Content here....

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in mauris lorem, eu rutrum massa. Nullam nec risus vitae sapien eleifend varius. Curabitur a dolor lacus. Nullam rhoncus lorem a felis congue id suscipit elit ultrices. Sed ultricies volutpat massa, ac venenatis sapien auctor sed. Morbi et tellus est, nec venenatis nisi. Suspendisse risus libero, condimentum id pretium ac, lobortis placerat magna. Fusce dapibus pretium lectus, ac rutrum nunc ullamcorper elementum. Integer molestie cursus sem, et interdum nibh sagittis eu.

Proin dignissim, lacus a aliquam hendrerit, urna eros congue ante, nec lobortis risus orci ultricies magna. Phasellus fermentum tortor nec urna porttitor adipiscing. Morbi rhoncus laoreet nibh dapibus euismod. In hac habitasse platea dictumst. Mauris hendrerit lorem quis felis mattis viverra. Quisque libero mi, egestas eget porttitor sed, consequat ac odio. Sed interdum, erat id tristique convallis, arcu lectus pharetra velit, vel lobortis leo lorem feugiat ipsum. Fusce tristique condimentum velit eget luctus. Nunc ullamcorper aliquet lacus at sagittis. Quisque eu neque sagittis purus gravida varius vel eu nisi. Integer consectetur nisi ut dui cursus nec vehicula justo lobortis. Aliquam id urna eget nunc convallis gravida.

Vivamus auctor consectetur odio, ut sagittis ante facilisis faucibus. Curabitur tempus purus et magna porttitor id luctus libero bibendum. Integer sapien arcu, ultrices eu lobortis vitae, fermentum a nunc. Mauris ac ante metus, ac suscipit ante. Nunc et velit sed mauris mattis ullamcorper in a nisi. Aenean dignissim libero et lectus eleifend rhoncus. Aenean quis risus ipsum, a suscipit lectus. Curabitur mattis tempus leo, vel dapibus lorem aliquet et. Sed lacinia pulvinar nibh at fermentum. Nam a enim ac leo venenatis cursus ac id magna. Morbi venenatis, lectus non accumsan pellentesque, erat dui commodo odio, eget varius nunc arcu id lorem. Nunc tincidunt tortor vitae sapien vehicula volutpat. Suspendisse sodales dapibus sapien eu tempus. Maecenas rhoncus ornare mattis. Curabitur ac malesuada neque.

see more ... xx xxxx xxxx x xxxxxxxx xxx xxxxxxx

Collapsible Content (FAQ and supporting info)

Who should use this application?

First-year or transfer students applying for the first time to Rutgers. This includes students who have taken courses at Rutgers only on a non-matriculating (non-degree seeking) basis (including summer or winter term) and who now wish to pursue an undergraduate degree. Once you create your account, your application will be saved between visits until you are ready to submit it.

Browser Support Requirements

The Undergraduate Admissions Application requires a "modern" (including Internet Explorer 7 and higher) web browser with JavaScript support enabled. Internet Explorer, versions 7 and lower, are not supported. For best performance and overall experience, we recommend latest versions of Internet Explorer, Firefox, Safari or Chrome.

Heading

Sample Content

Content here....

Data Tables (Plain)

↑ Top

Top

Used to display tabular data.

Table Caption: this table has the classes `.striped.highlight`
Property	IE	Mozilla	Safari	Chrome	Opera
This is a table footer
`column-width`	-	1.5 `-moz-`	3.0 `-webkit-`	5.0 `-webkit-`	-
`column-count`	-	1.5 `-moz-`	3.0 `-webkit-`	5.0 `-webkit-`	-
`columns`	-	-	3.0 `-webkit-`	5.0 `-webkit-`	-
`column-gap`	-	1.5 `-moz-`	3.0 `-webkit-`	5.0 `-webkit-`	-
`column-rule`	-	3.5 `-moz-`	3.0¹ `-webkit-`	5.0¹ `-webkit-`	-
`column-span`	-	-	-	-	-

Table Caption: classes `.lined.highlight`
Hd. 1	Heading 2	Heading 3	Heading 4	Heading 5
Table footer
cell	cell	cell	cell cell cell cell cell cell	cell
cell	cell cellcellcellcell	cell	cellcell	cellcellcellcellcellcellcell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell

Table Caption: classes `.lined.striped.highlight`
Hd. 1	Heading 2	Heading 3	Heading 4	Heading 5
Table footer
cell	cell	cell	cell cell cell cell cell cell	cell
cell	cell cellcellcellcell	cell	cellcell	cellcellcellcellcellcellcell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell

Table Caption: classes .data.striped.highlight
Hd. 1	Heading 2	Heading 3	Heading 4	Heading 5
Table footer
cell	cell	cell	cell cell cell cell cell cell	cell
cell	cell cellcellcellcell	cell	cellcell	cellcellcellcellcellcellcell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell

↑ Top

Top

Forms

Vertically Aligned Form

Required fields are marked with *.

This is some help text or a link to contextual help.

Personal Info

First Name

Last Name *

Middle Initial This is an error message

A Group of Choices (required)

This is an error message

Vanilla

Coffee

Strawberry

Choose your favorite ice cream

Ice Cream (Select with optgroups)

Ice Cream This is an error message

Ice Cream *

Leave some feedback

A Textarea

Common XHTML & CSS Template

Style Guide & Instructions

Headings

<h1> Level Heading Title (italic, bold)

<h2> Level Heading Title (italic, bold)

<h3> Level Heading Title (italic, bold)

<h4> Level Heading Title (italic, bold)

<h5> Level Heading Title (italic, bold)

<h6> Level Heading Title (italic, bold)

Navigation

Main / Primary Navigation

System / Secondary Navigation

Random Access Progress Bar

Sequential Progress Bar

Breadcrumbs

CSS-generated dividers

Content embedded CSS dividers

Horizontal link list

Pagination

Prev / Next

Button Groups

Mixed buttons <a>, <button>, <input>

Link buttons <a>

Button element buttons <button>

Submit Buttons

Heading with a permalink anchor #

Font Icons with @font-face embedded fonts

Text Styles & Usage

Modifying the XHTML Template

Mandatory Changes

Document Attributes (<head> section)

Page Attributes (<body> tag)

Page Header Section (<div id="header">)

Main Navigation Section (<div id="nav-main">)

Content Section (<div class="content">)

Adding Components

Status Messages

Close Icon

Help Icon with Tooltip ?

Info message title

Please fix the following error(s):

Success message title

Simple Tabs

Simple Tabs (Centered)

Simple Tabs (Right)

Simple Tabs (Reversed)

Tabbed Pannel Group (jQuery)

Collapsible Content (Long navigation)

ESS Links

Heading

Sample Content

Heading

Sample Content

Collapsible Content (FAQ and supporting info)

Who should use this application?

Browser Support Requirements

Heading

Sample Content

Data Tables (Plain)

Forms

`<h1>` Level Heading Title (italic, bold)

`<h2>` Level Heading Title (italic, bold)

`<h3>` Level Heading Title (italic, bold)

`<h4>` Level Heading Title (italic, bold)

`<h5>` Level Heading Title (italic, bold)

`<h6>` Level Heading Title (italic, bold)

Mixed buttons `<a>`, `<button>`, `<input>`

Link buttons `<a>`

Button element buttons `<button>`

Document Attributes (`<head>` section)

Page Attributes (`<body>` tag)

Page Header Section (`<div id="header">`)

Main Navigation Section (`<div id="nav-main">`)

Content Section (`<div class="content">`)