Notes

  • This example page is based on our (in progress) mobile-first, responsive template. It has a max-width of 1440px, with breakpoints at 768px, 1024px and 1440px.
  • Please note the structure within the <head> tag, specifically conditional html tag for IE, viewport meta, X-UA declaration, Google font, our CSS, modernizr and conditional respond.js (media query polyfill for older IE). The loading order should be maintained.
  • There is one CSS file, rte.bosco.css, which contains an extremely minimal reset and the template CSS (including presentation, grid, media queries, IE gotchas, base64 encoded icons).
  • All JS is loaded from CDN. jQuery version is currently 1.9.1 but should work fine with 2.0.
  • Our analytics tag should be includeded in your template as per the (generated) source of this page. In your template, include everything between:
     <!-- Begin Urchin Tag --> 
    and
    <!-- End comScore Tag --> 
    ...before your closing </body> tag.
  • Please note, this template is still in develoment and subject to ongoing change. Email Paul McClean or Mark Hennessy with any queries.
  • An example grid is below for illustrative purposes. It doesn't need to be used. The "grid-visible" class is purely for wireframing.

Responsive grid example

12 Columns
6 Columns
6 Columns
4 Columns
4 Columns
4 Columns
3 Columns
3 Columns
3 Columns
3 Columns
2 Columns
2 Columns
2 Columns
2 Columns
2 Columns
2 Columns
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column