CartoAssets

Share frontend assets between different CartoDB repositories

Installation

As easy as:

• npm install
• npm install -g markdown-styleguide-generator StyleGenerator installation

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

If you want to check the documenation, it is generated in the dist folder.

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:

• Check you have Sketch last version.
• Open font.sketch file and make your changes.

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):
  • 
  • 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:
  • 

All done!