By Jeremy C. F. Lin
Repo w/ artboards and key elements outlined below: https://github.com/The-Politico/tool_ai2html
When creating a new interactive, in your
templates directory, create a folder called
ai2html-resizer-html into your
"ai2html-resizer.html" as a partial at the bottom of your
When creating assets in AI, you have a number of different art board sizes at your disposal. You can see the different sizes available to you here: https://github.com/The-Politico/tool_ai2html/blob/master/politico-graphics.ait
The artboard sizes that are essential for a project are 270px (width) for mobile and then 400px or 600px (for iPad). Our content well on an interactive page is 600px, so unless you are breaking outside of the well, you won't need larger artboards at 720px, 945px or 1050px.
A good example of using a larger artboard is when it needs to be lede art like here: http://www.politico.com/interactives/2017/trump-travel-ban-muslim-visa-decline/
You need to delete any unused artboards, b/c AI2HTML will export them all.
Then save your ai file in the
ai folder and run
ai2html within illustrator (Under
This generates your artboards and a partial (with the name of your ai project) in the root of
src. Your partial is also generated, which you then include as a partial in your
You can make changes directly in CSS, but Jeremy’s work flow is to make the changes in AI and run the script again, as this will overwrite preexisting files (including any custom CSS style changes you made).