Interface

Button Styles

When making a link its base style will look like as follows

This is a link

Code Section

<a href="#">This is a link</a>

The following style classes can be added to links to make them buttons.
Note that some widths will vary depending on how many buttons are in a row.
Thin buttons generally take up 100% of the width they are able.

Code Section

<a class="uccsGoldButtonThin" href="#">This is a thin gold button</a>
<a class="uccsDarkButtonThin" href="#">This is a thin dark button</a>
<a class="uccsLightButtonThin" href="#">This is a thin light button</a>
<a class="uccsBlueButtonThin" href="#">This is a thin blue button</a>

The call to action(CTA) buttons are larger than the thin buttons.
Other than that most of the style is the same.

Code Section

<a class="CTAGoldButton" href="#">Gold CTA Button</a>
<a class="CTADarkButton" href="#">Dark CTA Button</a>
<a class="CTALightButton" href="#">Light CTA Button</a>
<a class="CTABlueButton" href="#">Blue CTA Button</a>

Buttons with icons for documents and links.

PDF Button Name Excel Button Name Word Button Name Power Point Button Name Link Button Name PDF Button Name Excel Button Name Word Button Name Power Point Button Name Link Button Name PDF Button Name Excel Button Name Word Button Name Power Point Button Name Link Button Name PDF Button Name Excel Button Name Word Button Name Power Point Button Name Link Button Name

Code Section

<a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf-o" style="padding: 5px"></i></a>
<a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel-o" style="padding: 5px"></i></a>
<a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word-o" style="padding: 5px"></i></a>
<a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint-o" style="padding: 5px"></i></a>
<a class="CTAGoldButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="padding: 5px"></i></a>
<a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf-o" style="padding: 5px"></i></a>
<a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel-o" style="padding: 5px"></i></a>
<a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word-o" style="padding: 5px"></i></a>
<a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint-o" style="padding: 5px"></i></a>
<a class="CTADarkButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="padding: 5px"></i></a>
<a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf-o" style="padding: 5px"></i></a>
<a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel-o" style="padding: 5px"></i></a>
<a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word-o" style="padding: 5px"></i></a>
<a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint-o" style="padding: 5px"></i></a>
<a class="CTALightButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="padding: 5px"></i></a>
<a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf-o" style="padding: 5px"></i></a>
<a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel-o" style="padding: 5px"></i></a>
<a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word-o" style="padding: 5px"></i></a>
<a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint-o" style="padding: 5px"></i></a>
<a class="CTABlueButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="padding: 5px"></i></a>

Lines

Different horizontal lines are helpful when separating sections.

UCCS Gold Line


UCCS Dark Line


UCCS Thin Light Line


UCCS Blue Line


<hr class="uccsGoldHR">
<hr class="uccsDarkHR">
<hr class="uccsThinLightHR">
<hr class="uccsBlueHR">

Accordions

UCCS currently has a page type called the, FAQ page. More often then not, this page type will be able to meet your accordion needs. Otherwise, you can use this code to create accordions.

Panel Body Section 1

Panel Body Section 2

Panel Body Section 3

Panel Body Section 4

Code Section

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" id="headingOne">
<h4 class="panel-title"><a class="block" data-parent="#accordion" data-toggle="collapse" href="#collapseOne">Panel Title
1</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div class="panel-body">
<p>Panel Body Section 1</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingTwo">
<h4 class="panel-title"><a class="block" class="collapsed" data-parent="#accordion" data-toggle="collapse"
href="#collapseTwo">Panel Title 2</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body">
<p>Panel Body Section 2</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingThree">
<h4 class="panel-title"><a class="block" class="collapsed" data-parent="#accordion" data-toggle="collapse"
href="#collapseThree">Panel Title 3</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapseThree">
<div class="panel-body">
<p>Panel Body Section 3</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingFour">
<h4 class="panel-title"><a class="block" class="collapsed" data-parent="#accordion" data-toggle="collapse"
href="#collapseFour">Panel Title 4</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapseFour">
<div class="panel-body">
<p>Panel Body Section 4</p>
</div>
</div>
</div>
</div>

Section Header

If you would like to have a more obvious way to separate different sections on a page you can use this section header.

This is a UCCS Gold Section Header

<h3 class="uccsGoldSectionHeader">
This is a UCCS Gold Section Header
</h3>

Table Styles

Tables are extremely simple and don't have many different types of styles to go along with them.

This is a simple
html table for you

Code Section

<table>
<tbody>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>simple</td>
</tr>
<tr>
<td>html</td>
<td>table</td>
<td>for</td>
<td>you</td>
</tr>
</tbody>
</table>

Generally, we don't want to use just the base table.
Below are the main styles that should be used on a table
This will include the container that makes large tables responsive.

This is a properly
styled html table test
row for stripes example

Code Section

<table class="table table-bordered table-striped">
<tbody>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>properly</td>
</tr>
<tr>
<td>styled</td>
<td>html</td>
<td>table</td>
<td>test</td>
</tr>
<tr>
<td>row</td>
<td>for</td>
<td>stripes</td>
<td>example</td>
</tr>
</tbody>
</table>

Framework

UCCS websites use a Bootstrap framework to organize content. This framework makes use of a 12 grid system.
Below is a table of this grid system as well as the tag associated with each section.

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Code

Below is the corresponding tags that go with each column.

<div class="col-xs-1"></div>
<div class="col-xs-4"></div>
<div class="col-xs-6"></div>
<div class="col-xs-8"></div>
<div class="col-xs-12"></div>