Style Guide for Developers

Welcome to the Style Guide for developers of apps in the innovate space. This document will help you design your web application in a style reasonably conformant with other Directgov | innovate apps. It is not strictly required that apps for inclusion in the innovate space comply stylistically in every particular with the Directgov | innovate site, or with other innovate apps. But a certain degree of visual conformity is helpful and we do ask for your cooperation.

Overview

It will be noted that the innovate site looks very little like the main Directgov site. This visual distinction is intentional. Whereas Directgov provides comprehensive and accessible central government information and services for the widest possible citizen audience, innovate is an innovative, collaborative, and open-source environment for Government and developers to interact, share new ideas, and showcase work.

home page of Directgov

The visual design for apps on innovate is minimal, consisting of a top banner with logo and site links; and a bottom footer with site links and a reversed Directgov logo. This "frame" can be applied using the details below.

Headers and Footers

Foremostly, we'd like innovate apps to be wrapped in the "innovate frame". This simply consists of standard headers and footers as you see them on this page. The content for these headers and footers is available as include files at:

There are four ways (that we can think of) of including the header and footer in your pages. Any of them are fine by us.

  1. Include them using PHP's include function. (Your app, obviously, has to be on our server for this to work.)
  2. Include them as Apache server side includes (SSI or xSSI). (Ditto.)
  3. Retrieve them dynamically across the Internet and include them in your documents with the scripting technology of your choice.
  4. Grab them, pull out the content, and put them at the tops and bottoms of your pages (or save them locally and include them programatically).

Stylesheets

For the header and footer to style appropriately (or, really, at all) you will need to include the following stylesheet in your pages:

With this in the head of your docs, your headers and footers will automagically style correctly. Additionally, this stylesheet contains styles for link colours and section headings (H1s, H2s, and H3s). If you would like your apps to partake of these styles – and we hope, though do not require, that you will – simply wrap a div with the id of content around everything on your page (i.e. everything inside the body tag). This will cause your links and headings to style.

We also have some additional helper styles, which we find useful across the sites. Feel free to implement these, too, if you find them useful.

With both of these stylesheets, you may link directly to the files on this server; or download your own copies, modifying them if and as necessary.

Icon file

You may want to use your own custom icon file (which appears in the location bar, tabs, and bookmarks). Or you're welcome to use ours:

Other Styles

Obviously, we understand that you will need some styling unique to your app. You're welcome to include a global header or banner beneath the innovate header. And feel free to develop whatever body styles are necessary for the proper functioning and attractive appearance of your app.

We encourage you to do what's best and necessary – while trusting that you won't end up with something that clashes. We're happy to work with you on this.

If you have any questions at all, or concerns, about these style guidelines, contact us any time on innovate.direct@directgov.gsi.gov.uk.

As a developer of innovate apps, you will also want to review our innovate Apps Technical & Quality Standards.