Skip to main content
CSS

old-starter

Starter/boilerplate/template for interactives

View on GitHub ↗ All repos ←
Commits
74
Files
22
Size
19.2 KB
Langs
4
Created
Jul 18, 2016
Last push
almost 10 years ago
README.md

Template/Starter

A lightweight starting point to create interactives of all sorts.

Prerequisites

On OS X 10.9, aka Mavericks, be sure to have the following libraries installed:

Copy and paste the following code into your terminal if you're starting on a fresh machine that does not have any of those prerequisites.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node

Getting Started

  • Clone starter
  • Go to it cd NEW-PROJECT
  • subl options.sample.js and edit the project name and slug for your project
  • Install the core node libraries like gulp.js and coffeescript npm run deps
  • Then, install dependencies from package.json & bower.json and remove the starter's git history gulp init
  • Create new repo in GitHub web app
  • Add repo in GitHub desktop app, add GitHub URL as remote
  • gulp
  • Develop
  • Want to show internally? gulp github
  • Ready to deploy? gulp s3

Application structure

This starter is a jumping-off-point for all sorts of different interactive dataviz. It tries to take care of all the things you don't want to think of so you can move quickly, but leaving enough room for anything to be possible.

/styl/style.styl

The master style / CSS file is /styl/style.styl, all other .styl files need to be included with @import in style.styl to be compiled into the final style.css file.

/tmpl/partials/body.mustache

This is the only HTML file you need to be modifying, in most cases.

/coffee/app.coffee

This is the main file for the app, where initial variables are defined, data is loaded and cleaned, and the proper chart function to visualize the data is called.

Use

First npm install or perhaps sudo npm install

To run /gulpfile.coffee for development, from the root of the project use npm start or gulp

To deploy to gh-pages, run gulp github

To deploy to S3, run gulp publish

The files in /tmpl/ are mustache templates/partials. The variables for those templates are defined in /options.js

What gulpfile.coffee does

  • gulp init: removes .git and moves PROJECT_README.md to README.md to initialize a new project
  • /tmpl/ is compiled into /build/index.html
  • /styl/style.styl is compiled into build/style.css
  • /coffee/ is compiled into /build/app.js
  • /javascript/ is compiled into /build/lib.js
  • .png and .svg in /img/ is optimized and moved to /build/img/
  • .json and .csv in /data/ is moved to /build/data/
  • Minifies CSS
  • Uglifies JS (vendor and compiled CoffeeScript)
  • Watches all files and compiles them on change
  • Starts a local webserver at localhost:8888
  • Deploy /build/ to gh-pages with gulp github
  • Deploy /build/ to S3 with gulp s3
  • Mirror /build/ on S3 and gh-pages with gulp mirror

Technologies / Libraries used

To-Do

Additions/changes to be made on this boilerplate/starter.