CSS Tube Map by John Galantini


What is the CSS Tube Map?

The CSS Tube Map is an accurate replica of the iconic diagram used to represent the London Underground network.

It has been built using HTML5, CSS3 and a tiny bit of jQuery. It uses absolutely no images; as matter of fact all the symbols have been recreated using HTML entities, styled and arranged by CSS. This is a personal non-profit project to celebrate 150 years of London Underground.

How was this done?

Each tube line is effectively an unordered list, stations and connections are list-items; each containing the station's name and markup for any associated symbols. Everything is then positioned absolutely.

How long did it take?

The project was completed in exactly 5 weeks; most of work was undertaken during the evenings and weekends.
I would estimate the entire project took close to 120 hours.

What browsers does it support?

The map has been built for use with webkit browsers, such as Chrome and Safari - Firefox is also supported.

About me

I am a freelance front end web developer & consultant, who typically contracts around London. Please visit my website where you can view my CSS TARDIS. I can also be found on twitter.