UARK Bootstrap Framework and Guidelines

Updated 2013.09.26

Based on Twitter Bootstrap v3.1.1.

Rationale

University of Arkansas Web developers are encouraged to use the UARK Bootstrap Framework for online applications and forms that include authentication. The Bootstrap CSS library offers straight-forward design tools, including basic styling with minimal effort and easy access to advanced styling features.

Implementation of the UARK Bootstrap Framework creates a consistent user experience that fosters trust in the university's online applications. Providing a quality user experience also supports the expectation of academic quality associated with the state’s flagship institution.

Quick Start

  1. Download the customized Bootstrap library: latest.zip

  2. Link the CSS:

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/uarkbootstrap.css" rel="stylesheet">
  3. Optional Link JQuery and the Bootstrap Javascript libraries:

    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
  4. Use the UARK header and departmental footer.

  5. Use Bootstrap class names. Of particular note are form-horizontal btn btn-default alert label *-warning *-danger *-success *-primary.

Bootstrap Documentation

See the original Bootstrap Docs.

University of Arkansas Branded Header

<div id="skip">
	<a href="#content">Skip navigation</a>
</div>
<div class="uark-branding">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-sm-push-6">
				<a href="http://www.uark.edu/"
				class="uark-logo">University of Arkansas</a>
			</div>
			<div class="col-sm-6 col-sm-pull-6">
				<a class="branding-dept navbar-text"
				href="http://dept.uark.edu">Department Name</a>
			</div>
		</div>

	</div>
</div>
<nav class="navbar navbar-static-top navbar-inverse"
	role="navigation">
<div class="container">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle"
		data-toggle="collapse" data-target=".navbar-ex1-collapse">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="CHANGE_ME">Application Name</a>
	</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse navbar-ex1-collapse hidden-print">
	<ul class="nav navbar-nav">
	  <li ><a href="#">Nav Link 1</a></li>
	</ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

User Menu

After the user has logged in, replace the Log in link with a user-centric dropdown. The first section is intended for in-application links, the second for university links (PASSweb, AskIT, etc.). If the application supports it, include a Log out link as the last item. See also: Single Sign On.

<ul class="nav navbar-nav navbar-right navbar-inverse">
<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			username <b class="caret"></b>
		 </a>
		<ul class="dropdown-menu">
			<li><a href="#admin" title="Admin">Admin</a></li>					<li class="divider"></li>
			<li><a href="http://password.uark.edu/">Password Manager</a></li>
			<li><a href="http://askit.uark.edu/">AskIT</a></li>

			<li class="divider"></li>
			<li><a href="#logout">Log out</a></li>
		</ul>
	</li>
</ul>

Department-specific Footer

The IT Services footer is shown below. Replace with department-specific information. Generally, the footer will be placed within your top-level <div class="container"> </div>.

<hr>
<footer id="footer" class="row">
	<div class="footer-col col-xs-6 col-md-3">
		<h4>IT Services</h4>
		<ul class="list-unstyled">
			<li>479-575-2901</li>
			<li><a href="http://its.uark.edu/who_we_are.html">
				Mailing Address
			</a></li>
			<li><a href="http://its.uark.edu/">its.uark.edu</a></li>
		</ul>
	</div>

	<div class="footer-col col-xs-6 col-md-3">
		<h4>Help Desk</h4>
		<ul class="list-unstyled">
		<li>479-575-2905</li>
		<li><a href="http://its.uark.edu/help_desk#hours">Hours</a></li>
		<li><a href="http://its.uark.edu/help_desk#report">
			Report an Outage
		</a></li>
		<li><a href="http://askit.uark.edu/">AskIT Online Help</a></li>
		</ul>
	</div>


	<div class="footer-col col-xs-6 col-md-3">
		<h4>Links</h4>
		<ul class="list-unstyled">
		<li><a href="http://password.uark.edu/">Password Manager</a></li>
		<li><a href="http://techarticles.uark.edu/">Tech Articles</a></li>
		<li><a href="http://its.uark.edu/alert_calendar">Alert Calendar</a></li>
		<li><a href="http://its.uark.edu/news">News Archive</a></li>
		</ul>
	</div>

	<div class="footer-col col-xs-6 col-md-3">
		<h4>Updates</h4>
		<ul class="list-unstyled">
		<li><a class="icn-facebook" href="http://www.facebook.com/uarkITS">
			Facebook
		</a></li>
		<li><a class="icn-twitter" href="http://twitter.com/uaits">
			Twitter
		</a></li>
		</ul>
	</div>
</footer>

Coding Guidelines

Forms

Follow the Style Guides for University Online Forms.

Single Sign On (Shibboleth and InCommon)

New applications should use Shibboleth or a Single Sign On provider (do not use LDAP or AD directly). Contact the IT Services Security team at security@uark.edu for details.