DC.Gov Remote User Interface

Latest Release

Download latest remoteUI.zip zip icon
last updated: 9/20/2014

Quick links

Live Header URL
Live Footer URL
Live Footer URL (NO Javascript or CSS)
Use this link if you're already calling js and css in the header.
This new version of the remote ui is now responsive to help meet the demand for mobile friendly websites and applications.

Modifying the Remote UI Header Title and Website link

If you want to use the default values of "The District of Columbia" for the Title and "http://dc.gov" for the Website link there are no changes necessary. However if you would like to use custom values for the header title and website link, there is a simple change to the url required.

Using Custom values for Title and Website Link

If you would like to use custom values for the Title and Website link, you must modify the url by adding two parameters.

Example

Add the 'agency' and 'siteRef' parameters to your url. Your final url should look something like:
http//rui.dc.gov/rui/header.php?agency=Department of Motor Vehicles&siteRef=http://dmv.dc.gov

Centering Header Elements

If you would like to center the header elements you cad add the parameter 'uicenter=1' to the url.
http://rui.dc.gov/rui/header.php?uicenter=1

Using Navigation

If you would like to use the standard DC.gov navigation links or your own custom application links, there are a few things you need to be aware of. The main navigation for the Remote UI is cloned using jQuery and becomes the mobile menu. Your menu can be DC.Gov's default menu or your own custom menu. Whichever method you choose, a particular html markup must be followed. The markup example can found in the "Custom Navigation" section below or by viewing the source code. Both examples are currently being used on this page (see "Menu" link above.)

Main DC.Gov Navigation

Below is the main top navigation for the DC.gov homepage. These links can be useful for applications who would like to use DC.gov's navigation. These links will be kept up to date by the maintainers of this User Interface.

Custom Navigation

The menu that is displayed for mobile version can be the default DC.Gov menu or your own custom links. To use your own custom navigation instead of DC.gov's, your html markup must follow the markup in the example below:
		<div class="dcrui-main-nav">
			<ul class="menu-sub">
				<li class="expanded"><a href="#">Main Link 1</a>
					<ul class="menu-sub" style="display:none;">
						<li class="expanded"><a href="#">Main Link 1 Sub-Menu</a></li>
					</ul>
				</li>
				<li class="expanded"><a href="#">Main Link 2</a>
					<ul class="menu-sub" style="display:none;">
						<li class="expanded"><a href="#">Main Link 1 Sub-Menu</a></li>
					</ul>
				</li>
			<ul>
		</div>