RBL

Royal British Legion Boilerplate

Styles, scripts and modules for front end development

this is the master branch

This boilerplate is to be used by all parties developing RBL branded websites for or with the Royal British Legion. Navigation, fonts, forms, buttons and modules are all defined with simple markup, alongside the use of a Boostrap grid system. This allows all Royal British Legion branded websites to have consistent UI and design traits throughout.

Usage

To apply this boilerplate to your project, simply copy and paste the following code into the appropriate points in your markup:

<link rel="stylesheet" href="//rbl-boilerplate.bpl-dev.com/dist/css/boilerplate.min.css">
<script src="//rbl-boilerplate.bpl-dev.com/dist/js/boilerplate.min.js"></script>

It is recommended that you include the above files before your own custom scripts and css.

note: do not copy and/or edit these files - they must be linked to directly, as they will be periodically updated to preserve brand identity across all RBL websites.

Navigation

  • 'Royal British Legion' link must always be retained.
  • 'Parent page' button is optional, depending on context. text should be the title of the parent page.
  • 'Contact' link may be changed.
  • 'Find us', 'Poppy Shop' and 'Donate' must always be retained.
Back end/template logic must be written to display navigation items correctly, for example: '<i class="has-children"></i>' must only show if the respective nav item is a parent, <ul class="sub-nav"> should exist within <li class="nav-item"> if the respective page has children, and to aid with the positioning of the sub-nav menu, if the current page is using the 'parent page' button, a class of 'previous' must be applied to all instances of:<ul class="sub-nav">

Footer

The footer section, including 'Follow the Legion' section, LIVE ON branding, 'Join the Legion' button and copyright info must be consistent across all sites. The footer navigation and address may be amended as contextually required.

Bootstrap Grid

This boilerplate uses a Bootstrap 3 grid system, with some small alterations. It is advised that you use 'container-fluid' instead of 'container' in all use cases.

Form elements

Submit
CTA button

Grid elements

text Grid item link
text Grid item link
text Grid item link

Grid elements with date

text Monday, 11 April 2016 Dated grid item link
text Monday, 11 April 2016 Dated grid item link
text Monday, 11 April 2016 Dated grid item link

TABLE

Column 1 Column 2 Column 3
Row 1 Row 1 Row 1
Row 2 Row 2 Row 2