CSS

Here we discuss the markup and CSS required to give a standard framework experience. All sections, with the exception of the DEVICES section, refer to presentation in a standard web browser.

How to use the CSS framework

To activate the CSS framework, include this in your HTML head:

<link rel="stylesheet" type="text/css" media="screen" href="https://cern.ch/framework/css/page.css" /> [page.css not yet published - use dev_page.css]

Anatomy of page.css

If you look at the core CSS file for a framework page - page.css - you will see that it pulls in CSS from various sources: BASE, LAYOUT, UTILITIES, and INTERFACE. There are additional CSS resources available for various uses under DEVICES, FLAVOURS, and CUSTOM. These are all covered in detail in the pages that follow.

Framework contexts

The framework references three basic contexts:

1. Page: a single HTML page.
2. Site: a collection of related pages. Each page in a site shares the same site_ markup - except where sections are used (see below).
3. Global: all pages under the cern.ch domain that use the framework. Each page shares the same global_ markup.

Anatomy of the standard framework page

A standard CSS vocabulary implies a standard markup structure. Here are the main chunks of the standard page:

1. #global_strap
2. #site_banner
3. #page
4. #site_footer
5. #global_footer

You can see an example of this structure here.

#global_strap

The global_strap element is meant to be a clear indication to the user that a page is published in the CERN domain, and provides a link back to the CERN homepage. It contains a limited set of elements:

• link to cern.ch/ *(mandatory)
• CERN-wide search
• breadcrumbs, with cern.ch as home

The global_strap element must never contain elements that relate to a page or a site.

#site_banner

The site_banner element is extremely flexible. The only restriction is that it must contain site-level elements, and not page-level ones. For example, the page title should never appear here.

#page

The page element contains the page content. It may also contain site-level navigation, provided that this navigation is consistent across all pages in a site or section.

#site_footer

The site_footer element must be consistent across a site. It can usefully contain a site-wide navigation, or list of site quick-picks.

#global_footer

The global_footer element is intended for future implementation. In conjunction with the global_strap it would provide a list of quicklinks across the cern.ch domain.

Sites and sections

For very large sites it is sometimes appropriate to create sections. Please use sections sparingly - they are very rarely necessary, and add a layer of complexity for the user. Where section navigation is used it should appear immediately after the site_banner.

BASE »