A generator for Yeoman, specific to the Washington Post
A smart generator encourages using proper data integrity protection techniques.
- Keep original data files separated
maketo keep data manipulations documented
README.mdfor proper documentation
Using a generator speeds up repetitive tasks we don't have the time (or patience) to keep performing.
gruntcommands for frequent tasks, like starting a server or converting preprocessed css.
- Keep ready-to-deploy project in
- Extend with scripts for deployment in your environment
generator-graphic is available on npm:
npm install -g generator-graphic
In a terminal, create a directory for your graphic to live in, and
into it. For example:
# Move into the parent directory of your graphic cd ~/wapo/wapo-static/business/ # Create a new directory for this graphic mkdir reimagining-union-station # Move into this newly created directory cd reimagining-union-station
Then, start the generator:
Follow the prompts:
[?] What is the slug? reimagining-union-station [?] Would you like to use a prebuilt template? No [?] Which libraries would you like to include? (Press <space> to select) >o d3 o underscore ...
To view the graphic locally:
generator-graphic uses bower to manage dependencies. To
add a dependency to the project:
# Install the package bower install <package> --save # Rebuild the project (creates `public/lib/all-min.js`) grunt build
The bower docs have more information on what can be used as
<package> in the above example.
generator-graphic optionally includes Compass/SASS. To compile
This requires Compass to be installed on your machine. If it isn't already, follow these instructions.
generator-graphic installs everything when you create a graphic, but
if you're jumping into someone else's graphic, you have to do this
yourself. Don't fret -- it's easy:
generator-graphic sets up the following directory structure:
project-folder | |-- .gitignore | |-- Gruntfile.js defines grunt commands, like `grunt server` | |-- Makefile encourage automation of data manipulations | |-- README.md project documentation | |-- bower.json defines project dependencies | |-- bower_components location of installed project dependencies | |-- build directory for temporary build files | |-- data data files | |-- node_modules node dependency files, autogenerated | |-- metadata.yaml graphic headline, blurb, byline, etc. | |-- package.json defines project settings | |-- project-files illustrator files, others to be ignored by git | |-- public folder to be deployed to web server | |-- index.html | |-- css | | `-- base.css | | | |-- js | | `-- base.js | | | `-- lib | `-- all.js build automatically through grunt and bower | `-- sass optionally included for compass/sass files `-- base.scss
generator-graphic includes code to get your graphic off the ground.