Skip to content

Instantly share code, notes, and snippets.

@cfarm

cfarm/cfgov-refresh front end notes.md

Last active June 27, 2016 16:55
Show Gist options
  • Save cfarm/6e572903514ce084e897dccddf6a44e2 to your computer and use it in GitHub Desktop.
Save cfarm/6e572903514ce084e897dccddf6a44e2 to your computer and use it in GitHub Desktop.
Download ZIP
cfgov-refresh front end notes
Raw
cfgov-refresh front end notes.md

front end walk through notes

  • frontend.sh setup script running locally to build front end

  • scripts.js - builds bundles including modernizr, es-5.shim in global header

  • base.html: base HTML template

-webpack to bundle stuff. webpack-config.js.

  • common_bundle used on all pages
  • wagtail pages bundle
  • logic determines which bundle appears where inside base.html
  • sheer.js = components for sheer pages

Front End Components:

  • wagtail components like organisms/expandable.html are saved as a template
  • associated script for expandable.js loads required dependencies
  • using vanilla JS as much as possible
  • checkDom function: looks for element on html page. if it isn't there then error is thrown.
  • most JS is at the organism level

Protractor for JS browser tests

  • about-deputy-director.js is a good example

Atomic Design

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment