Style Guide

Bootstrap

Southeast uses the Bootstrap 3 framework to code their website. Bootstrap runs off of a grid system that is used to define page layouts amongst all screen sizes.

Bootstrap 3 Documentation     Bootstrap 3 Components


Typography

Heading 1 36px

Page heading appearing in red bar immediately before main content area

Heading 2 48px

Currently requires a class of new-heading

Heading 3

Currently requires a class of new-heading

Heading 4

Heading 5
Text Link
Requires a class of link
Red Bar

The red-bar class will add a small graphical flair to the bottom of an element or heading. Can be used for paragraphs or H3's/H4's.

List Styles
Ordered

use an ordered list ( ol), no type for a numbered list, types (ex: type="a") of 'a', 'A', 'i', and 'I' may be applied for lowercase & uppercase alphabet, or lowercase & uppercase Roman numerals.

  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Unordered
  • Item 1
  • Item 2
  • Item 3
.check class

Use on an unordered list to replace the standard dots with the checkmarks

  • Item 1
  • Item 2
  • Item 3

Link List

Colors

Southeast Red - Pantone 186
#C8102E

C | 2
M | 100
Y | 85
K | 6

R | 200
G | 16
B | 46

Rich Black
#000000

C | 40
M | 40
Y | 40
K | 100

R | 0
G | 0
B | 0

Cardiac Red - Pantone 201
#9D2235

C | 7
M | 100
Y | 68
K | 32

R | 157
G | 34
B | 53

Plum
#871B55

C | 41
M | 100
Y | 41
K | 20

R | 136
G | 28
B | 85

Navy
#003B5A

C | 100
M | 74
Y | 40
K | 32

R | 1
G | 60
B | 90

Fountain
#71C5E8

C | 52
M | 0
Y | 1
K | 0

R | 113
G | 197
B | 232

Sky Blue
#A5D9E7

C | 33
M | 1
Y | 7
K | 0

R | 165
G | 218
B | 231

Terrace
#279989

C | 75
M | 5
Y | 48
K | 3

R | 39
G | 153
B | 137

New Gum Tree
#DBE245

C | 18
M | 0
Y | 88
K | 0

R | 219
G | 226
B | 69

Orange
#F15C3B5

C | 0
M | 79
Y | 83
K | 0

R | 241
G | 93
B | 59

Pewter
#5C6670

C | 66
M | 52
Y | 44
K | 17

R | 93
G | 103
B | 112

Dome
#7A6855

C | 16
M | 29
Y | 38
K | 53

R | 122
G | 104
B | 85

Army Green
#8A8F64

C | 47
M | 33
Y | 69
K | 7

R | 139
G | 144
B | 100

Copper
#B07C57

C | 28
M | 52
Y | 71
K | 8

R | 176
G | 124
B | 87

Silver
#A4A9AD

C | 37
M | 27
Y | 27
K | 0

R | 164
G | 170
B | 173

Color Combination Examples

Colorize Mixins

We provide six different classes that can add a splash of color to a number of HTML elements. These can range from table headings, text boxes, etc. Just apply one of these classes to the desired element.

For colorizing panels, view the Panels Snippet

.colorize-primary

.colorize-secondary

.colorize-fountain

.colorize-terrace

.colorize-pewter

.colorize-silver

Utility Classes

.pull-left
Applies a float: left style on an element as well as a padding-right: 15px if it is in the .page-body.

For text, use .text-left

.pull-right
Applies a float: right style on an element as well as a padding-left: 15px if it is in the .page-body.

For text, use .text-left

.center-block
Sets an element to display: block and center via margin.

For text, use .text-center instead.

Contextual Badge

OPEN  CLOSING SOON  FULL  PLUM  NAVY  FOUNTAIN  TERRACE  PEWTER

<span class="label label-success">OPEN</span>
<span class="label label-warning">CLOSING SOON</span>
<span class="label label-danger">FULL</span>
<span class="label label-plum">PLUM</span>
<span class="label label-navy">NAVY</span>
<span class="label label-fountain">FOUNTAIN</span>
<span class="label label-terrace">TERRACE</span>
<span class="label label-pewter">PEWTER</span>

Buttons

Button   Fountain   New Gumtree   Terrace   Plum   Orange
<a class="btn btn-default">Button</a>
<a class="btn btn-fountain">Fountain</a> 
<a class="btn btn-gumtree">New Gumtree</a>
<a class="btn btn-terrace">Terrace</a> 
<a class="btn btn-plum">Plum</a>
<a class="btn btn-orange">Orange</a>

Button Group

<div class="btn-group">
<a class="btn btn-default">Button 1</a>
<a class="btn btn-default">Button 2</a>
<a class="btn btn-default">Button 3</a>
<a class="btn btn-default">Button 4</a>
</div>

Block-Level Button

Block-Level Button
<a class="btn btn-block btn-terrace">Block-Level Button</a>

Button with Drop Shadow

Button with Drop Shadow
<a class="btn btn-block btn-plum drop-shadow">Button with Drop Shadow</a>

Glyphicons

Glyphicons are small graphical elements that can be used to add flair to buttons, panel links and other items on pages. Click here for the full set.

Examples:

  • glyphicons glyphicons-asterisk
  • glyphicons glyphicons-plus
  • glyphicons glyphicons-euro
  • glyphicons glyphicons-eur
  • glyphicons glyphicons-minus
  • glyphicons glyphicons-cloud
  • glyphicons glyphicons-envelope

When adding glyphicons to a page, use a class of glyphicons on a span tag and include the class for the glyphicon you need; ex: glyphicons-wifi.

<span class="glyphicons glyphicons-notes"></span>
	

Glyphicon Hacks

Use them to turn a well into a link card:

Or add flair to a panel-link


Page Templates

There are a few page templates available in the _staging folder. These templates can be used as a place to come up with page layout ideas, something to show a department wanting a page redesign or as a place to borrow elements.

OU Snippets

Callouts

callout.inc

Callout Header

Place some text here

Much like the site-wide alert box, this div calls attention to a specifically important area of content. This is often displayed only for a certain amount of time until the alert is no longer relevant.

<div class="bs-callout bs-callout-warning">
	<h5>Callout Header</h5><br />
	<p>Place some text here</p>
</div>
	

Content Columns

columns.inc

Art class

Column Two

A paragraph of text can be added instead of links to help convey information about this category

Art class
Link Card

Or make a link card with or without descriptive text; to be used on index pages of department sites or inner pages that could use them

The content columns can be used on department landing pages to help classify different segments of links or cater to different visitors and help them find what they need in one click. This includes the index page link cards for department pages, both the department landing pages and internal index pages leading, perhaps, to different pages or degrees. They can be seen in action here

<div class="row col-wrap">
	<div class="col-sm-4">
		<div class="thumbnail mycol"><img src="/images/Admissions_Column1.jpg" alt="Art class" width="325" height="216" />
			<div class="caption">
				<h2 class="new-heading">Column One</h2>
				<ul>
					<li><a>Links or lists</a></li>
					<li><a>can be</a></li>
					<li><a>added</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="col-sm-4">
		...
	</div>
	<div class="col-sm-4">
		...
	</div>
</div>

expandinglinks.inc

First expanding panel information

second expanding panel information

Third expanding panel information

Use these handy expanding panels to avoid excessive page scrolling when a lot of information is necessary on the page. For example, FAQ pages. Mind your div ids and data-target information. data-target=#3 will expand the panel with div id="3".

<!--start expanding panel group-->
<div id="accordion" class="panel-group">
	<!--begin expanding panel-->
	<div class="panel panel-default">
		<div class="panel-heading" data-target="#1" data-toggle="collapse" data-parent="#accordion">
			<h4 class="panel-title">
				<a class="accordion-toggle">
					First expand link
				</a>
			</h4>
		</div>
		<div id="1" class="panel-collapse collapse">
			<div class="panel-body">
				<p>First expanding panel information</p>
			</div>
		</div>
	</div>
	<!--end expanding panel-->
	<!--begin expanding panel-->
	<div class="panel panel-default">
		<div class="panel-heading" data-target="#2" data-toggle="collapse" data-parent="#accordion">
			<h4 class="panel-title">
				<a class="accordion-toggle">
					Second expand link
				</a>
			</h4>
		</div>
		<div id="2" class="panel-collapse collapse">
			<div class="panel-body">
				<p>Second expanding panel information</p>
			</div>
		</div>
	</div>
	<!--end expanding panel-->
	<!--begin expanding panel-->
	<div class="panel panel-default">
		<div class="panel-heading" data-target="#3" data-toggle="collapse" data-parent="#accordion">
			<h4 class="panel-title">
				<a class="accordion-toggle">
					Third expand link
				</a>
			</h4>
		</div>
		<div id="3" class="panel-collapse collapse">
			<div class="panel-body">
				<p>Third expanding panel information</p>
			</div>
		</div>
	</div>
	<!--end expanding panel-->
</div>

Expanding Panel Hacks

Use the .panel-(color) classes in place of .panel-default to create panel links with different color schemes.

First expanding panel information

second expanding panel information

Third expanding panel information

Image Floats

image-floating-left.inc
image-floating-right.inc

If you need to incorporate an image and want to both float it elegantly and also give it a little flair and a caption, these two snippets are good solutions. A class of .hidden-xs can make them invisible if they take up too much space in mobile views.


Image caption goes here (remove if not needed)
<div class="well pull-left">
	<img src="http://www.placehold.it/325x200" alt="" />
	<br />
	<small>Image caption goes here (remove if not needed)</small>
</div>


Image caption goes here (remove if not needed)
<div class="well pull-right">
	<img src="http://www.placehold.it/325x200" alt="" />
	<br />
	<small>Image caption goes here (remove if not needed)</small>
</div>

Tables

interior_table.inc

Program Website Email
Harrison College of Business www.semo.edu/hcb business@semo.edu
Department of Accounting www.semo.edu/accounting acctmis@semo.edu
International Business Programs www.semo.edu/ibp ibp@semo.edu

Center for Innovation
and Entrepreneurship

www.semo.edu/cie cie@semo.edu

New solution for tables on mobile devices uses a standard table that scrolls left and right on swipe. If there is more content than fits on the screen, the very edge of the table fades to a darker gray as a hint that that there is more to see. Depending on browser and OS, a scrollbar may or may not also appear at the bottom of the table.

<div class="widetable">
	<table>
		<thead>
			<tr>
				<th>Program</th>
				<th>Website</th>
				<th>Email</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Harrison College of Business</td>
				<td><a href="http://www.semo.edu/hcb">www.semo.edu/hcb</a></td>
				<td><a href="mailto:business@semo.edu">business@semo.edu</a></td>
			</tr>
			<tr>
				<td>Department of Accounting</td>
				<td><a href="http://www.semo.edu/accounting">www.semo.edu/accounting</a></td>
				<td><a href="mailto:acctmis@semo.edu">acctmis@semo.edu</a></td>
			</tr>
			<tr>
				<td>International Business Programs</td>
				<td><a href="http://www.semo.edu/ibp">www.semo.edu/ibp</a></td>
				<td><a href="mailto:ibp@semo.edu">ibp@semo.edu</a></td>
			</tr>
			<tr>
				<td>
					<p>Center for Innovation <br />and Entrepreneurship</p>
				</td>
				<td><a href="http://www.semo.edu/cie">www.semo.edu/cie</a></td>
				<td><a href="mailto:cie@semo.edu">cie@semo.edu</a></td>
			</tr>
		</tbody>
	</table>
</div>

Table Hacks

You can colorize table headings using the Colorize Mixins.

Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

You can also use Bootstrap properties to make tables containing large amounts of information more readable by adding the class of .table and .table-striped or .table-hover to the table tag.

Media List

media-list.inc

Houck's Place
  • Located in Merick Hall
  • Made-to-order sandwiches
  • Flatbread pizza, salads, wraps and paninis
  • Outtakes, frozen treats and C-Store snacks

This is a list item that uses the "Media Object" component from Bootstrap. It combines an image, header, and text in one unified body. They can be stacked in the content area to list several items.

<div class="well well-sm">
	<div class="media">
		<a class="pull-left">
			<img class="media-object" src="http://placehold.it/300x200"/>
		</a>
		<div class="media-body">
			<a class="link" href="#">Houck's Place</a>
			<ul>
				<li>Located in Merick Hall</li>
				<li>Made-to-order sandwiches</li>
				<li>Flatbread pizza, salads, wraps and paninis</li>
				<li>Outtakes, frozen treats and C-Store snacks</li>
			</ul>
		</div>
	</div>
</div>

If all you need is a heading for the content within the list, you can use a heading tag and apply the red-bar to create a stylish header for the content.

Houck's Place

  • Located in Merick Hall
  • Made-to-order sandwiches
  • Flatbread pizza, salads, wraps and paninis
  • Outtakes, frozen treats and C-Store snacks

modal.inc

Pop-up window useful for videos, image galleries, forms, etc. Footer div is included by default, but is optional. The header may need to stay--I tried moving the closing "X" button out of the header and into the content div, and it no longer worked. NOTE: For modals that appear in the Megu Menu, the code for the modal itself (not the button to activate it) must be placed in the footer (found in the "common.xsl" file).

<!--Button Trigger Modal-->
<button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Launch Modal</button>
<!--Modal-->
<div class="modal-fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
				<h5 class="modal-title" id="myModalLabel">Modal Template</h5>
			</div>
			<div class="modal-body">
				Content Goes Here
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove">&nbsp;</span>Close</button>
			</div>
		</div>
	</div>
</div>

Panels

panel.inc

Panel heading
Panel Body

Panels can be used to separate content into bordered sections. They provide three different areas for content to reside in. Not all are required so they can be customized to suit the situation. Panel Links are similar to buttons but they do not have the same "call-to-action" appearance as buttons do. They should be used instead of text links where there are a large number of them on a page or if a list of links needs to look more appealing.

<Full Panel-->
<div class="panel panel-default">
	<div class="panel-heading">
		Panel heading
	</div>
	<div class="panel-body">
		Panel Body
	</div>
	<div class="panel-footer">
		Panel Footer
	</div>
</div>

<!--Panel Link-->
<div class="panel panel-default">
	<div class="panel-link">
		<a href="#">Panel Link</a>
	</div>
</div>

Panel Hacks

Panels have colorize classes unique to them. .panel-primary, panel-secondary, .panel-fountain, .panel-terrace, .panel-plum and .panel-pewter to be used in place of .panel-default.

.panel-primary
Panel Body
.panel-secondary
Panel Body
.panel-fountain
Panel Body
.panel-terrace
Panel Body
.panel-plum
Panel Body
.panel-pewter
Panel Body

Panel links have similar styles, but again use different classes. To colorize the links use .panel-link-terrace, .panel-link-sered, .panel-link-river instead of simply .panel-link to colorize them. See glyphicons to view the button-type item with graphical flair.

Tabs

tabs-raw.inc

Tab 1 content
Tab 2 content
Tab 3 content
Fall Semester
  • Class 1
  • Class 2
  • Class 3
Spring Semester
  • Class 1
  • Class 2
  • Class 3

Used in a similar way to the Expanding Links, but has a more "navigational" feel to it that can help split up different categories of information.

<div class="tabbable">
	<ul class="nav nav-tabs nav-justified">
		<li class="active"><a href="#pane1" data-toggle="tab">Tab 1</a></li>
		<li class=""><a href="#pane2" data-toggle="tab">Tab 2</a></li>
		<li class=""><a href="#pane3" data-toggle="tab">Tab 3</a></li>
		<li class=""><a href="#pane4" data-toggle="tab">Tab 4</a></li>      
	</ul>
	<div class="tab-content curriculum">
		<div id="pane1" class="tab-pane active">
			<div class="row">Tab 1 text</div>
		</div>
		<div id="pane2" class="tab-pane">
			<div class="row">Tab 2 text</div>
		</div>
		<div id="pane3" class="tab-pane">
			<div class="row">Tab 3 text</div>
		</div>
		<div id="pane4" class="tab-pane">
			<div class="row">Tab 4 text</div>
		</div>
	</div>
</div>

If you find yourself needing to link to a tab, there's Javascript for that! Place the following in the <footcode>

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
	$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

Vimeo Modal

vimeo-modal.inc

State of the Art Video
View our State of the Art Facilities

Used for creating video pop-outs to feature videos in a non-obtrusive manner.
NOTE: Remember to include the Script - Fancybox Media {{a:193{{ asset in the <footcode> tags within the page source.

<div class="well pull-right">
	<a href="http://vimeo.com/105160245" id="fancybox-media" data-width="800" data-height="450"><img src="/images/Modal-StateOfTheArt.jpg" alt="State of the Art Video" width="300" height="160" /></a>
	<br />
	<small>View our State of the Art Facilities</small>
</div>