Information Technology Services University of Arkansas
UARK Bootstrap

Deprecated

As of September 26, 2013, UARK Bootstrap v1.4 should not be used for new development. Use UARK Bootstrap v3.0 instead.

UARK Bootstrap Framework and Guidelines
Updated 2012.03.12

Based on Twitter Bootstrap v1.4.0. Local Docs.

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 UARK Bootstrap library: latest.zip
    Or from the git repository: git clone http://vc.uark.edu/UARKbootstrap.git

  2. Link the CSS:

    <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/uarkbootstrap.css" rel="stylesheet">

  3. Optional Link the Javascript.
    The current incarnation requires Javascript for dropdowns in the top navigation bar. This is on the list to fix (for accessiblity).

    <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>

  4. Use the UARK header and departmental footer.

  5. Use Bootstrap class names. Of particular note are form-stacked btn alert-message block-message label warning danger success primary important. See the Local Docs for more examples.

Layouts

Fixed Layout

The default and simple 940px-wide, centered layout provided by a single <div class="container">.

<body>
  <div class="container">
    ...
    <!-- place footer code here -->
  </div>
</body>

If your page is text-heavy, use the following structure:

<body>
  <div class="container">
    <div class="span12">
    <!-- Narrows the page -->
      <div class="content">
      <!-- Adds padding to the viewport -->
        ...
      </div>
    </div>
    <!-- place footer code here -->
  </div>
</body>

Fluid Layout

A flexible, fluid page structure with min- and max-widths and a left-hand sidebar.

<body>

  <div class="container-fluid">
    <div class="sidebar">
      ...
    </div>
    <div class="content">
      ...
    <!-- place footer code here -->
    </div>

  </div>
</body>

University of Arkansas Branded Header

<div class="topbar">
  <div class="topbar-branding">
    <div class="container-fluid">
      <a class="branding-dept brand"
       href="{department url}">
        {Department Name}
      </a>
      <a href="http://www.uark.edu/"
       class="branding-uark pull-right">
        University of Arkansas
      </a>
    </div>
  </div>
  <div class="topbar-inner">
    <div class="container-fluid">
      <a class="brand" href="#">{Application Name}</a>
      <ul class="nav" data-dropdown="dropdown">
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      </ul>
      <p class="pull-right"><a href="#">Log in</a></p>
    </div>
  </div>
</div>

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: Login Strategies.

<ul class="nav secondary-nav">
  <li class="dropdown">
    <a href="{logout action}" class="dropdown-toggle">{username}</a>
    <ul class="dropdown-menu">
      <li><a href="{link}">{Link 1}</a></li>
      <li><a href="{link}">{Link 2}</a></li>
      <li><a href="{link}">{Link 3}</a></li>
      <li><a href="{link}">{Link 4}</a></li>
      <li class="divider"></li>
      <li><a href="http://passweb.uark.edu/">PASSweb</a></li>
      <li><a href="http://askit.uark.edu/">AskIT</a></li>
      <li class="divider"></li>
      <li><a href="{logout action}">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>.

<footer id="footer" class="row">
  <div class="footer-col span3">
    <h4>IT Services</h4>
    <ul class="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 span3">
    <h4>Help Desk</h4>
    <ul class="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 span3">
    <h4>Links</h4>
    <ul class="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 span2 last">
    <h4>Updates</h4>
    <ul class="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

To more easily follow the Style Guides for University Online Forms, add a class of form-stacked to all form tags. See ID Request Example and ID Request with errors.

Login Strategies

InCommon

Documentation to come, contact the IT Services Security team at security@uark.edu for details.

LDAP and Active Directory

For applications using LDAP or Active Directory for authentication, use the following code for your login form. Place this code in the main content area. See Login Example.

<h1>Log into {Application Name}</h1>

<form class="form-stacked" id="loginForm" action="{form action}" method="post">
  <p>
    <label for="uark_id">UARK username</label>
    <input type="text" name="uark_id" id="uark_id" autofocus />
  </p>
  <p>
    <label for="password">Password</label>
    <input id="password" type="password" name="password" value=""/>
  </p>
  <p>
    <input class="btn" type="submit" value="Log in" id="loginButton" />
  </p>
</form>

Bootstrap Documentation

See the original Bootstrap Docs.

Known Issues

  1. Navigation dropdowns require Javascript.

  2. IT Services is standardizing on version 1.4.0 of Twitter Bootstrap (9dcc16fa8c). Version 2.0 is not a directly-compatible upgrade, changing many class names and relying on much more Javascript. Version 1.4 is simpler and more suited to the purposes of university applications.

Examples