Trojan 2.0 Best Practices and Style Guide



Best Practices

Design Methodology: Responsive Design

The Trojan 2.0 site is based on the responsive design methodology and uses the Bootstrap framework. The responsive design approach attempts to provide the best experience available to visitors using a variety of devices.


HTML5

The Trojan template is HTML5 compliant and as such there are several tags and old habits that should not be integrated into any pages in the website.

Prohibited Tags

Use of the following tags is prohibited:

  • <a name="anchor-name">
  • <font>
  • <b> (use <strong> instead)
  • <center>
  • <frame> and <frameset>

Visit the W3Schools website for more information about tags that are support in HTML5.

Tables

Tables are only permitted to be used for displaying formatted, tabular data. Use of tables for layout purposes is prohibited and unnecessary when using DIV tags properly.


Cascading Style Sheets (CSS)

The majority of the website styles are maintained in external style sheets. The Trojan template itself requires the /assets/themes/trojan/css/core.css file, which provides Bootstrap customizations that override the default styles provided in the main Bootstrap CSS file.

Each area that is not considered to be a part of the main template is provided with the ability to implement a custom CSS file. These areas are not required to use this file unless area-specific styles are needed or the area-specific menu is not the same width as the top-level Trojan menu. Media Queries for Trojan are included in a separate CSS file. If different media queries are required then the template for an area should not include the /assets/themes/trojan/css/mediaqueries.css file but instead should use media queries defined in the area-specific CSS.

No changes to the main /assets/themes/trojan/css/core.css file are to be made without the permission of the Web Architect. In addition, no changes should be added anywhere to override the basic typographic styles without proper approval.

Very few pages on Trojan should have custom styles within their headers or provided in-line unless they are required to customize existing elements (such as scripts) or to adjust unique issues.


Styling Control

No styles that are not found within this document will be added to a page without review by the Web Architect or an individual designated by the Web Architect regardless of whether or not the change is only applied to a single line or element. Proper control of the stying within Trojan is required to ensure the entegrity of the site. Exceptions to this policy will be included in this document.


Use of JavaScript and Other Resources from CDNs

Content Delivery Networks are frequently used by web developers to decrease the loading time of a page and to offload bandwidth use and file storage to a third-party. The use of jQuery, Google Fonts, and Google Analytics are examples of items commmonly used via CDNs.

Use of CDN-hosted content is permitted only if a copy of the files are available locally, in the event that the CDN becomes unavailable. Hosting a local copy of a file will permit the webmaster to make a minor update to page templates to use the locally-hosted files until the CDN-hosted files are once again available. This also ensures that a copy of the file is available should the CDN choose to permanently remove the file.

Webmasters must ensure that their local files match the versions of the files that are being used from the CDNs. For example, if one is linking to a CDN-hosted jQuery API that is version 2.3.3 then the local copy should also be version 2.3.3.

Note that this requirement does not apply to the embedding of third-party content that is only available via direct download, such as Formstack forms or embedded YouTube videos.

The following template files are provided via CDN and also stored locally for backup/emergency use:

  • jQuery (all components)
  • Bootstrap (all components)

Top-Level Menu

The top-level navigation menu is the menu that is used on all top-level pages in the Trojan website that are not associated with a specific department. For example, the Trojan homepage and the Schedules page are top-level pages and use the same navigation menu. This menu is managed only by IT staff.

Area-Specific (Custom) Menus

All pages feature only a single navigation menu. Areas using a custom templates will also use a menu. These menus must follow specific guidelines:

Trojan Drop-down Menu is Always first

All custom menus must include the Trojan menu option via an included file. Failure to include this file will also cause the custom menu itself to fail. These links are managed by the IT department and are required in all secondary areas to facilitate navigation.

Home is always the second link

The second link must be labeled Home and it must link to the homepage of the secondary area.

About Us is recommended for general information

The use of About Us is recommended for grouping links on a navigation menu such as Mission Statement, Dean's Welcome, Staff and other types of content.

Keep it simple

Areas should endeavour to keep their navigation menus as simple and easy to use as possible. Long lists of links are strongly discouraged and may indicate a problem with the organization of content in a website. In addition, mobile users will have difficulty navigating complicated menus.


Footer

Required Content

The footer must always include the following:

  • University address
  • Primary contact number for the university
  • Website Feedback form link
  • Student Complaints link
  • Privacy Statement link
  • Disclaimer link
  • Accreditation Statement link
  • Copyright information

Document and Directory Names

All webpages, other files and directories should use SEO-friendly names whenever possible. Use dashes (financial-aid). Avoid using underscores (financial_aid) or no spaces (financialaid). Use descriptive names that can also function as keywords. Be aware that file names and paths are displayed in search results.


Links within Trojan (Including CSS, Templates and JS)

All links used within included files, external CSS and templates, or links to resources that are within Trojan but outside of the current directory path, must use absolute URLs.

Links to resources that are within the same website or subdirectory may use relative paths as long as those links are only within the webpage content areas (not within an included file or external file).

In some cases a script will only work properly if the full web address is used. In those cases departure from these guidelines will be permitted.

Incorrect Usage

<a href="http://trojan.troy.edu/index.html">Home</a>
      
<a href="../index.html">Home</a>    

Correct Usage

<a href="/index.html">Home</a>

Links within the same page must use dashes (not spaces or underscores) for a multiword name.

The Trojan site is HTML5 compliant and as a result the deprecated "name" property must not be used to create an internal link. Instead, set an ID on the destination tag.

<a href="#link-to-section">Link to Section</a>

<h2 id="link-to-section">Section</h2>
      

Often a list of links are provided at the beginning of a webpage, sometimes referred to as "jump links", to make it easy to jump to specific sections of text as is demonstrated in this guide itself. A list of links at the beginning of a page that does not include a header must only include links to sections within the same document.

A webmaster intending to include links to content outside of the current document must include a header before the list of links. A list of links cannot be provided without a header unless it only occurs at the beginning of the document and it also only includes links that jump within the same document.


Page Titles

This section is referring to the name used within the TITLE tag of the page. Page titles should be unique, descriptive and relatively short. Keep in mind that the page title is not only a description but can also be used for source keywords and it will be displayed in search results. The page title is used when saving a favorite/bookmark in a web browser.

The beginning of all page titles should begin with "TROY - " unless creating a page title for a top-level page or homepage. For example, "TROY - HR - Benefits" would be suitable for a subpage within Human Resources but for the Human Resources homepage a title of "Troy University Human Resources" would be more apporpriate.

Page titles play a role in visitors determining whether or not to click on the results displayed in search results, in addition to the content that is included in the pages.


Trojan Homepage & troy.edu Homepage

When using an icon in the Trojan website to indicate the Trojan homepage one must always use the "home" icon. When representing the troy.edu hompage one should instead only use the "globe" icon. Note that such usage is rare outside of the template.

  Trojan

  troy.edu


Contact Information

All telephone numbers must be presented using dashes and include the "1" and as well as the area code. In addition, all telephone numbers (do not include faxes) must have the link using the "tel" designation in the same format.

Example: 1-800-414-5756

<a href="tel:1-800-414-5756">1-800-414-5756</a>

Embedded Formstack Forms

Formstack forms should be embedded using the JavaScript method. Note that since jQuery is already included in the website one must use the "nojquery=1" parameter. Failure to do so with cause problems with features that rely on jQuery including proper display of the main navigation menu.


Inspect for Errors

Pages that appear to load properly in a browser may still exhibit problems behind-the-scenes. All webmasters must review pages for JavaScript, CSS and other errors. This can be done using a variety of inspetion tools available directly within most web browsers.

Typically, no JavaScript errors should be present even if the code appears to function properly. There are exceptions caused by non-critical warnings and browser compatibility issues but these are not common. Reviewing these tools can also uncover CSS errors and 404 errors that are not visible within a webpage.

All pages must be routinely scanned with a link validation tool.

Dreamweaver has a built-in spell checker. It is overly sensitive but nonetheless it can expose typos and other errors that might otherwise be missed by the webmaster and/or the content owner.


Exceptions

Styling Control

The following websites have been pre-approved to use styles that do not match the Trojan template:

  • Art & Design (all pages)
  • ePolicy (all pages)

Template Paths & Files

The following paths and files are used for the management of the Trojan template and available scripts and other features. The entire collection of assets for the new template are treated as an additional theme and thus packaged within /assets/themes/trojan in order to avoid conflict with the existing site and allow in-place updating.

Files marked in bold are used by all templates regardless of level. Items with an asterisks are actually used via CDN with local files provided as a backup.

  • /assets (location of site-wide assets)
    • /themes
      • /trojan
        • /bootstrap
          • /css
            • bootstrap-theme.css
            • bootstrap-theme.css.map
            • bootstrap-theme.min.css
            • bootstrap-theme.min.css.map
            • bootstrap.css
            • bootstrap.css.map
            • bootstrap.min.css*
            • bootstrap.min.css.map
          • /fonts
            • glyphicons-halflings-regular.eot*
            • glyphicons-halflings-regular.svg*
            • glyphicons-halflings-regular.ttf*
            • glyphicons-halflings-regular.woff*
            • glyphicons-halflings-regular.woff2*
          • /js
            • bootstrap.js
            • bootstrap.min.js*
            • npm.js
        • /css (template CSS)
          • core.css (Trojan Bootstrap customizations)
          • mediaqueries.css (Primary Trojan template media queries)
        • /fonts (CDN version of Lato and Raleways are used; provided as a backup)
        • /images (images used in the template)
        • /includes (main include files)
          • footer.htm (Trojan footer)
          • header.htm (Trojan header including text-only and search)
          • mainmenu.htm (Top-level menu a banner)
          • meta.htm (Meta information and links for jQuery inclusion and site-wide plugins)
          • styles.htm (links to include site-wide styles and fonts)
          • trojan.htm (shared menu required for all areas except top-level Trojan pages)
        • /js (JavaScripts)
          • core.js (site-wide JavaScript file)
          • jquery-2.2.3.min.js* (jQuery
          • jquery.bootstrap-autohidingnavbar.min.js (plugin for auto-hiding the main menu)
        • /svg (Vector Graphics)
          • trojan-head-white.svg
          • trojan-head.svg
          • troy-red.svg
          • troy.svg
        • /tools (reserved for future use)
  • /Templates (Dreamweaver templates folder)
    • core.dwt (top-level Trojan template)
    • department.dwt (sample area template)

#hashtags Feature

The Trojan 2.0 design provides a new "#hashtags" feature, which is used by entering a pre-defined hashtag value directly into the website search box. Hashtags were implemented to direct visitors to specific content. The feature is site-agnostic, meaning it will direct visitors to the most relevant Troy University website, regardless of whether or not the content is located within the trojan.troy.edu website.

You may test this feature by and entering the term with the hashtag symbol. Note that if you remove the hashtag (#) symbol that the box will then default to its default website search behavior.

At this time the following demonstration hashtags are available.

#blackboard
#email
#financialaid
#helpdesk
#hub
#it
#records
#register


Color Palette

#6d0017
#ded7c3
#f6eed6
#000
#555
#888
#b2b3b5
#ccc
#f5f5f5
#fff



Gradients

.grad-red
.grad-lightgray
.grad-gray
.grad-black


Standard Body Text

Standard body text is Lato with a font weight of 300. Headings are Constantia with a normal font weight.

Lorem ipsum dolor sit amet, vix impedit corrumpit dignissim ne, affert putant possim at pri, te iusto mundi blandit sea. Vis ad alia imperdiet, nam quem congue salutandi ad, quo nostrum fastidii atomorum in. At mei ignota aliquam. Unum atqui tibique per at.

Eu mel ignota invidunt, ex gubergren conceptam deterruisset sit. Minimum verterem id ius, mei no movet gloriatur. Mei eu oblique mandamus percipitur, vix ut unum nusquam. Movet voluptatibus ad sit, melius oblique prompta an eos. Timeam tibique tractatos eu mel, an sonet salutandi vulputate vel. Illum diceret luptatum nam an, te nobis aliquip theophrastus sea.

In eripuit ancillae prodesset sit, sint libris philosophia te ius. Eu duo indoctum complectitur. Ea vis nullam electram accommodare, vel ei feugait appellantur. Vis ex mucius gubergren, ad dicta philosophia sit, pro nisl ridens ut. Clita molestie assueverit eu sit, usu ea omnis voluptatibus, his ad nostro partiendo definitiones. His at equidem singulis adipisci, ad prima sadipscing qui.

Cu graece fabellas mei. Ex cum solet graeci appareat, et vis aeterno tincidunt. At odio veri sit. Nec dictas atomorum tractatos ex, falli perfecto id cum. Qui accusam repudiare ut, qui corrumpit honestatis scripserit et. Vix apeirian petentium scriptorem ei, ea autem convenire nec.

Verterem adipisci pro te, vim dicam audiam deleniti an. Eam etiam putant mollis et, ut hinc simul quidam pro. At aliquid efficiendi dissentiunt est, nisl democritum philosophia usu in. Sed esse primis explicari at, indoctum periculis ei vim, usu ad volutpat laboramus. Mel nobis possim audire ea, ius vidit dolores ad. Te vix viris oportere suscipiantur.


Standard Text at Different Sizes

This text is 1.5em. Lorem ipsum dolor sit amet, cu primis delectus delicatissimi his, lorem nulla clita ad vel, prima zril te eam. Unum harum movet ea qui. Everti invidunt constituam pro te, cu molestie pericula democritum mei, quaeque mandamus ex qui. Reque bonorum nominavi pro ut. Mea munere verear iracundia ei, quodsi vivendo ad ius, an legimus philosophia mea.

This text is 1 em and is the normal size for body copy. Quem magna consul te sea, eum adhuc ignota tibique in. Nec ne eius ponderum, ea per tamquam instructior, diceret albucius epicurei ius ea. In tempor latine bonorum ius. Qui ut vivendo principes. Eam cibo summo pertinacia ei.

This text is .75em. Nec cibo vidit commune ea, ei homero noster sit. Ceteros denique te qui, pro te fierent sadipscing, ferri iusto electram sed cu. Labores scriptorem sit id, nec magna periculis et. Tantas mentitum te vix.


This is an example of a link that is used in the main content area of the page.


H1-H5 Headings and Text Size Demos

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Unordered Lists

  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Ordered Lists

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>

In-Page Title (H1)

Department of Human Resources

<h1>Department of Human Resources</h1>

Top-Level Section Title (H2)

Benefits Information

<h2>Benefits Information</h2>

Sub-Section Title (H3)

Benefits Information

<h3>Benefits Information</h3>

Category/List Title (H4)

Electronic Forms

<h4>Electronic Forms</h4>

Sidebar Headings (H5)

Announcements
Faculty Resources
<h5>Faculty <span class="h5b">Resources</span></h5>

TROY Title

This is a TROY Title

This title may be used to call out a specific section or to simply create a new division. However, it is not recommended that it be used frequently to replace H1-H6 tags.

<div class="troytitle">This is a TROY Title</div>

Blockquote

This is a sample of a blockquote.
<blockquote>This is a sample of a blockquote.</blockquote>

Yo! Block

This is an example of a Yo! Block
This is a link within the block.
<div class="yo">This is an example of a Yo! Block<br><a href="#">This is a link within the block.</a></div>

Breadcrumbs

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Finance & Business Affairs</a></li>
<li class="active">Human Resources </li>
</ol>

Note that the homepage for an area should have one less level of breadcrumb links. In addition, when on the homepage the link for the homepage in the breadcrumbs should not be active. In order to manage this with the template the simplest action is to remove the next level link and also use JavaScript to remove the link from the link representing the homepage.

For example, if viewing the Finance and Business Affairs homepage's source code this is what should be found:

      <h2 id="bs">Breadcrumbs</h2>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Finance & Business Affairs</a></li>
<script>
$( document ).ready(function() {
$('.breadcrumb li:eq(1) a').contents().unwrap();
$('.breadcrumb li:eq(1)').addClass("active");
});
</script>
</ol>

The additional JavaScript removes the link from the Finance & Business Affairs text without affecting this link that is also used on other pages linked to the template.

Note that depending number of list items available in the breadcrumbs that the number within "li:eq(1)" may need to be modified.


Main Menu - Links to External Websites

Links in the main navigation menu that will take visitors to any site outside of trojan.troy.edu are designated using the glyphicon-new-window' glyphicon with an opacity of .4, which is set via CSS. Use of this glyphicon is only required in the main menu, it is not necessary for links in the body of a page.

Emergency Information (SOS)

<li>
	<a href="http://sos.troy.edu">Emergency Information (SOS) <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a>
</li> 

Basic Contact Information

This format is intended for displaying contact information when a photo is not provided and is not expected to be added at a later date, such as with departmental contact information.

In this example two sets of contact information are shown. Note that the .row and .col-md-6 divs are only included for alignment of the two areas and that only the div named .contact-basic and its contents are actually required.

Contents in the first div are styled as the name or title. Contents in the second div are presented as the address and contents in the third div are formatted as other methods of contact. Note that the spacing between the glyphicons and the following text is handled via CSS; no spaces need to be added manually.

Only the first example includes an e-mail address. If you do not have an address but do have contact information then simply leave the contents of the second DIV blank.

Additional content can also be added in the third DIV, after the contact information (but within the third DIV, not outside of it).

Human Resources
Troy Campus
Troy University
107 Wright Hall
Troy, AL 36082
nobody@troy.edu
Telephone: 1-334-670-3710
Fax: 1-334-670-5666
Human Resources
Montgomery Campus
Troy University
223 Whitley Hall
Montgomery, AL 36103
Telephone: 1-334-241-9581
Fax: 1-334-241-5413
 

This is an example of addition information that you might want to add.

<div class="row">
	<div class="col-md-6">	
    <div class="contact-basic">
			<div>Human Resources<br>Troy Campus</div>
			<div>Troy University<br>107 Wright Hall<br>Troy, AL 36082</div>
			<div><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:nobody@troy.edu">nobody@troy.edu</a><br>
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Telephone: <a href="tel:1-334-670-3710">1-334-670-3710</a><br>
			<span class="glyphicon glyphicon-print" aria-hidden="true"></span>Fax: 1-334-670-5666</div>
		</div>
		</div>
        <div class="col-md-6">
		<div class="contact-basic">
			<div>Human Resources<br>Montgomery Campus</div>
			<div>Troy University<br>223 Whitley Hall<br>Montgomery, AL 36103</div>
			<div><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Telephone: <a href="tel:1-334-241-9581">1-334-241-9581</a><br><span class="glyphicon glyphicon-print" aria-hidden="true"></span>Fax: 1-334-241-5413
<br>&nbsp;<p>This is an example of addition information that you might want to add.</p></div>
 		</div>	
        </div>
</div>

Contact Information with Photographs

This format is intended for displaying contact information with a photograph. It is recommended that the same style be used within a page even when not all (but some) of the contact have photos provided in order to provide a consistent layout. In such cases a generic Trojan Head graphic is recommended for use with individuals that do not have photographs. It is not recommended to mix this format with the non-photo format in the same containers.

The code is contained within a generic row and each contact information and photo is wrapped within a col-md-6 column. The contact information and photograph are also wrapped within a row using the contact-photo class.

This format is intended to be used with two contacts per row but there will be cases when only a single contact (such as the last row) is available. In this case enclose it within the same col-md-6 but simply leave off the second col-md-6 where another contact usually be placed.

Human Resources
Troy Campus
Troy University
107 Wright Hall
Troy, AL 36082
nobody@troy.edu
Telephone: 1-334-670-3710
Fax: 1-334-670-5666
Human Resources
Troy Campus
Troy University
107 Wright Hall
Troy, AL 36082
nobody@troy.edu
Telephone: 1-334-670-3710
Fax: 1-334-670-5666
      <div class="row">
<div class="col-md-6">

<div class="row contact-photo">
<div class="col-md-6"> <img src="http://placehold.it/200x200"> </div>
<div class="col-md-6">
<div>Human Resources<br>
Troy Campus</div>
<div>Troy University<br>
107 Wright Hall<br>
Troy, AL 36082</div>
<div><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:nobody@troy.edu">nobody@troy.edu</a><br>
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Telephone: <a href="tel:1-334-670-3710">1-334-670-3710</a><br>
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>Fax: 1-334-670-5666</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row contact-photo">
<div class="col-md-6"> <img src="http://placehold.it/200x200"> </div>
<div class="col-md-6">
<div>Human Resources<br>
Troy Campus</div>
<div>Troy University<br>
107 Wright Hall<br>
Troy, AL 36082</div>
<div><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:nobody@troy.edu">nobody@troy.edu</a><br>
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Telephone: <a href="tel:1-334-670-3710">1-334-670-3710</a><br>
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>Fax: 1-334-670-5666</div>
</div>
</div>
</div>
</div>

Calendar Event Listings

This format is recommended for listing events for an area's calendar, typically in a full-width format. This format was specifically developed for the Academic Calendar and the Holidays & Administrative Leave Calendar.

This example is configured to be open when a page loads. To make a section collapse by default simply remove the "in" class from the parent DIV.

 

May 23, Monday
First Official Day for Summer; Classes Begin for Term T-5 and Session A (Troy Campus only)
1st Payment Due (Troy Campus students on payment plan only)
May 26, Thursday
Last Day to Add for Session A
May 28-30, Saturday-Monday
Memorial Day Holiday Weekend
May 31, Tuesday
Last Day for Free Schedule Course Adjustments Summer Full Session, T-5 & Summer Session A (Troy Campus only)
June 1, Wednesday
Census Date for Summer Full Session, T-5 & Summer Session A (Troy Campus only)

 

      <h4><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <a data-toggle="collapse" href="#2016summer" aria-expanded="false" aria-controls="2016summer">Summer 2016</a></h4>
    <div class="events collapse in" id="2016summer">    
<div class="event">
<div class="event-date">May 23, Monday</div>
<div class="event-desc">First Official Day for Summer; Classes Begin for Term T-5 and Session A (Troy Campus only)<br>1st Payment Due (Troy Campus students on payment plan only)</div>
</div>
<div class="event">
<div class="event-date">May 26, Thursday</div>
<div class="event-desc">Last Day to Add for Session A</div>
</div>
<div class="event">
<div class="event-date">May 28-30, Saturday-Monday</div>
<div class="event-desc">Memorial Day Holiday Weekend</div>
</div>

<div class="event">
<div class="event-date">May 31, Tuesday</div>
<div class="event-desc">Last Day for Free Schedule Course Adjustments Summer Full Session, T-5 &amp; Summer Session A (Troy Campus only)</div>
</div>
<div class="event">
<div class="event-date">June 1, Wednesday</div>
<div class="event-desc">Census Date for Summer Full Session, T-5 &amp; Summer Session A (Troy Campus only)</div>
</div>
</div>

These boxes can be added individually and manually positioned or they can be added as a group to a container to align them to the middle and add a margin between then. Each image and link is customized directly in the page.

These images are not responsive but the dimensions are below the width of most screens. Each image must be exactly 200px wide and 175px high.

<div class="plcontainer">
<div class="plbox"> <a href="#"><img src="/styleguide/assets/images/200x175.jpg" alt="Placeholder Image" title="Placeholder Image">
<div><span>Link to </span><br>
Something Cool</div>
</a> </div>
<div class="plbox"> <a href="#"><img src="/styleguide/assets/images/200x175.jpg" alt="Placeholder Image" title="Placeholder Image">
<div><span>Link to another</span><br>
Cool Thing Here</div>
</a> </div>
<div class="plbox"> <a href="#"><img src="/styleguide/assets/images/200x175.jpg" alt="Placeholder Image" title="Placeholder Image">
<div><span>Another Link to</span><br>
Some Other Cool Thing</div>
</a> </div>
</div>

Slider

Modified Bootstrap Carousels are provided. The first version is restricted to a maximum width of 768 pixels to prevent background images from stretching across large screens and to provide some constraints for layout purposes.

No additional scripts or CSS is required to implement these. The demonstration code may be copied but it is suggested that you change the "carousel-trojan-demo" ID to something appropriate for the page that you will place it in. This identifier is also used to manage multiple carousels in the same page; it must be unique if using more than one carousel in a page.

Typically, additional space should be added after a carousel. The recommended method is to simply add a BR or P tag after the carousel. This was not added via CSS to provide some flexibility in the layout. More information about working with Bootstrap Carousels can be found in the Bootstrap documentation.


Alignment of the 786 pixel version is recommended to be centered via use of the margin:auto setting applied directly in the style property of the main carousel div.

            <!-- Begin Carousel768 -->
<div id="carousel-trojan-demo" class="carousel slide carousel768" data-ride="carousel" style="margin:auto;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-trojan-demo" data-slide-to="0" class="active"></li>
<li data-target="#carousel-trojan-demo" data-slide-to="1"></li>
<li data-target="#carousel-trojan-demo" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="/styleguide/assets/images/768x150.png">
<div class="carousel-caption"> This is the first slider item. </div>
</div>
<div class="item"> <img src="/styleguide/assets/images/768x150.png">
<div class="carousel-caption"> This is the second slider item. </div>
</div>
<div class="item"> <img src="/styleguide/assets/images/768x150.png">
<div class="carousel-caption"> This is the third slider item. </div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-trojan-demo" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-trojan-demo" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

<!-- End Carousel768 -->

A 400 pixel wide version is also provided with the intention for it to typically be a square and more suitable for use within multicolumn layouts.


     <!-- Begin Carousel400 -->
<div id="carousel-trojan-demo-square" class="carousel slide carousel400" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-trojan-demo-square" data-slide-to="0" class="active"></li>
<li data-target="#carousel-trojan-demo-square" data-slide-to="1"></li>
<li data-target="#carousel-trojan-demo-square" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="/styleguide/assets/images/400x400.png">
<div class="carousel-caption"> This is the first slider item. </div>
</div>
<div class="item"> <img src="/styleguide/assets/images/400x400.png">
<div class="carousel-caption"> This is the second slider item. </div>
</div>
<div class="item"> <img src="/styleguide/assets/images/400x400.png">
<div class="carousel-caption"> This is the third slider item. </div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-trojan-demo-square" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-trojan-demo-square" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<!-- End Carousel400 -->

Sample Pages

 


Known Issues

  • Navigation menus may break at different widths and cause elements to overlap a site header. These are not bugs but corrections that are best made after the navigation menus have been finalized.
  • Position of red text box in Photo Link Boxes may shift temporarily when adjusting browser width (Chrome, cause undetermined)
  • Header/menu area may appear to move up and down by 1px contiously, in some cases (cause undetermined).
  • Some elements may expand beyond their containers in mobile view (ex: announcement box with link)

Change Log

2016-10-25

Major Changes


2016-07-13

Major Changes

  • Added "skip to main content" link that is only visible when keyboard Tab is used to navigate (availability of this functionality may be dependent on browser and OS settings)

2016-07-07

Major Changes

  • Set extra page space after footer to match the footer color by changing the page background color to match. Defined background color for breadcrumb area and page content area to restore those colors after modifying page background. Method implemented to avoid need for additional JavaScript or major structural changes.
  • Embedded a version of the website/keyword search box directly in the Trojan homepage to make it immediately available on this page
  • Removed the Search tile from the homepage as it is redundant with the addition of the embedded search box
  • Added a tile for "Mobile App", which points to a page on the IT website

Minor Changes

  • Removed some introductory language from the announcement box on the Trojan homepage.

2016-07-05

Major Changes

  • Significant modification of styles in template areas including the navigation menu, banner and footer
    • Changed navbar background from red gradient to a solid gray
    • Changed navbar font to bright white
    • Changed banner background from gray gradient to a solid cardinal red
    • Changed banner font color from cardinal red to white
  • Reintroduced main "Home" link on the top-level Trojan menu
  • Removed the first row of system tile links from the Students page to pull content up; links already existed in main nav menu and considered redundant

Minor Changes

  • Corrected display issue of bulleted lists that was visible in some browsers
  • Reduced size of the links in the first row (text only, troy.edu, search and logout)
  • Removed rounded corners (border-radius) from the Announcement class
  • Removed border and background color from the breadcrumbs class

2016-06-17

Major Changes


2016-05-27

Major Changes


2016-05-23

Major Changes

  • Created new website feedback form in Formstack for Trojan including a thank you confirmation page. Pages are located at /feedback/ and are linked from the included files.
  • Created an /announcements/ folder for major announcements linked from the Trojan homepage and other pages; first announcement added

Minor Changes

  • Set Accreditation Statement, Privacy Statement, Questions and Disclaimer links to point to the troy.edu versions to avoid potential duplication and simplify management of those pages
  • Updated several links in the top-level Trojan menu to include the "new window" glyphicon

2016-05-18

Major Changes

  • Added three sample HR pages
    (homepage, forms and contact us)
  • Added sample Academic Calendar page
  • Added proposed Trojan Homepage (Hub) design/page
  • Added Current Students Homepage not final; existing content will be integrated beneath the Hub icons
  • Added “Trojan” menu (and include file) for menu item that will appear in all navigation menus outside of the top-level pages
  • Added dynamic SOS graphics/links
    (this area can also be used to display an actual message across the entire site but only in the case of a critical emergency)
  • Added floating button to scroll back to top of page
    (only appears on longer pages when the scrollbar becomes visible)
  • Added ability to use a custom photo below an area’s header title, if desired
    (see Departmental or Current Students samples)
  • Directory Search and Website Search are functional
    (website search displays results from live Trojan website)

Minor Changes

  • Added additional gradients
  • Removed prompt from top troy.edu link in header
  • Added gradient to footer background
  • Added JavaScript for breadcrumbs to disable the template-protected link for an area’s top-level page
    (only needed in homepages)
  • Added additional borders above and below sections of the main header/banner areas
  • Converted TROY logos from JPG/PNG to SVG (vector graphics)
  • Added support via HTML comments to easily switch between locally-host resources and CDN-hosted resources
  • Disabled use of Bootstrap CDN resources to delayed loading times; using local files instead
  • Added all necessary Web font files and required CSS √¶to the local site structure just in case the Google Fonts CDN fails
  • Changed to a heavier font weight in the navigation menus; 300 appeared too light in Safari
  • Set .announcement to a width of 75% for desktop and 100% at mobile/tablet sizes

New Best Practices and Style Guide Sections

  • HTML5 Prohibited Tags, Tables
  • Internal Links (Same Page)
  • Trojan Homepage & troy.edu Homepage
  • Contact Information
  • Exceptions Styling Control
  • Template Paths & Files
  • Main Menu Links to External Websites
  • Basic Contact Information
  • Calendar Event Listings
  • Photo Link Boxes
  • Change Log