CartoAssets/README.md

2.4 KiB

CartoAssets NPM version

Share frontend assets between different CartoDB repositories

Installation

As easy as:

  • npm install

Build

If you want to use any of the CartoAssets components, after the installation just run:

  • grunt build

Development

It will generate a UI documentation about the components in this repository:

  • grunt dev

Publish a new version in NPM

In order to publish a new version of CartoAssets you need to:

  • Change version of the package.
  • Be a collaborator of the npm module (Send an email to xavijam[at]cartodb.com).

If you have these previous steps done:

  • npm publish

Publish CartoAssets styleguide and documentation in GH-Pages

Just run this command:

  • grunt publish

How to make changes in the CartoDB icon font

If you want to edit, add or remove any icon in our CartoDB font, you should follow these steps:

Rules for the icons:

  • Size should have at max 500px of width/height.
  • Place the icon accordingly with the grid.
  • Icons should be completely black.
  • Group the icon if it has several parts.
  • Make icons exportable to SVG.
  • Name your icon (layer/group) according to the pattern icon-font_xx_Name, where xx is a unique integer (increase it for each new icon).

When you're done with changes

  • Select all the icons, and export them to app/assets/fonts/icon_font/svgs folder (option should be visible in the bottom corner in your Sketch app):
    • screen shot 2015-01-16 at 11 40 36
    • Take into account that svgs folder is ignored.
  • Open your terminal app and go to the CartoDB root folder.
  • Install your node dependencies: npm install
  • Now we will generate the new icon fonts + stylesheet. Just run: ./node_modules/.bin/gulp
  • Check that your icon-font.css.scss and the cartoIcon fonts have been edited:
    • screen shot 2015-01-16 at 11 02 53

All done!