No description, website, or topics provided.
CoffeeScript CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
naso Merge pull request #7 from neilcarpenter/master
Fix browsersync - upgrade version
Latest commit c0d76be May 29, 2015

README.md

Coffee-bone

Boilerplate for single page app built on CoffeeScript, Backbone, Sass, Gulp, Browserify, amongst other things...

Although it technically works "out of the box" (-ish), really requires some configuration, and probably contains a lot of extra crap you don't need.

Install using NPM

  1. $ cd [YOUR PROJECT FOLDER]
  2. $ npm install coffeebone
  3. $ node node_modules/coffeebone/clean.js
  4. $ node install.js [APP NAMESPACE] optional - just namespaces app in all coffee files
  5. $ npm install
  6. $ gulp

Install

  1. Clone repo into [DIR NAME]
  2. $ cd [DIR NAME]
  3. $ npm install
  4. $ node install.js [APP NAMESPACE] optional - just namespaces app in all coffee files
  5. $ gulp

Gulp tasks

  • $ gulp - development mode

    • Watchify (browserify)
    • Compile Sass
    • Autoprefix CSS
    • Minify XML templates
    • Optimise images
    • BrowserSync (local server)
      • watch for changes in .coffee, .scss, templates.xml and images, trigger repeat
  • $ gulp build - pre-deploy build

    • Browserify
    • Remove console.logs
    • Compile Sass
    • Autoprefix CSS
    • Combine media queries
    • Minify CSS
    • Minify XML templates
    • Concatenate vendor JS
    • Uglify JS (vendor + main application JS)
    • Custom modernizr build based on refs used through app -- TO DO
    • Iconizr -- TO DO
  • Others:

    • Check /gulp/tasks - each file corresponds to an individual gulp task

General FE app structure notes

  • Router.coffee - capture / modify URL hashChange events
  • Nav.coffee - list all available site routes, handle / delegate URL hashChange events
  • AppView.coffee - Core view, all UI bound here. Anything with a deeplink in Wrapper, any modal-only content in ModalManager
  • Wrapper.coffee
    • mapping for all site deeplinked views
    • each view may be an AbstractViewPage or AbstractViewModal
    • handle management of deeplinked pages / modals based on view 'type' and history state
    • trigger sub-route event changing
  • AbstractViewPage / AbstractViewModal - URL based pages, built in methods for page transitions
  • _ModalManager.coffee - custom modal management (non URL-based popups)

Important FE utils / data management

  • API.coffee - use to retrieve all endpoints
  • UserData.coffee - holds all user data, convenience methods to integrate with assumed user API endpoints (login / logout etc)
  • Templates.coffee - all application HTML is loaded via single XML file, this templates wrapper allows getter based on ID
  • Locale.coffee - all localised copy is expected in JSON file format, based on predefined (or detected) ISO-compatible locale code. This class offers wrapper to get localised string based on unique ID.
  • Analytics.coffee - Google Analytics custom event firing, requires custom JSON containing ID / event string mappings.
  • Share.coffee - Wrapper for sharing to various social networks in popup windows (except FB, this should be done via Facebook.coffee class)
  • Others - just look around :)

Included SDKs

These come packaged in wrapper classes that load the SDKs asynchronously and have some helper methods for API interaction

  • Facebook (Facebook.coffee)
  • Google+ (GooglePlus.coffee)

Included JS libs

  • Backbone (+ jQuery + Underscore + Backbone DeepModel)
  • TweenLite.js (+ CSSPlugin + EasePack)

Sass

  • Normalise
  • Custom easing
  • Various helpers + mixins