![travis](https://api.travis-ci.com/mapbox/base.svg?token=QsxzCfAdJAqhsWktt2yL)

MapBox Base + Styleguide
------------------------

Base CSS classes and components for mapbox.com and related subsites. See the styleguide for docs on usage.

### Development

- **latest is always deployable.**. Do not make changes to `latest` that you are not confident in making live. Remember that `latest` is referenced by mapbox.com as well as half a dozen other subsites. If unsure, propose a pull request in a new branch.
- **document classes in the styleguide.** If adding or changing a class, make sure to add an example for it in the styleguide. The example serves as a visual test and as an explanation of your intentions -- so that someone else does not misinterpret your class and go hijack it for their own purposes.
- **document deprecated classes.** Same as above. For classes you think have no future and are present only for legacy purposes, add to the deprecated section. This is a warning to people to not generate any new markup using these classes.

### Editing + rendering icons

Base uses an icon font generated with [icomoon](http://icomoon.io/app/). If you're adding a new icon, here are the steps to take:

1. Save your icon as a 20px x 20px SVG in latest/icons/. Name the file according to the class you want to use in CSS to reference the icon.
1. Save your icon as a 20px x 20px SVG in latest/icons/. Name the file according to the class you want to use in CSS to reference the icon.
2. Log in to [icomoon](https://icomoon.io/) via [meldium](https://www.meldium.com/home#/home).
3. Click on the 'icomoon app' button in the top right of the first screen. 
4. In the top right corner, you'll see a layer icon, click that to view all the saved projects. 
5. You'll see a project called 'Base' - click the 'load' button. 
6. Add your icon to the set
7. Click the 'generate font' button along the bottom of the window. 
8. Download the font package. Contents should look like this:

  ```
  Read Me.txt
  demo-files
  demo.html
  fonts
    icon.eot
    icon.svg
    icon.ttf
    icon.woff
  selection.json
  style.css
  ```

5. Take all the fonts out of the `fonts/` and move them into `latest/`.
6. Open style.css, check that the content codes match those in base.css, and copy over the rule for your new icon. It should look like this:

  ```css
  .icon.account:before {
      content: "\e600";
  }
  ```

  In base, we use both `:before` and `:after` icons, so add the `:after` rule. The final rule in base would be:

  ```css
  .icon.account:before,.rcon.account:after {
      content: "\e600";
  }
  ```
  If the content codes shifted, then all the rules in base.css need to be updated with the new codes. Some icons have alternate names, like `x` and `close` or `up` and `continue`, so don't forget to add the extra rules for those cases.

7. **Very important!** Bust the cache by forcing browsers to reload the fonts by adding a version to the font path. ie.

  ```css
@font-face {
  font-family:'icon';
    src:url('icon.eot?v=1');
    src:url('icon.eot?v=1#iefix') format('embedded-opentype'),
        url('icon.woff?v=1') format('woff');
  font-weight:normal;
  font-style:normal;
  }
  ```
  Note where `v=1` has been added to the path. Increment this version number with each update.

### Documenting icons

When you've updated the font files and the CSS, add your new icon to https://github.com/mapbox/base/blob/mb-pages/_includes/base-icons.json

Include `tags` to categorize the icon and to help broaden search.

Example:

```json
{
  "icon": "mt",
  "tags": [
    "terrain",
    "baselayer"
  ]
}
```

### npm-internal package

If you want to include base as part of a node app like `mapbox-studio` or `atlas-server` that may need to run offline (i.e. hotlinking to mapbox.com is not an option) then you can include it in your `package.json`:

    "mapbox-base-css": "https://mapbox-npm.s3.amazonaws.com/package/mapbox-base-css-0.0.1-0da0e3fdcc65a37b6c3a9d1746a0f2f91cfd021a.tgz"
