Skip to content
CSS styles for public transport services in Munich & NYC
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
sass
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

TransportKit

Supported Cities

  • Munich
  • Berlin
  • London
  • New York City
  • Nuremberg
  • Regensburg
  • Salzburg

Example Page

You can have a look at the styles here: schaechinger.com/transportkit.

Build CSS

First clone the repository to your machine:

git clone https://github.com/schaechinger/transportkit.git
cd transportkit

The SASS are located in the sass folder, separated in transport types.

To build the project run:

npm i
npm run build

Use CSS

The current versions in CSS format are located in the styles folder after the build.
Each supported city has it's own file if you only want to use styles for one city. If you cloned the repository and edited the SASS files make sure you build the project first.

Examples

The format is as followed: transportkit-{city} transportkit-{city}--{line}
To enable dark / contrast mode, add the following class: transportkit-{city}--contrast

Line HTML Class Preview
Munich
U-Bahn
Generic U-Bahn transportkit-munich--u U
U1 transportkit-munich--u1 U1
U2 transportkit-munich--u2 U2
U3 transportkit-munich--u3 U3
U4 transportkit-munich--u4 U4
U5 transportkit-munich--u5 U5
U6 transportkit-munich--u6 U6
U7 transportkit-munich--u7 U7
U8 transportkit-munich--u8 U8
S-Bahn
Generic S-Bahn transportkit-munich--s S
S1 transportkit-munich--s1 S1
S2 transportkit-munich--s2 S2
S3 transportkit-munich--s3 S3
S4 transportkit-munich--s4 S4
S6 transportkit-munich--s6 S6
S7 transportkit-munich--s7 S7
S8 transportkit-munich--s8 S8
S20 transportkit-munich--s20 S20
Bus
Generic city bus transportkit-munich--b
transportkit-munich--bus
132
Generic metro bus transportkit-munich--bm
transportkit-munich--busm
transportkit-munich--bus-metro
53
Generic express bus transportkit-munich--bx
transportkit-munich--busx
transportkit-munich--bus-express
X30
Generic night bus transportkit-munich--bn
transportkit-munich--busn
N41
Generic weekend-only
night bus
transportkit-munich--bnw
transportkit-munich--busnw
transportkit-munich--bus-night-weekend
N80
Tram
Generic tram transportkit-munich--t
transportkit-munich--tram
17
Generic peak time tram transportkit-munich--tp
transportkit-munich--tram-peak
22
Tram 12 transportkit-munich--t12 12
Tram 15 transportkit-munich--t15 15
Tram 16 transportkit-munich--t16 16
Tram 17
Tram N17
transportkit-munich--t17
transportkit-munich--tn17
17 N17
Tram 18 transportkit-munich--t18 18
Tram 19
Tram N19
transportkit-munich--t19
transportkit-munich--tn19
19 N19
Tram 20
Tram N20
transportkit-munich--t20
transportkit-munich--tn20
20 N20
Tram 21 transportkit-munich--t21 21
Tram 22 transportkit-munich--t22 22
Tram 23 transportkit-munich--t23 23
Tram 25 transportkit-munich--t25 25
Tram 27
Tram N27
transportkit-munich--t27
transportkit-munich--tn27
27 N27
Tram 28 transportkit-munich--t28 28
Berlin
U-Bahn
Generic U-Bahn transportkit-berlin--u U
U1 transportkit-berlin--u1 U1
U2 transportkit-berlin--u2 U2
U3 transportkit-berlin--u3 U3
U4 transportkit-berlin--u4 U4
U5
U55
transportkit-berlin--u5
transportkit-berlin--u55
U5 U55
U6 transportkit-berlin--u6 U6
U7 transportkit-berlin--u7 U7
U8 transportkit-berlin--u8 U8
U9 transportkit-berlin--u9 U9
S-Bahn
Generic S-Bahn transportkit-berlin--s S
S1 transportkit-berlin--s1 S1
S2
S25
S26
transportkit-berlin--s2
transportkit-berlin--s25
transportkit-berlin--s26
S2 S25 S26
S3 transportkit-berlin--s3 S3
S41
S45
transportkit-berlin--s41
transportkit-berlin--s45
S41 S45
S42 transportkit-berlin--s42 S42
S46
S47
transportkit-berlin--s46
transportkit-berlin--s47
S46 S47
S5 transportkit-berlin--s5 S5
S7
S75
transportkit-berlin--s7
transportkit-berlin--s75
S7 S75
S8
S85
transportkit-berlin--s8
transportkit-berlin--s85
S8 S85
S9 transportkit-berlin--s9 S9
London
Tube
Bakerloo transportkit-london--bakerloo Bakerloo
Central transportkit-london--central Central
Circle transportkit-london--circle Circle
District transportkit-london--district District
Hammersmith & City transportkit-london--hammersmith Hammersmith & City
Jubilee transportkit-london--jubilee Jubilee
Metropolitan transportkit-london--metropolitan Metropolitan
Northern transportkit-london--northern Northern
Piccadilly transportkit-london--piccadilly Piccadilly
Victoria transportkit-london--victoria Victoria
Waterloo & City transportkit-london--waterloo Waterloo & City
Overgrounds
Overground transportkit-london--overground Overground
TfL Rail transportkit-london--tflrail TfL Rail
DLR transportkit-london--dlr DLR
Tram transportkit-london--t
transportkit-london--tram
Tram
Bus & River Bus
Generic bus transportkit-london--b
transportkit-london--bus
14
Woolrich Ferry transportkit-london--rbwoolwich Woolwich Ferry
RB1 transportkit-london--rb1 RB1
RB1X transportkit-london--rb1x RB1X
RB2 transportkit-london--rb2 RB2
RB4 transportkit-london--rb4 RB4
RB5 transportkit-london--rb5 RB5
RB6 transportkit-london--rb6 RB6
Air Line
Emirates Air Line transportkit-london--aemirates Emirates Air Line
New York City
Subway
1
2
3
transportkit-nyc--1
transportkit-nyc--2
transportkit-nyc--3
1 2 3
4
5
6
6d
transportkit-nyc--4
transportkit-nyc--5
transportkit-nyc--6
transportkit-nyc--6d
4 5 6 6d
7
7d
transportkit-nyc--7
transportkit-nyc-7d
7 7d
A
C
E
transportkit-nyc--a
transportkit-nyc--c
transportkit-nyc--e
A C E
B
D
F
M
transportkit-nyc--b
transportkit-nyc--d
transportkit-nyc--f
transportkit-nyc--m
B D F M
G transportkit-nyc--g G
J
Z
transportkit-nyc--j
transportkit-nyc--z
J Z
L transportkit-nyc--l L
S transportkit-nyc--s S
N
Q
R
W
transportkit-nyc--n
transportkit-nyc--q
transportkit-nyc--r
transportkit-nyc--w
N Q R W
Nuremberg
U-Bahn
Generic U-Bahn transportkit-nuremberg--u U
U1 transportkit-nuremberg--u1 U1
U2 transportkit-nuremberg--u2 U2
U3 transportkit-nuremberg--u3 U3
S-Bahn
Generic S-Bahn transportkit-nuremberg--s S
S1 transportkit-nuremberg--s1 S1
S2 transportkit-nuremberg--s2 S2
S3 transportkit-nuremberg--s3 S3
S4 transportkit-nuremberg--s4 S4
Tram
Generic Tram
4
transportkit-nuremberg--t
transportkit-nuremberg--t4
4
5 transportkit-nuremberg--t5 5
6 transportkit-nuremberg--t6 6
7 transportkit-nuremberg--t7 7
8 transportkit-nuremberg--t8 8
R-Bahn
Generic R-Bahn
R 1
transportkit-nuremberg--r
transportkit-nuremberg--r1
R 1
R 11 transportkit-nuremberg--r11 R 11
R 12 transportkit-nuremberg--r12 R 12
R 2 transportkit-nuremberg--r2 R 2
R 21 transportkit-nuremberg--r21 R 21
R 3 transportkit-nuremberg--r3 R 3
R 31 transportkit-nuremberg--r31 R 31
R 4 transportkit-nuremberg--r4 R 4
R 5 transportkit-nuremberg--r5 R 5
R 6 transportkit-nuremberg--r6 R 6
R 7 transportkit-nuremberg--r7 R 7
R 9 transportkit-nuremberg--r9 R 9
Regensburg
Bus
Generic bus transportkit-regensburg--b
transportkit-regensburg--bus
Generic
Generic suburb bus transportkit-regensburg--bsub
transportkit-regensburg--bus-suburb
Suburb
A transportkit-regensburg--ba A
X4 transportkit-regensburg--bx4 X4
X9 transportkit-regensburg--bx9 X9
1 transportkit-regensburg--b1 1
2 transportkit-regensburg--b2 2
3 transportkit-regensburg--b3 3
4
4A
transportkit-regensburg--b4
transportkit-regensburg--b4a
4 4A
5
5A
transportkit-regensburg--b5
transportkit-regensburg--b5a
5 5A
6 transportkit-regensburg--b6 6
7 transportkit-regensburg--b7 7
8
8A
8B
transportkit-regensburg--b8
transportkit-regensburg--b8a
transportkit-regensburg--b8b
8 8A 8B
9 transportkit-regensburg--b9 9
10 transportkit-regensburg--b10 10
11
11A
transportkit-regensburg--b11
transportkit-regensburg--b11a
11 11A
12 transportkit-regensburg--b12 12
13 transportkit-regensburg--b13 13
14 transportkit-regensburg--b14 14
15 transportkit-regensburg--b15 15
16 transportkit-regensburg--b16 16
17 transportkit-regensburg--b17 17
18 transportkit-regensburg--b18 18
20 transportkit-regensburg--b20 20
21 transportkit-regensburg--b21 21
23 transportkit-regensburg--b23 23
24 transportkit-regensburg--b24 24
28 transportkit-regensburg--b28 28
30
31
transportkit-regensburg--b30
transportkit-regensburg--b31
30 31
32 transportkit-regensburg--b32 32
33 transportkit-regensburg--b33 33
34 transportkit-regensburg--b34 34
41 transportkit-regensburg--b41 41
77 transportkit-regensburg--b77 77
78 transportkit-regensburg--b78 78
Salzburg
O-Bus
1 transportkit-salzburg--o1 1
2 transportkit-salzburg--o2 2
3 transportkit-salzburg--o3 3
4 transportkit-salzburg--o4 4
5 transportkit-salzburg--o5 5
6 transportkit-salzburg--o6 6
7 transportkit-salzburg--o7 7
8 transportkit-salzburg--o8 8
9 transportkit-salzburg--o9 9
10 transportkit-salzburg--o10 10
12 transportkit-salzburg--o12 12
14 transportkit-salzburg--o14 14
S-Bahn
S1 transportkit-salzburg--s1 S1
S2 transportkit-salzburg--s2 S2
S3 transportkit-salzburg--s3 S3
S4 transportkit-salzburg--s4 S4
Bus
Generic bus transportkit-salzburg--b 840

Download CSS

However, if you want to use the CSS files right without compiling, you can refer to these links to get the styles for all cities or insert the lower case city name into the second link:

Licenses

Please note that some icons may have restrictions or require a license prior to use.
Please read the guidelines of the companies before using them.

You can’t perform that action at this time.