generator-globegraphic

generator-globegraphic

Yeoman generator for a Boston Globe graphic. Supports SASS, Compass, Lodash templates, includes Bitbucket/GitHub integration. Concatenates/uglifies/minifies everything to one file.

Also known as MAGIC.

Please note: do not reproduce Boston Globe logos or fonts without written permission.

Prerequisites

• Install Node.js.
• Install hub (on OS X, using Homebrew): brew install hub.
• Install Yeoman: sudo npm install -g yo.
• Install Gulp: sudo npm install -g gulp.
• Install this generator: sudo npm install -g generator-globegraphic.
• Install various CSS utilities: gem install sass compass breakpoint.
• If you want to commit your project to version control (highly recommended), you'll need to create a GitHub or Bitbucket account. Bitbucket offers unlimited free repositories. GitHub does not, but it is a much better tool. You decide.

Update

• To update the generator: sudo npm update -g generator-globegraphic.

Creating a new project

• Create the folder and cd into it: mkdir myProject && cd $_.
• Invoke the generator: yo globegraphic.
• Follow all prompts.

Guide

The generator creates various folders and files. Here's a guide to the important bits.

Editing HTML

Put your graphic's html in html/graphic.html, specifically inside <div id='gf'></div>.

Editing CSS

Put your CSS in css/layout.css (or css/_layout.scss, if you're using Sass).

Editing JavaScript

Put your JavaScript in js/globe.graphic.js, specifically inside the globe.graphic function. If you need to load external libraries (e.g. Leaflet or D3), there are two ways to do it:

1. Use Bower from the command line. For example, to install D3, run bower install d3 --save. For Leaflet: bower install leaflet --save.
2. Download the library manually. Place it in the js/libs folder.

Either way, you'll now have to reference the library in html/js.html. For example, for D3, add <script src='js/libs/d3/d3.js'></script>.

Usage

Development

The following commands will start a server at http://localhost:5000. The generator will auto-reload the browser on file changes. Hit control+c to stop either server.

• gulp standalone for standalone graphic.
• gulp homepage for homepage graphic.

Production

The following commands will create a PROD.jpt. This file will contain everything inlined - HTML, CSS, JS - so you can copy+paste into Methode.

• gulp standalone-prod for standalone graphic.
• gulp homepage-prod for homepage graphic.

Extras

Sublime shortcut

• Install Sublime Text and setup the super-handy subl alias.
• Now, from the command line, run subl globegraphic.sublime-project. Sublime Text will hide all non-essentials folders and files. Much cleaner!

Lodash templates

• Lodash templates are cool! And this generator supports them out of the box. Create a lodash template, place it in js/templates, and make sure to name it *.template (e.g. js/templates/table.template). The generator will automatically compile all templates to js/templates/templates.js. Add this file to html/js.html, and done! To reference the template: window.JST['story.template']({name: "gabriel"}).

License

MIT © The Boston Globe