Future Media Standards & Guidelines

Using Barlesque to Develop bbc.co.uk Websites v1.2

Navigate on this page:

  1. Document Purpose
  2. What Is Barlesque?
  3. When to Use Barlesque
  4. The Overall Document
  5. Using XHTML
  6. Namespacing
  7. Document Head
  8. Using CSS in the Barlesque Templates
  9. Using JavaScript in the Barlesque Templates
  10. Content
  11. Appendix A: Example Barlesque.shtml Page
  12. Document History and Contacts

1. Document Purpose

1.1 This document describes how to use the Barlesque template to develop bbc.co.uk websites.

1.2 It explains what you can modify in the template, and those elements that you MUST NOT change.

1.3 If you are using the Barlesque template you MUST follow this standard.

Top of page

2. What Is Barlesque?

2.1 Barlesque is the name of the new page layout template to use when developing all new bbc.co.uk web pages.

2.2 The Barlesque template applies global elements to a page which are centrally controlled (e.g. the header and footer) and sets up global bbc.co.uk products (for example Identity, Dotcom, the Survey etc.).

2.3 It supersedes the Barley page templates.

3. When to Use Barlesque

3.1 You MUST use the Barlesque template when developing new, or redeveloping existing, bbc.co.uk websites.

4. The Overall Document

4.1 For an example of a default Siemens stack Barlesque page (index.shtml) see Appendix A below.

4.2 When implementing Barlesque you MUST follow the Barlesque implementation documentation. This includes a suite of test pages covering all configuration options.

Top of page

5. Using XHTML

5.1 XHTML in Barlesque pages MUST conform to the XHTML Integrity Standard.

5.2 Barlesque pages MUST use the XHTML 1.0 Strict or XHMTL+RDFA 1.0 doctype.

Top of page

6. Namespacing

6.1 The XSSI, CSS and JavaScript used in Barlesque is all namespaced "blq".

6.2 You MUST NOT use this namespacing for non-Barlesque reasons.

6.3 You MUST NOT redefine any of the namespaced values, except as described in the Barlesque implementation documentation (see section 4.2 above for details). This is to ensure that you don't overwrite any template styling that could be affected by future template updates. For example:

6.3.1 You MUST NOT define an SSI variable blq_foo.

6.3.2 You MUST NOT change the #blq-masthead CSS definition.

6.3.3 You MAY add styles to #blq-main.

Top of page

7. Document Head

7.1 You MAY override the existing link elements supplied by Barlesque (for example, the favicon) by redeclaring them after the inclusion of the Barlesque head include in the document head, when using the Siemens platform, or the webservice (e.g. when using Barlesque on sites hosted off bbc.co.uk). The Forge platform interface provides specific methods for doing this.

7.2 You MAY use additional link elements in the document head, again after the head include.

7.3 You MUST follow the BBC Metadata Standard.

Top of page

8. Using CSS in the Barlesque Templates

8.1 CSS in Barlesque pages MUST conform to the Cascading Style Sheets Standard.

8.2 Any conditional comments MUST be limited to the browser(s) in which the content has been tested. For example you MUST NOT use <!--[if IE]>, but you MAY use <!--[if lte IE 6]>.

8.3 You MUST write your styling information respectfully of Barlesque's blq namespaced elements (see section 6.3 above); that is, make sure you do not set global styles that affect the Barlesque page elements except as defined in the implementation documentation (see section 4.2 above for details).

Top of page

9. Using JavaScript in the Barlesque Templates

9.1 JavaScript in Barlesque pages MUST conform to the JavaScript Standard.

9.2 Pages built using Barlesque MUST NOT produce any JavaScript errors in any of the level 1 or 2 supported browsers, as specified in the Browser Support Standard, and SHOULD NOT produce any warnings.

Top of page

10. Content

10.1 Content in Barlesque pages MUST follow the Semantic Mark-up Guidelines and each of the Accessibility Standards. This is because there are features in Barlesque that rely on adherence to these standards.

10.2 On the Siemens platform, or when using the webservice, markup MUST NOT be placed before the first barlesque include in the <body>, or after the last <body> include, with the exception of <script> tags which MAY be placed at the bottom of the page.

10.3 If your page has local navigation, it MUST be contained in an element with the ID blq-local-nav.

10.4 The main unique content of your page MUST be contained in an element with the ID #blq-content; for example, the text of a news article or the biography on a character page.

10.5 "Skip to top" links MUST link to #page-top for consistency. This anchor is provided by Barlesque.

Top of page

11. Appendix A: Example Barlesque.shtml Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB"> 

<head profile="http://dublincore.org/documents/dcq-html/">
<title>BBC - Barlesque - Test Page</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="description" content="" /> 

<meta name="keywords" content="" /> 
<link rel="schema.dcterms" href="http://purl.org/dc/terms/" /> 
<meta name="DCTERMS.created" content="2006-09-15T12:00:00Z" /> 
<meta name="DCTERMS.modified" content="2006-09-15T12:35:00Z" />
<!--#include virtual="include/test_site.sssi" --> <!--#include virtual="/includes/blq/include/blq_head.sssi" -->
<!-- NOTE Example style and script tags - Please use or delete as appropriate -->

<!-- NOTE Stylesheets MUST be included after the blq-head include due to the reset CSS technique included in Barlesque --> <!--[if IE]><![if gte IE 6]><![endif]--> <style type="text/css" media="screen">@import 'style/example.css';</style> <!--[if IE]><![endif]><![endif]--> <script type="text/javascript" src="script/example.js"></script>

</head>
<body>
<!--#include virtual="/includes/blq/include/blq_body_first.sssi" -->
<!-- NOTE All of the following content is contained in a div id="blq-main"-->
<!-- NOTE Barlesque does not use the H1. This MUST be put in by the site developer --> <h1>Barlesque Test Page</h1>
<!-- NOTE Site local navigation MUST always be id="blq_local_nav" --> <div id="blq-local-nav">

<!-- NOTE class="blq-hide" can be used to remove items from the screen, but leave them available to screenreaders -->
<h2 class="blq-hide">Local Navigation</h2>
<ul>
<li><a href="#">Nav item 1</a></li>
<li><a href="#">Nav item 2</a></li>

<li><a href="#">Nav item 3</a></li>
<li><a href="#">Nav item 4</a></li>
</ul>
</div>
<!-- NOTE #blq-content MUST be used on every page to contain the main page content as it is linked to by Barlesque's "Skip to content" link --> <div id="blq-content" class="blq-typ"><!-- Standard typography from the optional CSS framework applied -->

<!-- NOTE Skip to top links MUST always be href="#page-top" --> <p><a href="#page-top">Skip to top</a></p>
</div>
<!--#include virtual="/includes/blq/include/blq_body_last.sssi" --> </body> </html>
*******

Top of page

12. Document History and Contacts

XHMTL+RDFA 1.0 doctype
DateVersionChangeAuthor
18/08/2010 v1.2 Change to clause 5.2 to allow use of the XHMTL+RDFA 1.0 doctype. Ed Lee
01/04/2010 v1.1 Minor changes to reflect implementation of new technologies and interfaces. Mat Hampson, Ed Lee
10/04/2008 v1.0 Released document. Nick Holmes, Mat Hampson, Victoria Jolliffe
08/04/2008 v0.4 Various refinements. Nick Holmes, Mat Hampson, Dan Littler
20/03/2008 v0.3 Added section 10.4. Mat Hampson/Victoria Jolliffe
19/03/2008 v0.2 Minor revisions made following reviews by Mat Hampson, Dan Littler and Nick Holmes. Removed section 4.0 regarding benefits of using Barlesque. Replaced example file in the appendix. Victoria Jolliffe
18/03/2008 v0.1 New document. Fraser Pearce, Nick Holmes, Mat Hampson, Dan Littler, Victoria Jolliffe

Document editor: Editor, Standards & Guidelines. If you have any comments, questions or requests relating to this document, please contact the Editor, Standards & Guidelines.

Like all other Future Media Standards & Guidelines, this page is updated on a regular basis, through the process described on About Standards & Guidelines.

Top of page

bbc.co.uk navigation

BBC © 2013 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.