Getting started

Styled components and elements are managed in a base.css stylesheet. To use base on any Mapbox site, link directly to the source file by adding this line before the closing </head> in your HTML document:

<link href='//mapbox.com/base/latest/base.css' rel='stylesheet' />
Rule of thumb
Read the styleguide or the base.css document before making positioning or typographic adjustments. If base is missing a particular style you need, make a case for it in the repository.

Code style

  • Two space, soft tab indentation
  • Put spaces before { in rule declarations.
  • Use hex color codes #000 unless using rgba. If you use an rgba rule, include a fallback. i.e:
    .illustration {
      background-color: #eee; /* Fallback */
      background-color: rgba(221, 221, 221, 0.75);
    }
  • Site specific styling should be added to a site.css document and not contained as inline rules in your HTML document