skip to primary navigationskip to content
Home

Department of Computer Science and Technology

House-style formatting (ucampas)

 

ucam2012 style

Contents

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.

Each <h2> starts a new box — a padded campl-content-container — and everything up to the next <h2> goes inside it. Deeper headings are ordinary content and stay in the box they are in, so <h3> and <h4> work as sub-headings within a box.

A <ul> that comes first in a box, or first after its heading, is taken to be a list of links and styled as one: no bullets, a thin divider under each item, and a rule under the heading above it. A list further down keeps its bullets, being more likely part of the text than a menu — and a box of running text keeps a plain heading, that rule belonging to the list-of-links idiom rather than to headings in general.

To control the markup of one box yourself — to add a campl-vertical-teaser, say, or extra classes — write that box as a <div class="campl-content-container">. It is then used as it stands, while the boxes around it are still built for you, so the two ways can be mixed. Ucampas features that build a box of their own, such as the newsfeed listings, are likewise left alone.

A page may hold as many <div class="campl-secondary-content"> elements as you like, anywhere in the body: their contents all go into the one right-hand column, in the order in which they appear. So each block of side content can be written next to the text it belongs with.

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.

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.

Table styles

Project Light styles tables through a handful of classes, and ucam2012 carries all of them, along with the class=solid/grey/plain styles of the older house styles.

A plain <table> already picks up the colour theme: its header cells get the theme colour with white text, and the table gets a 2‑pixel rule underneath. What it does not get is cell padding — the cells sit flush against each other — so a bare table is rarely what you want for anything but the smallest grid.

Add class="campl-table" for the usual look: full width, cells padded, content left adjusted and top aligned, header cells bold.

FormatDimensions
A3297 × 420 mm²
A4210 × 297 mm²
A5148 × 210 mm²

Three further classes can be added to that one:

campl-table-striped
shades alternate rows in a light tint of the colour theme. It works off tbody tr:nth-child(odd), so the rows have to sit in an explicit <tbody> for the shading to appear.
campl-table-bordered
draws light vertical lines between the columns.
campl-vertical-stacking-table
makes the table reflow on narrow screens (below 768 pixels): each row becomes a block, the header row is hidden, and every cell is labelled with its column heading instead. Without it a wide table simply overflows on a phone.

All four together:

FormatDimensionsAspect ratio
A3297 × 420 mm²1:√2
A4210 × 297 mm²1:√2
A5148 × 210 mm²1:√2
A6105 × 148 mm²1:√2

Narrow this page’s window to below 768 pixels to watch the second table stack and the first one not.

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;
}

    That is for a style of your own. If you are writing a new table rather than carrying an old one over, the classes under Table styles above may be all you need: they supply the padding, the striped rows and the narrow-screen stacking, and the coloured header and bottom border are then part of the look rather than something to undo.

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")),
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.
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.)
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.
Selects how the left-side navigation bar arranges the current “category” node and its siblings: 0 = the current node first, followed by all its siblings (default, as in the original Project Light design), 1 = the current node in its place among its siblings, 2 = as 0, but with a doubled divider line marking the gap that the current node was lifted out of. Values 1 and 2 keep visible where in the tree the current node sits.

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.

Study at Cambridge

About the University

Research at Cambridge