A starter template for projects. Check out the companion style guide for best practices.
If creating a brand new project from scratch: create a directory and cd
into it, then follow setup instructions for the basic (plain HTML/JS/CSS) or enhanced (node + gulp) version.
If you are contributing to an existing project: clone the repo and run npm i
.
curl -Lk http://bit.ly/2bgptna > Makefile; make boilerplate;
- HTML: Goes in
index.html
file in themain
tag where it says<!-- PUT ALL YOUR HTML HERE-->
. - CSS: Goes in
bundle.css
.critical.css
has some defaults like resets and basic layout stuff, do not modify this. - JS: Goes in
bundle.js
. Do not modifycritical.js
, which handles font loading.
See this guide below on how to use our fonts.
- Transpiles ES6 with Babel
- Stylus for CSS pre-processor
- Bundles and minifies JavaScript with Webpack
- Bundles, minifies, auto-prefixes, and inlines CSS
- Async font loading (using FOUT)
curl -Lk http://bit.ly/2bgptna > Makefile; make enhanced;
gulp
Any changes to the src/
folder will trigger live reload.
- JS: Put JS in
src/js/
, and take a look atentry.js
andgraphic.js
, it has some basic skeleton stuff setup for you. - CSS: Put CSS in
src/css/story/
. You can put everything instory.styl
, or create any new files you want in that directory wich are included automatically. Checkoutsrc/css/base/
for helper variables and functions. - HTML: Put HTML in
src/html/partials/story/
. Be sure to include your partials insrc/html/index.hbs
. - Icons: We have a whole set of svg icons in the
svg
folder. You can add your own too. To use, simply put this code in yourhbs
file,@@include('name-of-icon.svg')
and it will inject it into the HTML.
Run gulp dist
This generates a single html file with inlined css, a single js file, and a folder with assets in the dist folder.
To deploy new dev version on github run make github
To deploy live to s3, you must install awscli and configure your settings. Then run the following, replacing year/month/name
with your own (eg. 2017/01/nba
):
aws s3 sync dist s3://pudding.cool/year/month/name --delete
To force cloudfront to fetch latest html file (replacing id-here
with the cloudfront distro id, and year/month/name
with your project filepath):
aws cloudfront create-invalidation --distribution-id id-here --paths /year/month/name/
Note: For cloudfront you must add extra configuration
In the folder src/js/utils
there a are a bunch of handy helper JS functions.
Super minimial wrapper on basic vanilla dom selection for convenience and cross-browser.
Device sniffing to detect if on mobile hardware.
Async image loading to detect when image completely loaded.
Estimate user location via ip address.
In-house scrollytelling library for enter-exit-step pattern.
Fire simple GA tracking on events.
Get and set the paremeters of the URL in address bar.
- d3-annotation
- lodash.uniqby
- moveto
- jump.js
- nouislider
- geolib
- scrollmagic
- in-view
- enter-view
- ScrollWatch