AI templates

Our house Adobe Illustrator templates for charting, mapping and more.

Quickstart

Using in a project

📌 NOTE: The graphics rigs will run the following commands automatically to pull in the latest templates published to npm.

Install:

yarn add -D @reuters-graphics/style-ai-templates

Use the CLI to unpack templates into a folder in your working directory:

npx get-ai project-files/

You can also pass a minimatch pattern to the --match option to get just some templates.

npx get-ai project-files/ --match "**/ai2html-template.ait"

Quick download

Download the files directly from GitHub:

• ai2html
• flat graphics DEPRECATED

ai2html

Well widths and classes

The graphics rig's well widths (wide, wider, etc.) correspond to the ai2html template's artboards. Here are examples of how the .snap and .skip- classes work.

For Special Reports...

Add this CSS to the very top of your main.scss (before the import statement)

$graphic-narrower: 350px;
$graphic-narrow: 560px;
$well-regular: 635px;
$well-wide: 730px;
$well-wider: 1110px;

Developing these templates

Make changes to any .ait templates and submit them through a PR on this repo.

Once a PR is merged, the library must be published to npm before users will get those changes. To publish, make sure you're on the main branch and run...

yarn publish

... then update the version number (usually a patch version) and publish the library.

When you're done, push the version bump back to GitHub.

You'll need to be added to the public package as a collaborator to push updates to NPM. Ask Jon or Ally to get added to the library or to publish your change for you.