Skip to content

datanews/mta-styles

Repository files navigation

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