hebeworks / ywdash

Yorkshire Water Hack Dash

Hebe-dash

This README outlines the details of collaborating on this Ember application. A short introduction of this app could easily go here.

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with NPM)
• Bower
• Ember CLI
• PhantomJS

Installation

• git clone <repository-url> this repository
• change into the new directory
• npm install
• bower install
• ember install:npm broccoli-sass
• gem install scss-lint
• npm i ember-cli-scsslint
• npm install ember-cli-bourbon --save-dev
• ember g ember-cli-bourbon
• 'when given the option, resolve to 3.2.1'

Running / Development

• grunt serve ember server (changed to include grunt tasks)
• Visit your app at http://localhost:4200.

SVGs

• We use SVGs to ensure the app looks sharp at all pixel densities (e.g. retina). We use SVG for some icons, and by design some of these also require hover states. If an SVG is used as a bg image, the paths inside cannot be manipulated using CSS, and therefore the SVG code must sit in the markup to achieve it.
• Including lots of SVG code for things like icons will bloat the markup quite a considerable amount and slow page loading speeds, so we lazy load them instead using grunticon
• grunticon (run using grunt svg in terminal) takes a folder full of SVGs (/public/assets/img/svg/embed), converts them to data URIs and injects them into a stylesheet. It then generates & uses grunticon.loader.js to match the generated CSS classnames from the stylesheet against specific markup in the DOM, such as: , and injects the SVG code inside that element. For config options, check Gruntfile.js

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Building

• grunt (production) (changed to include grunt tasks)
• ember build (development)
• ember build --environment production (production)

Deploying

• production code will be in the /dist folder

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox