-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
201 lines (161 loc) · 6.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>MTA Styles</title>
<meta name="description" content="The colors of the MTA in a easy to include CSS/SASS/LESS/JSON library.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@datanews">
<meta name="twitter:title" content="MTA Styles">
<meta name="twitter:description" content="The colors of the MTA in a easy to include CSS/SASS/LESS/JSON library.">
<meta name="twitter:creator" content="@datanews">
<meta name="twitter:image" content="https://datanews.github.io/mta-styles/example/New_York_City_Transit_Sign_Shop_(15370608428).jpg">
<!-- Open Graph data -->
<meta property="og:title" content="MTA Styles">
<meta property="og:type" content="article">
<meta property="og:url" content="https://datanews.github.io/mta-styles/">
<meta property="og:image" content="https://datanews.github.io/mta-styles/example/New_York_City_Transit_Sign_Shop_(15370608428).jpg">
<meta property="og:description" content="The colors of the MTA in a easy to include CSS/SASS/LESS/JSON library.">
<meta property="og:site_name" content="MTA Styles">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:400,700">
<link rel="stylesheet" href="example/normalize.css">
<link rel="stylesheet" href="example/example.css">
<link rel="stylesheet" href="dist/mta-styles.css">
</head>
<body>
<header>
<div class="page-container">
<h1>MTA Styles</h1>
<h2>The colors of the MTA in a easy to include CSS, SASS, LESS, JSON library.</h2>
</div>
</header>
<div class="page-container">
<section>
<p>Styles provided directly from the <a href="http://web.mta.info/developers/resources/line_colors.htm" target="_blank" rel="noopener">MTA</a>. MTA Styles was created by the <a href="http://datanews.tumblr.com/" target="_blank" rel="noopener">WNYC DataNews team</a>. See <a href="https://github.com/datanews/mta-styles" target="_blank" rel="noopener">Github</a> for code and more details.</p>
<h1>Include</h1>
<p>You can easily install MTA Styles with a package manager on the command line.</p>
<pre>
npm install mta-styles
bower install mta-styles</pre>
<p>Or include directly with this CDN:</p>
<pre>
<link rel="stylesheet" href="//cdn.rawgit.com/datanews/mta-styles/0.0.5/dist/mta-styles.css"></pre>
</section>
<section>
<h1>Symbols</h1>
<p>It's easy to put a MTA line symbol in your markup, specifically for the subway, just use some markup like the following.</p>
<pre>
<i class="mta mta-symbol subway-n"><i></pre>
<div class="example-symbols">
<i class="mta mta-symbol subway-a"></i>
<i class="mta mta-symbol subway-c"></i>
<i class="mta mta-symbol subway-e"></i>
<i class="mta mta-symbol subway-b"></i>
<i class="mta mta-symbol subway-d"></i>
<i class="mta mta-symbol subway-f"></i>
<i class="mta mta-symbol subway-m"></i>
<i class="mta mta-symbol subway-g"></i>
<i class="mta mta-symbol subway-j"></i>
<i class="mta mta-symbol subway-z"></i>
<i class="mta mta-symbol subway-l"></i>
<i class="mta mta-symbol subway-n"></i>
<i class="mta mta-symbol subway-q"></i>
<i class="mta mta-symbol subway-r"></i>
<i class="mta mta-symbol subway-w"></i>
<i class="mta mta-symbol subway-s"></i>
<i class="mta mta-symbol subway-1"></i>
<i class="mta mta-symbol subway-2"></i>
<i class="mta mta-symbol subway-3"></i>
<i class="mta mta-symbol subway-4"></i>
<i class="mta mta-symbol subway-5"></i>
<i class="mta mta-symbol subway-6"></i>
<i class="mta mta-symbol subway-7"></i>
<i class="mta mta-symbol subway-t"></i>
</div>
<p>The symbols will adjust to the font-size they are placed in, but you can also use classes to make the symbols small, medium, and large:</p>
<div>
<code>mta-small</code>
<i class="mta mta-symbol subway-q mta-small"></i> <i class="mta mta-symbol subway-5 mta-small"></i> <br><br>
<code>mta-med</code>
<i class="mta mta-symbol subway-q mta-med"></i> <i class="mta mta-symbol subway-5 mta-med"></i> <br><br>
<code>mta-large</code>
<i class="mta mta-symbol subway-q mta-large"></i> <i class="mta mta-symbol subway-5 mta-large"></i>
</div>
</section>
<section>
<h1>Backgrounds</h1>
<p>MTA Styles provides all the colors as background with classes like <code>mta subway-a</code>. Some examples:</p>
<div class="mta subway-a example-bg">
Subway A line<br>
<code>mta subway-a</code>
</div>
<div class="mta lirr-babylon example-bg">
Long Island Rail Road Babylon branch<br>
<code>mta lirr-babylon</code>
</div>
<div class="mta metro-north-pascack-valley example-bg">
Metro-North Railroad Pascack Valley line<br>
<code>mta metro-north-pascack-valley</code>
</div>
</section>
<section>
<h1>Foregrounds</h1>
<p>You can also use the line colors as foreground colors by adding a <code>-fg</code> suffix. Some examples:</p>
<div class="mta subway-j-fg example-fg">Subway J line<br><code>mta subway-j-fg</code></div>
<div class="mta lirr-montauk-fg example-fg">Long Island Rail Road Montauk branch<br><code>mta lirr-montauk-fg</code></div>
<div class="mta metro-north-harlem-fg example-fg">Metro-North Railroad Harlem line<br><code>mta metro-north-harlem-fg</code></div>
</section>
<section>
<h1>JSON</h1>
<p>MTA Styles also provides a JSON file for use in applications or data analysis.</p>
</section>
<section>
<h1>Identifiers</h1>
List of identifiers available.
<pre>
subway-a
subway-c
subway-e
subway-b
subway-d
subway-f
subway-m
subway-g
subway-j
subway-z
subway-l
subway-n
subway-q
subway-r
subway-w
subway-s
subway-1
subway-2
subway-3
subway-4
subway-5
subway-6
subway-7
lirr-babylon
lirr-city-terminal
lirr-far-rockaway
lirr-hempstead
lirr-long-beach
lirr-montauk
lirr-oyster-bay
lirr-port-jefferson
lirr-port-washington
lirr-ronkonkoma
lirr-west-hempstead
metro-north-harlem
metro-north-hudson
metro-north-new-haven
metro-north-pascack-valley
metro-north-port-jervis</pre>
</section>
</div>
</body>
</html>