EBI Website Guidelines

Fixed width (984px)

The basic EBI boilerplate uses a 984px fixed-width, 24-column grid loosely based on the popular 960px Grid System. Columns are be 32px wide, gutters are 9px and side borders (margins) are 5px (actually 5px and 4px, left and right respectively). This gives us a content area of 975px and a full width of 984px. We felt that 24 columns would give you plenty of layout options.

There are some "rules" to using the grid system. Specifically, when laying out <div> elements as containers for your content, you will need to remember to use the relevant classes. For example, <div class="grid_12"> will create a <div> element that spans 12 columns of the page. You can learn by exploring the original 960 Grid System website.

Some examples of the grid in action

Using a grid overlay extension for Firefox (Grid Fox) we can show approximately how page items fit into a 24 column grid:

If you are unfamiliar with the usefulness of grid sytems for layout, there is a lot you can read on the web. However, a good starting point is Mark Boulton's orginal series of articles, Five Simple Steps to Designing Grid Systems.

Responsive layouts and fluid widths

There are many cases where we will need to provide webpages that respond to the device and situation in which they are being viewed. For this reason, we will also take a responsive design approach to how we structure those pages. This means that we have web pages that use CSS(3) media queries to display pages that are built on a fluid (rather than fixed width) grid system and that use responsive images. These pages also use a grid but the elements of that grid (columns, gutters and margins) are sized using percentages. You can use exactly the same class names in your HTML.

Responsive web design allows us to display the same content to our users, whether they are looking at it on a desktop computer or a portable device.

If no maximum width is set for a container, the page will keep on stretching as the screen is expanded (for example, on a large desktop monitor).

A prototype responsive page

An example of a responsive design prototype is currently available. It is based on a stylesheet that sets up a fluid grid for layout. Its container does have a fixed maximum width (to account for optimum line length in text) but you should be able to see how this could be easily adapted to accomodate very large content. However, you need to consider whether or not designing your pages to respond well to small screens is appropriate in your case.

Vertical rhythm

Using a simple vertical grid to manage layout, content is aligned to columns and spaced out using regular gutters. We also (loosely) use 20px baseline grid to give "vertical rhythm" to the text on the page.

Read Wilson Miner's A List Apart article on setting type to a baseline grid.