The News Apps Graphic Kit is a boilerplate for embeddable graphics. It was built for the Texas Tribune's News Apps team, but could easily be altered to cater to other organization's/individual's needs.

• Live reloading and viewing powered by BrowserSync
• Compiling of Sass/SCSS with Ruby Sass
• CSS prefixing with autoprefixer
• CSS sourcemaps with gulp-sourcemaps
• CSS compression with csso
• JavaScript linting with jshint
• JavaScript compression with uglifyjs
• Template compiling with nunjucks
• Image compression with gulp-imagemin
• Asset revisioning with gulp-rev and gulp-rev-replace
• pym.js included by default for easy embedding in hostile CMS environments

Run this command in your project's folder:

curl -fsSL https://github.com/texastribune/newsapps-graphic-kit/archive/master.tar.gz | tar -xz --strip-components=1

Next, npm install.

If this is your first time to ever use the kit, you need to authorize your computer: npm run spreadsheet/authorize

Add your Google sheet's ID to the config.json, and override any sheets that need to be processed differently. (keyvalue or objectlist)

Get to work!

To use the commands to deploy your project to Amazon S3, you'll need to add a [profile newsapps] to ~/.aws/config. It should look something like this:

[profile newsapps]
aws_access_key_id=YOUR_UNIQUE_ID
aws_secret_access_key=YOUR_SECRET_ACCESS_KEY

Then you can run these commands to build and deploy:

gulp
npm run deploy

The package will deploy to graphics.texastribune.org/donor-wall. To change the location, update the package.json file.

The graphics kit comes with an empty app/assets folder for you to store images, fonts and data files. The kit works best if you add these files to app/assets/images, app/assets/fonts and app/assets/data. These files will automatically be ignored by git hub, if added to the proper folders, to prevent a storage overload and to keep files locally that may have sensitive information in an open source project.

Yeoman is being considered.

npm run spreadsheet/authorize

Allows your computer to interact with the scraper. Only needs to be done once! Any future uses of the graphic kit can skip this.

npm run spreadsheet/fetch

Pulls down the project's spreadsheet and processes it into the data.json file.

npm run spreadsheet/edit

Opens the project's spreadsheet in your browser.

npm run deploy

Deploys the project.

npm run assets/push

Pushes the raw assets to the S3 bucket.

npm run assets/pull

Pulls the raw assets down to the local environment.