MetaBroadcast

we write about the things we build and the things we consume

leaf's departure board, part 1: all the pixels

Written by Luke Wesley-Holley on 16 Aug 2012

For the latest version of Leaf that we created for the Olympics (still live at the moment), we decided to go with a departure board style front-end. This series of posts are going to explain some of the CSS and Javascript used to create the effect. I'll start this post with an explanation and some pointers on how to create full screen (notably full height) web apps. Subsequent posts will cover the following areas:

part 2: meet DOM
part 3: getting animated

The leaf Olympics departure board, mid flip

part1: all the pixels

For this project we wanted the app to display full screen. In the past we've provided iframed content for specific areas columns on client websites meaning we could produce more complex designs, such as circles and speech bubbles that overlap but never intrude on the contained text. However this time we wanted a future proof adaptable layout. While full width elements are simple enough (width:100%;) full height elements aren't. But there is one trick that every CSSmith should know:

html, body {height:100%;}

This snippet ensure that the html and body elements will fill the height of the browsers current window size. It also, strangely, means that any child elements with their height set to 100% will fill their parents height too. For example if we had two elements, #parent and #child with the following CSS:

#parent {
    height: 50px;
}
#child {
    height: 100%;
}

The browser would compute the height of #child as 50px and setting #child's height to 50% would equal 25px. However without the html, body snippet above, the browser would compute the height of #child as the height of #child's content. No content would equal a height of 0!

variable height

So now we know how to make items 100% the height of their parents, but we want each item to be a percentage of the total height, based on how many item's there are. Let's assume we have 10 items, we could define each item's height to be 10%. While this will work for general usage, we want to have the text of each item aligned centrally and be in proportion, no matter how big someones screen is. Normally to align text to the centre of an element we'd use line-height: [height of the element]; but line-height percentages aren't the same as element height percentages. Line heights and font sizes are based on the browsers base font size, generally 16px.

#parent {
    height: 50px;
}
#child {
    height: 100%;
    font-size: 100%;
    line-height: 100%;
}

This example would have a 50 pixel high element, with the text flush to the top of the element. Not what we want. Unfortunately, there is no native CSS fix for this (yet), so we turn to Javascript.

var itemHeight = lineHeight = documentHeight / numItems,
    fontSize = itemHeight - (itemHeight * 0.3);	// We don't want the text to be as big as the container.

overflow

One thing to be wary of when dealing with full page apps, are overflows. Setting padding and margins on an element that is 100% high, will break the element out of its container:

#parent {height: 50px;}
#child {
    height: 100%;
    padding: 10px 0;
}

Will make #child's size 100% + 20px = 70px = higher then #parent's 50px. If the height for #child was defined in pixels, it would be easy to compensate for the padding with:

#child {
    height: 40px;
    padding: 20px 0;
}

With this in mind I ensured that itemHeight, from above, returned a pixel height therefore allowing for any padding or margin:

var itemPadding = 20;
    itemHeight -= itemPadding;

Next time I'll discuss DOM elements and the specific CSS used to create the faux departure board flips, style and pulses. If you have any thoughts or comments on this post or would like to know more about any aspect of MetaBroadcast's front-end work, let us know in the comments!

blog

archive feed

Meta Broadcast

we write about the things we build and the things we consume

leaf's departure board, part 1: all the pixels

part1: all the pixels

variable height

overflow

categories

related posts

blog

reading others