The Ucampas “ucam2012” web house style is based on the “Project Light” style templates (github sources, documentation), which were developed during 2012 by “Head London” for the University’s Office of External Affairs and Communications, MISD and the University Computing Service, and which have been used on main University web sites since February 2013, as well as in the UCS/UIS Falcon and Drupal web content-management services.

To activate it under Ucampas, add the line “style=ucam2012,” to your uconfig.txt file. Six alternative colour themes exist (blue, turquoise, purple, green, orange, red) and these can be chosen with “style=ucam2012(colours=orange),” etc.

You can also set default style parameters outside the “style” attribute that switches the style for a particular set of pages, e.g. with

style=ucam2012,
ucam2012=(
  colours=orange,
),

The current implementation supports the page layout referred to in the template documentation as a “subsection page”, with or without left navigation, and with or without a right-hand column, as well as the “section landing page” layout used for the home page of a site or a major section of it.

Features

Some of the features of this house style:

• The page template automatically adds at the very top and bottom of each page a “global header” and “global footer” with a black background, which contain information links to university-wide sites.
• Next to these are a “local header” and “local footer” with a colour background. These provide navigation links and information related to the local web site.
• The “local header” contains
  • a breadcrumbs line
  • the name of the organization (from the organization parameter)
  • a horizontal row of top-level menu items, which on hover expand into a second-level pull-down menu.
  • a “subtitle” line that shows either the title of the current page, or if it has been set the “section” string parameter.
• a left-side navigation bar that shows (with a grey background) the path to the root of the site, then the title of the current page in bold, followed by sub page links (each prefixed with a >), followed by links to all sibling pages (pages with the same parent as the currently shown page).
• The main page content
• An optional right-hand column with additional links, news items, or other secondary content
• The local footer, which at present contains a ucampas-generated user-configurable copyright line, a link to the author of the page after “Information provided by”, and in the presence of an .htaccess file a summary of access restrictions to this page.

  The template is “responsive” to the width of the display window. Different style features change depending on the width of the display window. In particular, below a width of 768px, the entire page layout is rearranged into a single column for easier use on small mobile-device screens. In this mobile mode, the font size increases, the side columns move to the bottom, and the horizontal menu bar is replaced with a touch-screen menu function.

Right-hand column

Project Light distinguishes between a two- and three-column layout, depending on whether you want, in addition to the main page content and an optional left-hand navigation column, a right-hand column with boxes of additional links, news items, teasers, etc. To add such a right-hand column, place anywhere in the body of your page one or more

<div class="campl-secondary-content"> ... </div>

elements. Ucampas will move the content of all of them, in the order in which they appear, out of the main text and into a single right-hand column, and it will narrow the main content column accordingly. (For backwards compatibility with old ucam2008 pages, a <div id="content-secondary"> is recognized as well.)

The right-hand column helps to make a clearer distinction between links that are part of the navigation tree (left) and links that lead elsewhere or to non-HTML documents (right). Bear in mind, however, that a three-column layout substantially reduces the width left for the page body.

Each box in the right-hand column should normally start with an <h2> heading, followed by a list of links or other content. Ucampas wraps such headings and the content that follows them into the

<div class="campl-content-container">
  <div class="campl-heading-container"><h2>...</h2></div>
  <ul class="campl-unstyled-list campl-related-links">...</ul>
</div>

structure that the Project Light stylesheet expects, so a simple

<div class="campl-secondary-content">
  <h2>Related links</h2>
  <ul>
    <li><a href="...">some link</a>
    <li><a href="...">another link</a>
  </ul>
</div>

is usually all you need to write. If, on the other hand, you want full control over the low-level markup (for example to add a campl-vertical-teaser box, or to attach additional classes), provide the campl-content-container boxes yourself: if a campl-secondary-content element already contains at least one campl-content-container child, its content is passed through unchanged. You can freely mix both approaches by using several campl-secondary-content elements, as they are all merged into the same column.

Section landing pages

The section landing page is the wider, more visual layout that Project Light uses for the home page of a site or of a major section of it (a faculty, a research group, a theme). It has a section-page header (the title as a large heading, with no sub-title bar), an optional banner or carousel across the top, and a flexible grid of content below.

To turn a page into a section landing page, mark its body accordingly:

<body class="section">

Unlike a subsection page, where Ucampas arranges the columns for you, a section landing page hands the content grid to you: the layouts vary too much between sites to impose one. You write the content-row grid directly in the page body using the Project Light grid classes.

Project Light lays each row out on a twelve-column grid. The class campl-columnn makes an element n twelfths as wide as its container, and the columns across a row should add up to twelve. So campl-column9 is three-quarters of the width, campl-column3 a quarter, campl-column6 a half, and three campl-column4 boxes (a third each) fill a row. Widths are relative to the containing element, so the count restarts inside a nested column — three campl-column4 teasers placed inside a campl-column9 main column fill that column. A typical skeleton — a three-quarter-width main column holding a row of three teasers, beside a quarter-width right-hand column:

<body class="section">
<div class="campl-column9 campl-main-content">
  <div class="campl-content-container">
    <p>Introductory text …
  </div>
  <div class="campl-column4"> … a teaser … </div>
  <div class="campl-column4"> … a teaser … </div>
  <div class="campl-column4"> … a teaser … </div>
</div>
<div class="campl-column3 campl-secondary-content">
  … related links …
</div>

The Project Light component guide and the example pages show the available grid and teaser components.

Banner and carousel

To add a banner across the top of a section landing page, place the image (or images) in a <div class="ucam2012-banner"> anywhere in the body:

<div class="ucam2012-banner">
  <a href="story1.html"><img src="banner-1.jpg" title="First caption"></a>
  <a href="story2.html"><img src="banner-2.jpg" title="Second caption"></a>
</div>

Each <img> becomes one slide: its title attribute is shown as the caption, and an enclosing <a> makes the slide a link. With a single image the result is a static banner; with several, the Project Light JavaScript turns it into a rotating carousel with navigation controls.

Banner images fill the nine-column banner slot — about 885 pixels wide at full desktop width — with roughly a 2:1 aspect ratio. A good standard size is 885×432 (or double that, 1770×864, to stay sharp on high-density displays). Give every slide the same dimensions, since the carousel sizes all slides to match the first one.

What has changed?

Like in previous house styles, the designers of Project Light also couldn't resist making a couple of more intrusive CSS changes that users may want to override in their documents.

When switching from the ucam2008 style previously used at the Computer Laboratory, the following changes from the “Project Light” templates deserve particular attention:

• The first <h1> heading may need to be reviewed in the context of the page title or section text that is now automatically displayed immediately above it.
• <img> elements in <p> and <li> elements no longer float by default on the right and no longer have a grey border
• the <blockquote> element now switches to a large (19px) italic font, intended to highlight quotes, and also prepends a magnified opening quotation mark, as in

  'Tis better to have loved and lost
  than never to have loved at all

  'Tis better to have loved and lost
  than never to have loved at all

  A <p> element inside <blockquote> now floats to the left. This very eye-catching style is likely to be incompatible with some prior uses of <blockquote>.

  If you actually do want to use this style of quotation deliberately, put the quotation into a <p class="campl-quote-mark"> paragraph – which adds the matching magnified closing quotation mark – and optionally follow it with a <cite> for the attribution. Since the style floats every <p> inside a <blockquote> to the left, keep the whole quotation in a single paragraph and use <br> for line breaks; separate paragraphs would instead sit side by side.

  'Tis better to have loved and lost
  than never to have loved at all.

  Alfred, Lord Tennyson

• Tables now show by default a coloured line as the bottom border. You may want to reset this, and a few related changes, in your own custom table styles with

  table.myclass {
    border: 0;
    border-collapse: separate;
  }
  table.myclass th, table.myclass td {
    background: inherit;
  }
  

Configuration parameters

In addition to the uconfig.txt configuration parameters described in the Ucampas Reference Manual, the ucam2012 style also supports the following:

footadd=...

Insert additional text or HTML elements right before the default text of the local footer. Insert HTML elements in PlexTree encoding, i.e. element names are meta strings (marked by an asterisk prefix). For example (see icon added to local footer below):

footadd=(*p(*a(href="",
               *img(src="/images/athena-swan-bronze-304x182.png", height=36)),
            style="margin:0 0 0 20px; float:right")),

local_footer=(((*p('text'))),((*h3('heading'),*ul(*li(...)))),(),())

Override the default local footer by providing a list of (usually four) columns, each of which is a list of groups of HTML elements (in PlexTree encoding). The text of the default footer can be included with *p(class="ucampas-footnotes"). For example (see CST site):

local_footer=(
  ((*h3('Contact us'),
    *p(style='color:white',
       'William Gates Building', *br,
       'JJ Thomson Avenue', *br,
       'Cambridge, CB3 0FD'),
    *p(style='color:white', class="ucampas-footnotes"),
    *p(*a('Privacy policy', href='/privacy.html')))),
  ((*h3('Social media'),
    *ul(style="padding-left: 1em",
        *li(*a(*img(src="/images/icon-facebook-white.svg", style="width: 1.3em; color: #fff"),
               ' Facebook', href="https://www.facebook.com/ComputerScienceCambridgeUniversity")),
        *li(*a(*img(src="/images/icon-twitter-white.svg", style="width: 1.3em; color: #fff"),
               ' Twitter', href="https://twitter.com/Cambridge_Cl")),
        *li(*a(*img(src="/images/icon-youtube-white.svg", style="width: 1.3em; color: #fff"),
               ' YouTube', href="https://www.youtube.com/user/CambridgeComputerLab/")),
    )
  )),
  ((*a(href="https://www.cst.cam.ac.uk/athena-swan",
       *img(src="/images/athena-swan-bronze-304x182.png",
            style="width:100%; max-width: 250px; margin-top: 40px")))),
  (),
),

local_footer=0

Removes the local footer near the bottom of the page.

global_footer=0

Removes the global footer at the bottom of the page. (This currently also causes the University logo to then move into the local footer above.)

menubar

menustop

menutop

menutopinclude

Just like navbar=0 can be used to remove the left-side navigation bar, menubar=0 removes the horizontal menu in the local header. In fact, all the parameters navstop, navtop, and navtopinclude have an equivalent menustop, menutop, and menutopinclude for the horizontal navigation bar.

Performance

If your page is part of a rather large site (either because of its directory location or via a ..u link), you may notice that building a page can take a bit longer in ucam2012 than with some other house styles. This is because in the Project Light style, the navigation menu on every page contains an entire site map, to enable mobile-phone users to navigate from every page to every other page without having to load intermediate pages. (In the desktop version of the navigation menu, only the top-most two levels are visible; choose a very narrow browser window to see in the single-column phone mode of the style the full depth of the menu.)

Collecting and formatting all the information needed to build this menu structure can take a few seconds on sites with many hundred pages. Several workarounds are possible to make ucampas as fast as with earlier styles:

• You can disable the pull-down navigation menu completely with menubar=0,
• You can restart the top of the menu hierarchy with menutop=1,

These workarounds also can make the resulting HTML file much shorter. Rebuilding multiple pages in a single ucampas invocation is faster than calling ucampas on each page separately, because ucampas caches site-structure information in RAM.