UNH HTML Toolkit Introduction.

The UNH Toolkit is built upon the Bootstrap v3.2.0. Additional documentation related to Bootstrap can be found here: getbootstrap.com


Toolkit Version 4.1

How to use the HTML toolkit

The UNH HTML Toolkit is provided as is to University Faculty, Staff and Students for the creation of websites.

  1. Download the Toolkit
  2. Unzip the Toolkit
  3. Upload to the Web Server*
  4. Configure

* Faculty, Staff and Students can host pages using their Pubpages account. Faculty and Staff can also host their sites on UNHINFO. Request UNHINFO access.

UNH Logo

In an effort to support, extend and maintain UNH brand standards, the UNH HTML toolkit is intended to help you create a static HTML website in keeping with the UNH graphic identity.

For further information view the Graphic Identity and Logo Information

Web Standards and Visual Identity Guidelines

Below are examples of how the UNH Web Standards and Visual Identity is implement by the UNH HTML Toolkit. View the complete Web Standards and Visual Identity Guidelines

Topography

For your convenience, here are some typography examples and associated source code references. CSS styles adhere to UNH typography standards.

Header Level 1 36px | #003591


Header Level 2 30px | #003591


Header Level 3 24px | #de6e04


Header Level 4 18px | #de6e04


Header Level 5 14px | #999

Header Level 6 12px | #222

Lead text. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.


Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.


Small Text

Text Well

Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


Primary Well

Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


Secondary Well

Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat.

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

UNH Color Palette

The following colors are part of the approved color palette. For more information please refer to the Web Standards and Visual Identity Guidelines.

UNH Blue
#003591
#f77a05
#263645
#a3a9ac
#d7d1c4
#ffffff
#000000

Examples

Below are some sample commonly used page elements you may choose to use on your website, include:


Accordion

http://getbootstrap.com/javascript/#collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Tables

http://getbootstrap.com/css/#tables

ADA Note: Make sure to add a 'title' attribute to your table.
Name Class Grade
Jim Senior A
Samantha Junior B
John Senior B
Pooja Sophomore D
Dave Senior F

Buttons

Slideshow

http://getbootstrap.com/javascript/#carousel

ADA Note: Slideshows are generally NOT ADA compliant and should not be used to display mission critical data.

Schedule

September 1
Registration Starts.
Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus.
September 23
Registration Ends.
Pellentesque in ipsum id orci porta dapibus.
Classes Start.
Pellentesque in ipsum id orci porta dapibus.

December 5
Exams.
Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit.