TFL Colours
Implementation is really simple, just give what ever you want to color-code a two classes.
See all supported colours and options.
Installation Instructions
Install instructions can be found on the Github repo readme.
Examples
Example 1 - Simple Usage
tfl
tfl-{underground-line}
Code Example
<p>To get from Waterloo to Picadily Circus:</p>
<p>Take the <span class="tfl tfl-northern">Northern Line</span> to Leicester Square. Then change and take the <span class="tfl tfl-piccadilly">Piccadilly Line</span> to Piccadilly Circus</p>
<p>To get from London Bridge to Sloan Square:</p>
<p>Take the <span class="tfl tfl-jubilee">Jubilee Line</span> at London Bridge towards Stanmore, change at Westminster to either the <span class="tfl tfl-circle">Circle</span>/<span class=" tfl tfl-district">District</span> Lines to Sloane Square.</p>
Output
To get from Waterloo to Picadily Circus:
Take the Northern Line to Leicester Square. Then change and take the Piccadilly Line to Piccadilly Circus
To get from London Bridge to Sloan Square:
Take the Jubilee Line at London Bridge towards Stanmore, change at Westminster to either the Circle/District Lines to Sloane Square.
Example 2 - With Bootstrap
When you add some more CSS on top, like Bootstrap, it really comes alive...
Code Example
<p>To get from Waterloo to Picadily Circus:</p>
<p>Take the <span class="tfl tfl-northern">Northern Line</span> to Leicester Square. Then change and take the <span class="tfl tfl-piccadilly">Piccadilly Line</span> to Piccadilly Circus</p>
<p>To get from London Bridge to Sloan Square:</p>
<p>Take the <span class="tfl tfl-jubilee">Jubilee Line</span> at London Bridge towards Stanmore, change at Westminster to either the <span class="tfl tfl-circle">Circle</span>/<span class=" tfl tfl-district">District</span> Lines to Sloane Square.</p>
Output
To get from Waterloo to Picadily Circus:
Take the Northern Line to Leicester Square. Then change and take the Piccadilly Line to Piccadilly Circus
To get from London Bridge to Sloan Square:
Take the Jubilee Line at London Bridge towards Stanmore, change at Westminster to either the Circle/District Lines to Sloane Square.
Example 3 - A Table / Board
Bakerloo Line | Good Service |
District Line | Normal Service |
Hammersmith & City Line | Partial Closure |
Jubilee Line | Engineering Works |