design

These are the design resources shared across the Maputnik editor

Install

To install

npm install maputnik/design

Usage

All of the assets are npm installable, from there you can reference them from the node_modules directory.

Logo

The logo comes in three different versions, please don't change the colors if you use it outside of Maputnik.

You can use a logo in the following way

<img src="node_modules/maputnik-design/logos/logo-{type}.{format}" />

Where {format} is either svg or png and {type} is one of

| Type | | | ----- | ------------------------------------------------------- | | Color | | | Black | | | White | |

Note: The white version has a transparent background but is on a black background above so you can see it.

Advanced

Including logos/base.svg in a page will give you full access to all the elements to style as you like, including animation. See ./logos/logo-animated.svg for an example

Hosted logos

The logos are also hosted at

<img src="http://maputnik.github.io/design/logos/logo-{type}.{format}" />

Development

The source logos live in ./src/logos, to build the logos in ./logos run the following script

./scripts/build