DC.Gov Remote User Interface
Latest ReleaseDownload latest remoteUI.zip
last updated: 9/20/2014
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.
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.
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 NavigationBelow 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.
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>