HighFive Design System

Quick Setup

Trying to get up and rolling quickly on your project or app? Below you find our CSS/JS we use on all websites.

CSS

Copy and paste the stylesheets into your <head> before all other stylesheets to load our CSS.

HTML

<link rel="stylesheet" media="all" href="https://cdn01.its.msstate.edu/i/fonts/msu-bulldog/msu_bulldog-webfont.css" />
<link rel="stylesheet" media="all" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" />
<link rel="stylesheet" media="all" href="https://cdn01.its.msstate.edu/e/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" media="all" href="https://cdn01.its.msstate.edu/i/msstatehighfive/2.1/css/msstatehighfive.min.css" />

JS

Much our website runs on Bootstraps javascript and some of our custom javascript. Add the following JS to the bottom of the page before the closing </body>.

HTML

<script src="https://cdn01.its.msstate.edu/i/emergency/1.6/hazard.js"></script>
<script src="https://cdn01.its.msstate.edu/e/jquery/3.6.0/jquery-3.6.0.min.js"></script>
<script src="https://cdn01.its.msstate.edu/e/popper/2.9.2/popper.min.js"></script>
<script src="https://cdn01.its.msstate.edu/e/bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn01.its.msstate.edu/e/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>
<script src="https://cdn01.its.msstate.edu/i/msstatehighfive/2.1/js/msstatehighfive.min.js"></script>
Getting Started

Setup: Starter Template

You can use the following as a starting place.

HTML

<!doctype html>
<html lang="en">
	<head>

		<meta charset="utf-8">

		<title>Starter Templates</title>

		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="author" content="Your Name/Department" />

		<link rel="stylesheet" media="all" href="https://cdn01.its.msstate.edu/i/fonts/msu-bulldog/msu_bulldog-webfont.css" />
		<link rel="stylesheet" media="all" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" />
		<link rel="stylesheet" media="all" href="https://cdn01.its.msstate.edu/e/font-awesome/6.5.1/css/all.min.css" />
		<link rel="stylesheet" media="all" href="https://cdn01.its.msstate.edu/i/msstatehighfive/2.1/css/msstatehighfive.min.css" />

	</head>
	<body>

		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-8">

					<h1>Starter Templates</h1>

				</div>
			</div>
		</div>
		<!-- /.container-fluid -->

		<script src="https://cdn01.its.msstate.edu/i/emergency/1.6/hazard.js"></script>
		<script src="https://cdn01.its.msstate.edu/e/jquery/3.6.0/jquery-3.6.0.min.js"></script>
		<script src="https://cdn01.its.msstate.edu/e/popper/2.9.2/popper.min.js"></script>
		<script src="https://cdn01.its.msstate.edu/e/bootstrap/5.1.0/js/bootstrap.min.js"></script>
		<script src="https://cdn01.its.msstate.edu/e/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>
		<script src="https://cdn01.its.msstate.edu/i/msstatehighfive/2.1/js/msstatehighfive.min.js"></script>

	</body>
</html>