[Deprecated] Styles, scripts and templates for building GOV.UK backend admin apps
NOTE: This project is deprecated. New GOV.UK admin applications should be built using the layout component in govuk_publishing_components. Projects outside of GDS can use the GOV.UK Design System directly to build interfaces.
Styles, scripts and templates wrapped up in a gem for getting up and running with Bootstrap 3.4 based backend admin apps.
This gem provides (via a Rails engine):
- An admin layout with header and footer
- Admin design patterns available from
/style-guide(when routes are mounted)
- CSS helpers and SASS variables for the admin theme
- GOV.UK user friendly date formats
- Google Analytics tracking code (Universal Analytics), using the “GOV.UK apps” profile
Apps using this gem include:
- Collections publisher
- Search admin
- Sign on
- Service manual publisher
- Specialist publisher
- Travel advice publisher
Firstly, include the gem in your Gemfile, pinned to the appropriate version and run
# Gemfile gem 'govuk_admin_template', '~> 6.8'
At the top of
application.scss include the styles (this provides all the mixins and variables from the gem as well as from bootstrap — bootstrap mixins):
/* application.scss / @import 'govuk_admin_template';
application.html.erb after any content blocks you want to include, render the base template:
# views/layouts/application.html.rb <%= render template: 'layouts/govuk_admin_template' %>
The base template includes:
- Mobile friendly viewport
- IE HTML5 and respondjs shims, and HTML classes
- header HTML
- footer HTML
jquery_ujs are already imported by
so you should remove them from your
cause your jasmine tests to fail, so you’ll need to include
spec/support/jasmine-browser.json like this:
"srcFiles": [ "govuk-admin-template-.js", "application-*.js" ]
It is recommended that the style guide is also made available within your app at the route
/style-guide. Add this to your
# config/routes.rb if Rails.env.development? mount GovukAdminTemplate::Engine, at: "/style-guide" end
The gem source includes a dummy app configured to behave like an app using the gem. If you have the gem checked out it can be run from the
spec/dummy directory using
You can configure the gem with a config block in an initializer:
# config/initializers/govuk_admin_template.rb GovukAdminTemplate.configure do |c| c.app_title = "My Publisher" c.show_flash = true c.show_signout = true c.disable_google_analytics = false end
Some GOV.UK admin apps use the Simple
Form library for writing form
markup. This repo contains a recommended configuration in
To use this configuration:
simple_formto your Gemfile.
- Add an initializer in
config/initializers/simple_form.rbcontaining the following:
SimpleForm.setup do |config| GovukAdminTemplate.setup_simple_form(config) end
This gem also provides an i18n file in
This removes the need for this file to be present in the host project unless
specific customisations are required.
The gem uses nested layouts for customisation.
||Name of your admin application|
||Path to the home page of your application, defaults to
||HTML to include in the
||A set of HTML list items (
||Text to the right of the nav bar. Logged in user, sign out link, etc|
||Footer content before copyright text|
||Text indicating the release, eg commit SHA|
||Just after the
||Just before the
||Expand content to edges of screen.|
||Custom navbar content, overrides default navbar|
# views/layouts/application.html.rb <% content_for :navbar_items do %> <li> <a href="#">navbar_item</a> </li> <% end %>
# 1 January 2013 date.to_fs(:govuk_date)
1:15pm, 1 January 2013
1 Jan 2013
1:15pm, 1 Jan 2013
The gem includes default styles for development, integration and production. This includes a coloured environment label, a coloured strip beneath the main navigation and a coloured favicon. They are based on two variables that are set at deploy time (if they aren’t set no indicator will be shown).
The following should be set within an initializer:
# used for the classname and favicon GovukAdminTemplate.environment_style = [integration|production|development]
used for the human readable label
GovukAdminTemplate.environment_label = [Integration|Staging|Production|Development]
Turn on flash messages in the config:
# config/initializers/govuk_admin_template.rb GovukAdminTemplate.configure do |c| c.show_flash = true end
Use like this:
# app/controllers/my_controller.rb class MyController < ApplicationController def create if thing.save flash[:success] = "Your thing has been created!" else flash[:danger] = "Sorry, it did not work." end
You can register your types to allow them to be used as arguments
# app/controllers/application_controller.rb class ApplicationController < ActionController::Base add_flash_types :success, :info, :warning, :danger end
Now this works:
redirect_to :back, success: "Well done!" redirect_to :back, danger: "This didn't work."
- Clone the repository
The source files are in the app directory. Unlike other GOVUK frontend gems, there is no compile step. The app directory is included in the gem and hooked in as a Rails engine.
While developing it may be helpful to see how the gem will render. The dummy app at spec/dummy is configured to act like an application using the gem and can be started from that directory using
rails s. Changes will show immediately. The tests also run against this app.
The dummy app’s rake tasks have been loaded into the gem’s task list under the namespace
app for convenience – e.g.
bundle exec rake app:assets:precompile
The default rake task runs all tests:
bundle exec rake
Layout and nested layouts are tested using RSpec and Capybara:
bundle exec rake spec
# browser yarn run jasmine:browser
yarn run jasmine:ci
Testing against different Rails versions
The CI pipeline is configured to test this gem against multiple versions of Rails.
It’s also possible to run tests against multiple Rails versions locally.
Xis the version to test against. This tells Bundler which Gemfile to use.
bundle installand then
bundle exec rakeas usual.
Version bumps will automatically update RubyGems.org.