Skip to content
The colors of the MTA in a easy to include library
JavaScript HTML 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.
dist
example
mta-styles
.editorconfig
.gitignore
.jscsrc
.jshintrc
LICENSE.txt
README.md
bower.json
index.html
package.json

README.md

MTA Styles

The colors of the MTA in a easy to include CSS/SASS/LESS/JSON library. The source data for this library is from this CSV provided by the MTA.

Install

Easily include with a package manager:

  • npm install mta-styles
  • Or bower install mta-styles

Or, you could use this in your HTML directly (though note that this CDN is not guaranteed to be up).

<link rel="stylesheet" href="//cdn.rawgit.com/datanews/mta-styles/0.0.5/dist/mta-styles.css">

Use

Styles

With the CSS, SASS, and LESS files, the following styles are available.

  • Subway line symbols with <i class="mta mta-symbol subway-n"><i>
  • Background colors can be set using class="mta subway-a"
    • The format is mta-<mode>-<line>
    • Note that this style is marked as !important.
  • Foreground colors can be set using class="mta lirr-montauk-fg"
    • The format is mta-<mode>-<line>-fg
    • Note that this style is marked as !important.

LESS and SASS

The LESS and SASS files also provide variables to use.

  • For LESS: @mta-subway-5
    • Format is @mta-<mode>-<line>
  • For SASS: $mta-subway-5
    • Format is $mta-<mode>-<line>

JSON

The JSON file describing what lines are what colors can useful for styling in different applications or data visualizations. The JSON is an array of each set of lines.

{
  "mode": "subway",
  "modeName": "NYC Subway Lines",
  "lines": [
    "a",
    "c",
    "e"
  ],
  "linesName": "A,C,E",
  "linesIds": [
    "subway-a",
    "subway-c",
    "subway-e"
  ],
  "hex": "#0039A6"
}

Development

  1. Get code: git clone https://github.com/datanews/mta-styles.git && cd mta-styles
  2. Install dependencies: npm install
  • The main logic that takes the data from the MTA and compiles the output files is in: mta-styles/mta-styles.js
  • To actually compile the output files, run: npm run build

Publish

  1. Update package.json, bower.json, README.md, index.html with the new version.
  2. Commit changes.
  3. git tag X.X.X
  4. git push origin master --tags
  5. npm publish

Attribution

  • All colors from the MTA. Though none of those are included here, the use of MTA logos, maps, and symbols requires a license.
  • Social image from Wikipedia
You can’t perform that action at this time.