Header & Footer

Description

The <h1#header> entity forms a top bar that spans full width across the top of mobile pages in the framework. This top bar includes a gradient, using -moz and -webkit style attributes when possible, otherwise reverting to a solid color similar to the intended gradient.

The <div#footer> entity represents a full width bar that spans the bottom of mobile pages in the framework. This bottom bar is a vertical region distinct from the main body.

Intent

These entities are intended to be used on every page of an MWF-supported application. They create a unified feel between all pages. The <h1#header> provides a stylistic bar atop all pages, along with a back button to link all other pages back to the landing page. Meanwhile, the code><div#footer> includes a Copyright notice, a Help link, and a View Full Site link. Neither element is required on any page, but both are recommended.

Header

Replace {MODULE_TITLE} with a particular module's title. Replace {MOBILE_DOMAIN} with a particular University's mobile domain name.

<h1 id="header">
    <a href="http://{MOBILE_DOMAIN}"> 
        <img src="http://{MOBILE_DOMAIN}/assets/img/{LOGO_IMG}" alt="{ALT_TAG}" width="75" height="35">
    </a> 
    <span>{MODULE_TITLE}</span> 
</h1>

There are no variations of this style. It is intended to be universal between pages.

Footer

<div id="footer"> 
    <p>University of California &copy; 2011 UC Regents<br> 
    <a href="http://{MOBILE_DOMAIN}/help">Help</a> | <a href="http://{FULL_SITE_DOMAIN}">View Full Site</a></p> 
</div>

There are no variations of this style. It is intended to be universal between pages. However, a specific implementation may modify the text within the element if so desired.