Add configurable network name

This is required for the infura provider
Use infura hosted provider if web3 is not available
2018-04-22 20:25:58 +02:00 · 2018-04-22 18:41:51 +02:00
223 changed files with 16913 additions and 29992 deletions
@@ -1,21 +0,0 @@
-# unconventional js
-/blueprints/*/files/
-/vendor/
-
-# compiled output
-/dist/
-/tmp/
-/release/
-
-# dependencies
-/bower_components/
-/node_modules/
-
-# misc
-/coverage/
-!.*
-
-# ember-try
-/.node_modules.ember-try/
-/bower.json.ember-try
-/package.json.ember-try
@@ -25,14 +25,10 @@ module.exports = {
    // node files
    {
      files: [
-        '.eslintrc.js',
-        '.template-lintrc.js',
        'ember-cli-build.js',
        'testem.js',
-        'blueprints/*/index.js',
        'config/**/*.js',
-        'lib/*/index.js',
-        'server/**/*.js'
+        'lib/*/index.js'
      ],
      parserOptions: {
        sourceType: 'script',
@@ -1,26 +1,24 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.

 # compiled output
-/dist/
-/tmp/
+/dist
+/tmp

 # dependencies
-/bower_components/
-/node_modules/
+/node_modules
+/bower_components

 # misc
-/.env*
-/.pnp*
 /.sass-cache
 /connect.lock
-/coverage/
+/coverage/*
 /libpeerconnection.log
-/npm-debug.log*
-/testem.log
-/yarn-error.log
+npm-debug.log*
+yarn-error.log
+testem.log
 .tm_properties

 # ember-try
-/.node_modules.ember-try/
-/bower.json.ember-try
-/package.json.ember-try
+.node_modules.ember-try/
+bower.json.ember-try
+package.json.ember-try
@@ -1,9 +0,0 @@
-'use strict';
-
-module.exports = {
-  extends: 'recommended',
-
-  rules: {
-    'simple-unless': false
-  }
-};
@@ -1,15 +1,10 @@
 ---
 language: node_js
 node_js:
-  - "10"
+  - "6"

 sudo: false
-dist: xenial
-
-notifications:
-  email:
-    on_success: never
-    on_failure: always
+dist: trusty

 addons:
  chrome: stable
@@ -27,6 +22,5 @@ before_install:
  - npm config set spin false

 script:
-  - npm run lint:hbs
  - npm run lint:js
  - npm test
@@ -22,8 +22,7 @@ You will need the following things properly installed on your computer.

 ## Running / Development

-
-* `ember serve` - by default kredits-web connects to the Ethreum Kovan network
+* `ember serve`
 * Visit your app at [http://localhost:4200](http://localhost:4200).
 * Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).

@@ -40,7 +39,6 @@ Make use of the many generators for code, try `ember help generate` for more det

 ### Linting

-* `npm run lint:hbs`
 * `npm run lint:js`
 * `npm run lint:js -- --fix`

@@ -58,12 +56,13 @@ _(You need collaborator permissions on the 5apps Deploy project.)_
 ## Working with locally deployed contracts

 The smart contracts and their JavaScript wrapper library are developed in the
-[kredits-contracts](https://github.com/67P/kredits-contracts) repo/package.
+[truffle-kredits](https://github.com/67P/truffle-kredits) repo/package.

 You can run `kredits-web` on your machine, against a local, simulated Ethereum
-network, provided e.g. by [ganache](http://truffleframework.com/ganache/).
+network, provided e.g. by [ganache](http://truffleframework.com/ganache/) or
+[ganache-cli](https://github.com/trufflesuite/ganache-cli).

-[kredits-contracts](https://github.com/67P/kredits-contracts) holds all the tools
+[truffle-kredits](https://github.com/67P/truffle-kredits) holds all the tools
 to start and set up such a simulated network, as well as to deploy smart
 contracts to it.

@@ -76,28 +75,22 @@ Run a local IPFS deamon in offline mode.
  * Make sure CORS headers are configured. See [IPFS](#ipfs) for more info.
  * `ipfs daemon --offline`

-#### 2. kredits-contracts
+#### 2. truffle-kredits

-Get your local Ethereum development node running. (See [kredits-contracts README](https://github.com/67P/kredits-contracts) 
-for details.
+Get your local Ethereum development node running.

-  * Clone [kredits-contracts](https://github.com/67P/kredits-contracts)
+  * Clone [truffle-kredits](https://github.com/67P/truffle-kredits)
  * `npm install`
-  * `npm run devchain` - runs a local development chain
-  * `npm run bootstrap` - bootstrap runs deploys all the contracts 
-  * `npm link` - make the `kredits-contracts` module linkable as `kredits-contracts` on your machine (currently broken :( )
+  * `npm run ganache` - which is basically: `ganache-cli -p 7545 -i 100` (we use the non-default port for local networks and a fixed network id)
+  * `npm run bootstrap` - bootstrap runs fresh migrations, adds some seed data and writes the address/abi information to JSON that will be used by kredits-web
+  * `npm link` - make the `truffle-kredits` module linkable as `kredits-contracts` on your machine

 #### 3. kredits-web

 With IPFS and Ethereum/ganache running, you can now start this Ember app.

-  * `npm link kredits-contracts` - link the local `kredits-contracts` package
-  * `npm run start:local` - WEB3_PROVIDER_URL=http://localhost:7545 must be set for local settings
-
-If you restart the devchain your network ID changes. So kredits-contracts does not find the correct DAO Kernel address. 
-If that is the case the DAO address must be provided as `KREDITS_KERNEL_ADDRESS` environment variable.
-
-  * `KREDITS_KERNEL_ADDRESS=<0xYOURADDRESS> npm run start:local` - find your address with the `npm run dao:address` command in the kredits-contracts repo.
+  * `npm link kredits-contracts` - link the local `truffle-kredits` package (it will become `kredits-contracts` soon)
+  * `npm start`

 #### IPFS

@@ -1,70 +0,0 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { and, notEmpty } from '@ember/object/computed';
-
-export default Component.extend({
-
-  attributes: null,
-  contributors: Object.freeze([]),
-
-  isValidContributor: notEmpty('contributorId'),
-  isValidKind: notEmpty('kind'),
-  isValidAmount: computed('amount', function() {
-    return parseInt(this.amount, 10) > 0;
-  }),
-  isValidDescription: notEmpty('description'),
-  isValidUrl: notEmpty('url'),
-  isValid: and('isValidContributor',
-               'isValidKind',
-               'isValidAmount',
-               'isValidDescription'),
-
-  init () {
-    this._super(...arguments);
-    this.set('defaultDate', new Date());
-
-    // Default attributes used by reset
-    this.set('attributes', {
-      contributorId: null,
-      kind: null,
-      date: [new Date()],
-      amount: null,
-      description: null,
-      url: null,
-    });
-
-    this.reset();
-  },
-
-  reset () {
-    this.setProperties(this.attributes);
-  },
-
-  actions: {
-
-    submit () {
-      if (!this.isValid) {
-        alert('Invalid data. Please review and try again.');
-        return;
-      }
-
-      const attributes = this.getProperties(Object.keys(this.attributes));
-      const [ date/* , time */ ] = attributes.date[0].toISOString().split('T');
-      attributes.date = date;
-
-      this.set('inProgress', true);
-
-      this.save(attributes)
-        .then((/*contribution*/) => {
-          this.reset();
-        }, err => {
-          console.warn(err);
-          window.alert('Something went wrong. Check the browser console for details.');
-        })
-        .finally(() => this.set('inProgress', false));
-
-    }
-
-  }
-
-});
@@ -1,58 +0,0 @@
-<form {{action "submit" on="submit"}}>
-  <p>
-    <select required onchange={{action (mut contributorId) value="target.value"}}>
-      <option value="" selected disabled hidden>Contributor</option>
-      {{#each contributors as |contributor|}}
-        <option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
-      {{/each}}
-    </select>
-  </p>
-  <p>
-    <select required onchange={{action (mut kind) value="target.value"}}>
-      <option value="" selected disabled hidden>Kind</option>
-      <option value="community" selected={{eq kind "community"}}>Community</option>
-      <option value="design" selected={{eq kind "design"}}>Design</option>
-      <option value="dev" selected={{eq kind "dev"}}>Development</option>
-      <option value="docs" selected={{eq kind "docs"}}>Documentation</option>
-      <option value="ops" selected={{eq kind "ops"}}>IT Operations</option>
-      <option value="special" selected={{eq kind "special"}}>Special</option>
-    </select>
-  </p>
-  <p>
-    {{ember-flatpickr
-      allowInput=false
-      altFormat="F j, Y"
-      altInput=true
-      altInputClass="date-alt"
-      date=date
-      dateFormat="Y-m-d"
-      defaultDate=defaultDate
-      maxDate=defaultDate
-      onChange=(action (mut date))
-    }}
-  </p>
-  <p>
-    {{input type="text"
-            placeholder="500"
-            value=amount
-            class=(if isValidAmount "valid" "")}}
-  </p>
-  <p>
-    {{input type="text"
-            placeholder="Description"
-            value=description
-            class=(if isValidDescription "valid" "")}}
-  </p>
-  <p>
-    {{input type="text"
-            placeholder="URL (optional)"
-            value=url
-            class=(if isValidUrl "valid" "")}}
-  </p>
-  <p class="actions">
-    {{input type="submit"
-            disabled=inProgress
-            value=(if inProgress "Processing" "Save")}}
-  </p>
-</form>
-
@@ -1,13 +1,27 @@
 import Component from '@ember/component';
 import { and, notEmpty } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
-import { isPresent } from '@ember/utils';
+import { inject as injectService } from '@ember/service';
+

 export default Component.extend({
+  kredits: injectService(),

-  kredits: service(),
+  // Default attributes used by reset
+  attributes: {
+    account: null,
+    name: null,
+    kind: 'person',
+    url: null,
+    github_username: null,
+    github_uid: null,
+    wiki_username: null,
+    isCore: false,
+  },

-  attributes: null,
+  didInsertElement() {
+    this._super(...arguments);
+    this.reset();
+  },

  // TODO: add proper address validation
  isValidAccount: notEmpty('account'),
@@ -15,7 +29,6 @@ export default Component.extend({
  isValidURL: notEmpty('url'),
  isValidGithubUID: notEmpty('github_uid'),
  isValidGithubUsername: notEmpty('github_username'),
-  isValidGiteaUsername: notEmpty('gitea_username'),
  isValidWikiUsername: notEmpty('wiki_username'),
  isValid: and(
    'isValidAccount',
@@ -23,56 +36,29 @@ export default Component.extend({
    'isValidGithubUID'
  ),

-  inProgress: false,
-
-  init () {
-    this._super(...arguments);
-    this.setDefaultAttributes();
-    this.reset();
-  },
-
-  setDefaultAttributes () {
-    if (isPresent(this.attributes)) { return; }
-
-    this.set('attributes', {
-      account: null,
-      name: null,
-      kind: 'person',
-      url: null,
-      github_username: null,
-      github_uid: null,
-      gitea_username: null,
-      wiki_username: null
-    });
-  },
-
  reset: function() {
    this.setProperties(this.attributes);
  },

  actions: {
-
-    submit () {
+    submit() {
      if (!this.isValid) {
        alert('Invalid data. Please review and try again.');
        return;
      }

-      const attributes = Object.keys(this.attributes);
-      const contributor = this.getProperties(attributes);
+      let attributes = Object.keys(this.attributes);
+      let contributor = this.getProperties(attributes);
+      let saved = this.save(contributor);

-      this.set('inProgress', true);
+      // The promise handles inProgress
+      this.set('inProgress', saved);

-      this.save(contributor).then(() => {
+      saved.then(() => {
        this.reset();
-      }).catch(err => {
-        console.warn(err);
-        window.alert('Something went wrong. Please check the browser console.');
-      }).finally(() => {
-        this.set('inProgress', false);
+        window.scroll(0,0);
+        window.alert('Contributor added.');
      });
    }
-
  }
-
 });
@@ -1,50 +1,64 @@
 <form {{action "submit" on="submit"}}>
  <p>
-    <label for="c-account">Ethereum account</label>
-    {{input name="account" id="c-account"
-            type="text" value=account
-            placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4"
-            class=(if isValidAccount "valid" "")}}
+    {{input name="is-core"
+            type="checkbox"
+            id="is-core"
+            checked=isCore}}
+    <label for="is-core" class="checkbox">
+      Core team member (can add contributors)
+    </label>
  </p>
  <p>
-    <label for="c-kind">Kind</label>
-    <select required onchange={{action (mut kind) value="target.value"}} id="c-kind">
+    {{input name="account"
+            type="text"
+            placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4"
+            value=account
+            class=(if isValidAccount 'valid' '')}}
+  </p>
+  <p>
+    <select required onchange={{action (mut kind) value="target.value"}}>
      <option value="person" selected={{eq kind "person"}}>Person</option>
      <option value="organization" selected={{eq kind "organization"}}>Organization</option>
    </select>
  </p>
  <p>
-    <label for="c-name">Name</label>
-    {{input name="name" type="text" value=name placeholder="Zero Cool"
-            class=(if isValidName "valid" "") id="c-name"}}
+    {{input name="name"
+            type="text"
+            placeholder="Name"
+            value=name
+            class=(if isValidName 'valid' '')}}
  </p>
  <p>
-    <label for="c-url">URL</label>
-    {{input name="url" type="text" value=url placeholder="http://zerocool.bit"
-            class=(if isValidURL "valid" "") id="c-url"}}
+    {{input name="url"
+            type="text"
+            placeholder="URL"
+            value=url
+            class=(if isValidURL 'valid' '')}}
  </p>
  <p>
-    <label for="c-github-uid">GitHub UID</label>
-    {{input name="github_uid" type="text" value=github_uid placeholder="2342"
-            class=(if isValidGithubUID "valid" "") id="c-github-uid"}}
+    {{input name="github_uid"
+            type="text"
+            placeholder="GitHub UID (123)"
+            value=github_uid
+            class=(if isValidGithubUID 'valid' '')}}
  </p>
  <p>
-    <label for="c-github-username">GitHub username</label>
-    {{input name="github_username" type="text" value=github_username placeholder="zerocool"
-            class=(if isValidGithubUsername "valid" "") id="c-github-username"}}
+    {{input name="github_username"
+            type="text"
+            placeholder="GitHub username"
+            value=github_username
+            class=(if isValidGithubUsername 'valid' '')}}
  </p>
  <p>
-    <label for="c-gitea-username">Gitea username</label>
-    {{input name="gitea_username" type="text" value=gitea_username placeholder="zerocool"
-            class=(if isValidGiteaUsername "valid" "") id="c-gitea-username"}}
-  </p>
-  <p>
-    <label for="c-wiki-username">Wiki username</label>
-    {{input name="wiki_username" type="text" value=wiki_username placeholder="ZeroCool"
-            class=(if isValidWikiUsername "valid" "") id="c-wiki-username"}}
+    {{input name="wiki_username"
+            type="text"
+            placeholder="Wiki Username"
+            value=wiki_username
+            class=(if isValidWikiUsername 'valid' '')}}
  </p>
  <p class="actions">
-    {{input type="submit" disabled=inProgress
-            value=(if inProgress "Processing" "Save")}}
+    {{input type="submit"
+            disabled=(is-pending inProgress)
+            value=(if (is-pending inProgress) 'Processing' 'Save')}}
  </p>
 </form>
@@ -3,9 +3,21 @@ import { computed } from '@ember/object';
 import { and, notEmpty } from '@ember/object/computed';

 export default Component.extend({
+  // Default attributes used by reset
+  attributes: {
+    contributorId: null,
+    kind: 'community',
+    amount: null,
+    description: null,
+    url: null,
+  },

-  attributes: null,
-  contributors: Object.freeze([]),
+  didInsertElement() {
+    this._super(...arguments);
+    this.reset();
+  },
+
+  contributors: [],

  isValidContributor: notEmpty('contributorId'),
  isValidAmount: computed('amount', function() {
@@ -17,24 +29,6 @@ export default Component.extend({
               'isValidAmount',
               'isValidDescription'),

-  init () {
-    this._super(...arguments);
-
-    // Default attributes used by reset
-    this.set('attributes', {
-      contributorId: null,
-      kind: 'community',
-      amount: null,
-      description: null,
-      url: null,
-    });
-  },
-
-  didInsertElement() {
-    this._super(...arguments);
-    this.reset();
-  },
-
  reset: function() {
    this.setProperties(this.attributes);
  },
@@ -60,5 +54,4 @@ export default Component.extend({
      });
    }
  }
-
 });
@@ -20,25 +20,25 @@
    {{input type="text"
            placeholder="100"
            value=amount
-            class=(if isValidAmount "valid" "")}}
+            class=(if isValidAmount 'valid' '')}}
  </p>
  <p>
    {{input type="text"
            placeholder="Description"
            value=description
-            class=(if isValidDescription "valid" "")}}
+            class=(if isValidDescription 'valid' '')}}
  </p>
  <p>
    {{input type="text"
            placeholder="URL (optional)"
            value=url
-            class=(if isValidUrl "valid" "")}}
+            class=(if isValidUrl 'valid' '')}}
  </p>
  <p class="actions">
    {{input type="submit"
            disabled=(is-pending inProgress)
-            value=(if (is-pending inProgress) "Processing" "Save")}}
-    {{#link-to "index"}}Back{{/link-to}}
+            value=(if (is-pending inProgress) 'Processing' 'Save')}}
+    {{#link-to 'index'}}Back{{/link-to}}
  </p>
 </form>

@@ -1,64 +0,0 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-
-let categoryColors = {
-  community: "#fb6868",
-  design: "#fbe468",
-  dev: "#e068fb",
-  docs: "#97fb68",
-  ops: "#8f68fb",
-}
-
-export default Component.extend({
-
-  contributions: null,
-  chartOptions: Object.freeze({
-    legend: {
-      display: false
-    }
-  }),
-
-  chartData: computed('contributions', function() {
-    let kredits = this.contributions
-                      .filterBy('vetoed', false)
-                      .map(c => {
-                        return { kind: c.kind, amount: c.amount }
-                      })
-                      .reduce(function (kinds, c) {
-                        if (c.kind in kinds) {
-                          kinds[c.kind] = kinds[c.kind] + c.amount
-                        } else {
-                          kinds[c.kind] = c.amount;
-                        }
-                        return kinds;
-                      }, {});
-
-    return {
-      datasets: [{
-        data: [
-          kredits['community'],
-          kredits['design'],
-          kredits['dev'],
-          kredits['ops'],
-          kredits['docs'],
-        ],
-        borderColor: [
-          categoryColors.community,
-          categoryColors.design,
-          categoryColors.dev,
-          categoryColors.ops,
-          categoryColors.docs,
-        ],
-        borderWidth: 1
-      }],
-      labels: [
-        'Community',
-        'Design',
-        'Development',
-        'Operations & Infrastructure',
-        'Documentation'
-      ],
-    }
-  })
-
-});
@@ -1,7 +0,0 @@
-<div class="chart">
-  {{ember-chart type="doughnut"
-                data=chartData
-                options=chartOptions
-                width=200
-                height=200}}
-</div>
@@ -1,64 +0,0 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { sort } from '@ember/object/computed';
-import { isPresent } from '@ember/utils';
-import { inject as service } from '@ember/service';
-
-export default Component.extend({
-
-  tagName: 'div',
-  classNames: ['contributions'],
-
-  showQuickFilter: false,
-  hideSmallContributions: false,
-  contributorId: null,
-  contributionKind: null,
-
-  kredits: service(),
-
-  contributorsSorting: Object.freeze(['name:asc']),
-  contributors: sort('kredits.contributors', 'contributorsSorting'),
-
-  contributorsActive: computed('contributors.[]', 'contributions', function() {
-    let activeIds = this.contributions.mapBy('contributorId')
-                                      .map(id => id.toString())
-                                      .uniq();
-    return this.contributors.filter(c => {
-      return activeIds.includes(c.id.toString());
-    });
-  }),
-
-  contributionKinds: computed('contributions.[]', function() {
-    return this.contributions.mapBy('kind').uniq();
-  }),
-
-  contributionsFiltered: computed('contributions.[]', 'hideSmallContributions', 'contributorId', 'contributionKind', function() {
-    return this.contributions.filter(c => {
-      let included = true;
-
-      if (this.hideSmallContributions &&
-          c.amount <= 500) { included = false; }
-
-      if (isPresent(this.contributorId) &&
-          c.contributorId.toString() !== this.contributorId.toString()) { included = false; }
-
-      if (isPresent(this.contributionKind) &&
-          c.kind !== this.contributionKind) { included = false; }
-
-      return included;
-    });
-  }),
-
-  actions: {
-
-    veto (contributionId) {
-      if (this.contractInteractionEnabled) {
-        this.vetoContribution(contributionId);
-      } else {
-        window.alert('Only members can veto contributions. Please ask someone to set you up.');
-      }
-    }
-
-  }
-
-});
@@ -1,58 +0,0 @@
-{{#if showQuickFilter}}
-  <div class="quick-filter">
-    <p>
-      <label class="filter-contributor">
-        Contributor:
-        <select onchange={{action (mut contributorId) value="target.value"}}>
-          <option value="" selected>all</option>
-          {{#each contributorsActive as |contributor|}}
-            <option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
-          {{/each}}
-        </select>
-      </label>
-
-      <label class="filter-contribution-kind">
-        Kind:
-        <select onchange={{action (mut contributionKind) value="target.value"}}>
-          <option value="" selected>all</option>
-          {{#each contributionKinds as |kind|}}
-            <option value={{kind}} selected={{eq contributionKind kind}}>{{capitalize-string kind}}</option>
-          {{/each}}
-        </select>
-      </label>
-
-      <label class="filter-contribution-size">
-        {{input type="checkbox" checked=hideSmallContributions}}
-        Hide small contributions
-      </label>
-    </p>
-  </div>
-{{/if}}
-
-<ul class="contribution-list">
-  {{#each contributionsFiltered as |contribution|}}
-    <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
-      <p class="meta">
-        <span class="recipient">{{user-avatar contributor=contribution.contributor}}</span>
-        <span class="category {{contribution.kind}}">({{contribution.kind}})</span>
-        <span class="title">
-          {{#if contribution.url}}
-            <a href={{contribution.url}} target="_blank" rel="noopener" title={{contribution.description}}>{{contribution.description}}</a>
-          {{else}}
-            {{contribution.description}}
-          {{/if}}
-        </span>
-      </p>
-      <p class="kredits-amount">
-        <span class="amount">{{contribution.amount}}</span><span class="symbol">₭S</span>
-      </p>
-      {{#unless contribution.vetoed}}
-        {{#unless (is-confirmed-contribution contribution)}}
-          <p class="voting">
-            <button {{action "veto" contribution.id}} class="small danger">veto</button>
-          </p>
-        {{/unless}}
-      {{/unless}}
-    </li>
-  {{/each}}
-</ul>
@@ -1,18 +1,20 @@
 import Component from '@ember/component';
-import { inject as service } from '@ember/service';

 export default Component.extend({

-  router: service(),
-
  tagName: 'table',
  classNames: 'contributor-list',
  selectedContributor: null,

  actions: {

-    openContributorDetails(contributor) {
-      this.router.transitionTo('dashboard.contributors.show', contributor);
+    toggleContributorInfo(contributor) {
+      if (contributor.get('showMetadata')) {
+        contributor.set('showMetadata', false);
+      } else {
+        this.contributors.setEach('showMetadata', false);
+        contributor.set('showMetadata', true);
+      }
    }

  }
@@ -1,19 +1,27 @@
 <tbody>
-  {{#each contributorList as |c|}}
-    <tr role="button" class={{if (is-current-user c.contributor) "current-user"}} {{action "openContributorDetails" c.contributor}}>
+  {{#each contributors as |contributor|}}
+    <tr class="{{if contributor.isCurrentUser 'current-user'}}" {{action "toggleContributorInfo" contributor}}>
      <td class="person">
-        {{user-avatar contributor=c.contributor}} {{c.contributor.name}}
+        <img class="avatar" src={{contributor.avatarURL}}>
+        {{contributor.name}}
      </td>
      <td class="kredits">
-        <span class="amount">
-          {{#if showUnconfirmedKredits}}
-            {{c.amountTotal}}
-          {{else}}
-            {{c.amountConfirmed}}
-          {{/if}}
-        </span>
+        <span class="amount">{{contributor.balance}}</span>
        <span class="symbol">₭S</span>
      </td>
    </tr>
+    <tr class="metadata {{if contributor.isCurrentUser 'current-user'}} {{if contributor.showMetadata 'visible'}}">
+      <td colspan="2">
+        <ul>
+          <li><a href="https://testnet.etherscan.io/address/{{contributor.account}}">Inspect Ethereum transactions</a></li>
+          {{#if contributor.ipfsHash}}
+            <li><a href="https://ipfs.io/ipfs/{{contributor.ipfsHash}}">Inspect IPFS profile</a></li>
+          {{/if}}
+        </ul>
+        {{#if contributor.showMetadata}}
+          <pre>{{contributor.ipfsData}}</pre>
+        {{/if}}
+      </td>
+    </tr>
  {{/each}}
 </tbody>
@@ -1,15 +0,0 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-
-export default Component.extend({
-  tagName: "",
-  account: null,
-
-  iconComponentName: computed('account.site', function() {
-    if (this.account.site.match(/github|gitea|wiki/)) {
-      return 'icon-account-' + this.account.site.replace(/\./g, '-');
-    } else {
-      return 'icon-web-globe';
-    }
-  })
-});
@@ -1,4 +0,0 @@
-<a href={{account.url}} target="_blank" rel="noopener" title="{{account.username}} on {{account.site}}">
-  <span class="site">{{account.site}}</span>
-  {{component iconComponentName}}
-</a>
@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: ""
-});
@@ -1,6 +0,0 @@
-<svg class="icon-gitea" width="400" height="400" version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-  <g fill-rule="evenodd">
-    <path d="m235.61 136.7 7e-3 32.7 4.493 2.189c2.471 1.204 4.628 2.25 4.793 2.324s0.3-15.626 0.3-34.889v-35.024h-9.6l7e-3 32.7m-22.336 30.528c-2.787 0.548-5.894 2.175-8.11 4.244-2.296 2.145-1.694 0.967-24.197 47.328l-11.164 23v4.6c0 4.305 0.076 4.75 1.185 6.942 2.815 5.56 1.055 4.606 69.415 37.629l4.2 2.029h4.221c10.104 0 11.144-1.319 26.676-33.8 0.999-2.09 4.15-8.57 7.001-14.4s6.916-14.2 9.033-18.6l3.849-8 0.01-4.219c0.02-8.49-2.644-11.721-14.326-17.371-4.215-2.038-11.264-5.461-15.664-7.606-15.241-7.429-22.802-11.07-23.125-11.137-0.418-0.086-1.177 1.299-5.112 9.333l-3.234 6.6 1.19 2.2c0.654 1.21 1.308 3.038 1.454 4.063l0.265 1.862 5.747 2.8c22.047 10.742 22.975 15.314 9.007 44.377l-3.317 6.902 1.162 2.098c3.865 6.974-0.923 15.098-8.898 15.098-12.557 0-13.717-18.335-1.278-20.2l1.842-0.276 3.101-6.462c12.037-25.079 11.953-25.952-3.232-33.53l-7.333-3.659-2.319 1.032c-1.276 0.567-3.151 1.153-4.167 1.301l-1.848 0.269-6.785 13.855-6.786 13.854 1.109 1.747c6.109 9.633-5.532 20.771-14.552 13.924-6.729-5.108-4.39-16.742 3.633-18.073 0.812-0.134 1.71-0.318 1.996-0.408 0.429-0.136 6.592-12.372 13.118-26.044l1.37-2.87-0.782-1.33c-3.586-6.099 0.331-14.253 7.353-15.306l1.683-0.252 3.969-8.045c2.183-4.425 4.019-8.168 4.08-8.319s-2.979-1.758-6.755-3.571c-8.092-3.885-10.4-4.452-14.685-3.609" />
-    <path class="fg" d="m73.4 97.876c-2.903 0.376-8.068 1.377-8.8 1.705-0.44 0.197-2.915 1.007-5.5 1.8s-4.7 1.617-4.7 1.831c0 0.213-0.225 0.388-0.5 0.388-0.63 1e-3 -5.615 2.344-5.893 2.771-0.114 0.175-0.837 0.638-1.607 1.029-5.482 2.788-14.835 11.523-18.63 17.4-0.639 0.99-1.274 1.89-1.409 2-0.659 0.534-4.752 8.933-5.555 11.4-0.502 1.54-1.048 2.98-1.213 3.2-0.587 0.782-2.031 7.531-2.489 11.633-0.256 2.292-0.61 4.167-0.785 4.167-0.443 0-0.403 17.45 0.042 18.305 0.199 0.382 0.566 2.748 0.816 5.258 0.493 4.939 1.847 12.516 2.428 13.578 0.198 0.363 0.83 2.369 1.405 4.459 1.927 7.009 10.26 22.927 12.44 23.764 0.303 0.116 0.55 0.481 0.55 0.812 0 0.813 10.667 11.552 12.3 12.383 0.715 0.364 1.3 0.821 1.3 1.017 0 0.195 0.945 0.934 2.1 1.642s2.19 1.41 2.3 1.561 1.28 0.875 2.6 1.609c1.32 0.735 2.67 1.552 3 1.816s1.95 1.086 3.6 1.827c1.65 0.74 3.101 1.486 3.224 1.658 0.123 0.171 1.741 0.865 3.596 1.542s3.557 1.384 3.783 1.572c0.226 0.187 2.388 0.907 4.804 1.599s4.753 1.423 5.193 1.624c1.299 0.593 7.258 1.856 12.2 2.586 2.53 0.374 4.96 0.83 5.4 1.013 1.151 0.48 8.262 1.165 15.067 1.45l5.866 0.247 0.877 2.594c0.903 2.673 4.652 10.529 5.195 10.884 0.168 0.11 0.585 0.83 0.928 1.6 0.685 1.538 1.927 3.686 2.313 4 0.135 0.11 0.826 1.19 1.536 2.4 1.544 2.634 4.561 7.175 5.293 7.968 0.289 0.313 0.975 1.236 1.525 2.051 1.729 2.563 7.039 9.405 8.557 11.025 0.244 0.26 1.523 1.692 2.843 3.183 3.476 3.925 7.354 7.774 10.261 10.183 1.397 1.157 2.629 2.223 2.739 2.368s1.096 0.884 2.191 1.643c1.094 0.758 2.33 1.681 2.745 2.051s1.229 0.911 1.809 1.203 1.884 1.026 2.897 1.632c1.952 1.167 7.201 3.093 8.428 3.093 0.402 0 0.73 0.18 0.73 0.4 0 0.511 115.46 0.557 115.77 0.046 0.121-0.194 1.074-0.482 2.119-0.639 2.437-0.365 7.765-2.307 9.27-3.378 0.64-0.456 1.334-0.829 1.542-0.829 0.451 0 5.639-3.687 8.597-6.111 2.854-2.337 5.633-5.107 8.718-8.689 1.42-1.65 2.681-3.09 2.8-3.2 0.581-0.536 5.161-6.76 5.812-7.9 0.409-0.715 0.869-1.3 1.023-1.3 0.153 0 0.938-1.125 1.742-2.5 2.068-3.533 4.108-6.822 4.561-7.352 0.213-0.248 1.043-1.755 1.845-3.348s1.62-3.1 1.818-3.348c0.687-0.864 5.069-9.661 5.555-11.152 0.269-0.825 0.642-1.5 0.829-1.5s0.878-1.396 1.536-3.101c0.658-1.706 1.671-4.047 2.251-5.203 0.581-1.156 1.405-3.116 1.832-4.356 0.426-1.239 0.934-2.453 1.129-2.696 0.194-0.244 0.946-2.154 1.671-4.244s1.446-3.89 1.602-4c0.155-0.11 0.964-2.36 1.797-5 0.832-2.64 1.627-4.89 1.766-5s0.861-2.27 1.604-4.8c0.742-2.53 1.484-4.782 1.649-5.003 0.164-0.222 0.872-2.562 1.573-5.2 0.701-2.639 1.412-4.977 1.58-5.197s0.965-3.19 1.77-6.6 1.623-6.488 1.817-6.84c0.195-0.353 0.919-3.503 1.611-7 0.692-3.498 1.431-6.678 1.642-7.068 0.211-0.389 0.938-4.169 1.616-8.4 0.677-4.23 1.388-8.052 1.579-8.492 0.192-0.44 0.708-3.77 1.147-7.4 4.258-35.198 1.497-55.451-8.208-60.199l-2.219-1.086-7.473 0.266c-4.111 0.146-7.834 0.417-8.274 0.602-0.801 0.336-13.842 0.941-52 2.412-11.22 0.433-22.2 0.881-24.4 0.997-2.2 0.115-11.334 0.415-20.298 0.665l-16.298 0.455-0.204 69.922-9.392-4.634-8e-3 -65.272-19.3-0.277c-10.615-0.153-19.84-0.441-20.5-0.642-0.66-0.2-6.69-0.551-13.4-0.779-21.82-0.743-58.18-2.495-59-2.843-0.44-0.187-4.04-0.453-8-0.591s-11.34-0.508-16.4-0.822c-8.365-0.519-22.619-0.685-25.6-0.298m13.657 31.23c0.269 0.173 0.809 3.742 1.313 8.694 0.471 4.62 1.021 8.76 1.221 9.2 0.201 0.44 0.561 2.42 0.801 4.4 0.709 5.856 2.382 15.937 2.787 16.8 0.207 0.44 0.943 3.68 1.636 7.2s1.4 6.58 1.571 6.8 0.803 2.56 1.405 5.2c0.601 2.64 1.333 5.34 1.627 6 0.293 0.66 1.193 3.63 2 6.6 0.808 2.97 1.597 5.49 1.754 5.6s0.884 2.27 1.614 4.8c0.731 2.53 1.455 4.69 1.608 4.8 0.154 0.11 0.868 2.09 1.587 4.4 0.72 2.31 1.494 4.429 1.721 4.71 0.226 0.28 0.341 0.567 0.255 0.637-0.263 0.215-9.713-1.339-10.37-1.704-0.337-0.188-1.237-0.468-2-0.623-4-0.814-10.947-2.703-11.712-3.185-0.481-0.304-1.325-0.675-1.875-0.825-1.377-0.377-5.355-1.954-5.6-2.22-0.11-0.12-1.447-0.841-2.971-1.604-1.524-0.762-3.216-1.791-3.759-2.286s-1.16-0.9-1.372-0.9c-1.422 0-11.329-9.68-12.558-12.27-0.347-0.731-0.775-1.33-0.951-1.33-0.593 0-4.638-8.175-5.591-11.3-0.519-1.705-1.071-3.1-1.226-3.1s-0.372-0.495-0.482-1.1c-0.111-0.605-0.599-3.08-1.084-5.5-1.119-5.58-1.528-15.681-0.814-20.111 0.516-3.208 1.895-8.141 2.372-8.489 0.15-0.11 0.752-1.19 1.338-2.4 2.053-4.245 6.611-8.836 11.098-11.177 1.43-0.746 2.69-1.485 2.8-1.643 0.28-0.402 6.231-2.23 8.4-2.58 0.99-0.16 2.003-0.454 2.251-0.654 0.248-0.199 2.678-0.513 5.4-0.697s5.039-0.357 5.149-0.385c0.11-0.029 0.406 0.08 0.657 0.242m131.79 38.066c2.262 0.371 16.092 6.678 15.866 7.236-0.061 0.151-1.897 3.894-4.08 8.319l-3.969 8.045-1.683 0.252c-7.022 1.053-10.939 9.207-7.353 15.306l0.782 1.33-1.37 2.87c-6.526 13.672-12.689 25.908-13.118 26.044-0.286 0.09-1.184 0.274-1.996 0.408-8.023 1.331-10.362 12.965-3.633 18.073 9.02 6.847 20.661-4.291 14.552-13.924l-1.109-1.747 6.786-13.854 6.785-13.855 1.848-0.269c1.016-0.148 2.891-0.734 4.167-1.301l2.319-1.032 7.333 3.659c15.185 7.578 15.269 8.451 3.232 33.53l-3.101 6.462-1.842 0.276c-12.439 1.865-11.279 20.2 1.278 20.2 7.975 0 12.763-8.124 8.898-15.098l-1.162-2.098Line truncated
-  </g>
-</svg>
@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: ""
-});
@@ -1,8 +0,0 @@
-<svg id="svg825" class="icon-github" width="260" height="260" enable-background="new 0 0 212.4575 186.23" version="1.1" viewBox="0 0 260 260" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-  <g transform="translate(23.766 36.885)">
-    <path d="m151.79 86.234c-7.078 0.1229-14.154 0.5605-21.232 0.7069-12.318 0.248-24.64 0.5664-36.961 0.512-11.176-0.0472-22.358-0.9728-33.518-0.7052-7.3164 0.1776-14.373 2.2948-20.131 7.584-9.9472 9.1368-12.522 21-11.314 33.807 1.92 20.357 9.2716 31.449 29.115 37.064 15.793 4.4704 31.963 5.2088 48.199 4.9744 5.254 0 10.51 0.1367 15.758-0.0292 12.723-0.4064 25.264-2.2072 37.358-6.3596 10.846-3.7225 18.799-10.691 22.572-22.166 2.6736-8.1288 3.7148-16.388 2.5544-24.853-1.7772-12.959-13.275-30.86-32.4-30.535zm-81.576 59.996c-8.836 0-16-8.9551-16-20 0-11.045 7.164-20 16-20s16 8.9553 16 20c0 11.045-7.164 20-16 20zm76 0c-8.836 0-16-8.9551-16-20 0-11.045 7.164-20 16-20s16 8.9553 16 20c0 11.045-7.164 20-16 20z" fill="none"/>
-    <path class="fg" d="m200.25 59.188c-2.5076-3.4493-4.3632-6.3888-3.8748-11.44 0.6796-7.0664-0.3536-14.396-1.3204-21.518-1.2188-8.9843-3.5236-17.74-7.1776-26.23-9.0332 1.9356-17.981 3.49-25.963 8.0976-8.4648 4.8908-16.695 10.215-25.08 15.25-0.9532 0.5704-2.3124 0.8848-3.3848 0.7032-17.967-3.1368-35.92-3.0196-53.898-0.086-1.3632 0.2244-3.0724-0.2345-4.2948-0.9608-4.4436-2.6604-8.6564-5.7344-13.123-8.3516-11.656-6.844-23.66-12.822-37.494-14.59-0.3928 0.8597-0.7188 1.4785-0.9612 2.1253-4.164 11.22-6.6424 22.844-7.4276 34.82-0.2872 4.3516-0.6092 8.8048 0 13.072 0.3456 2.4296-4e-3 3.8788-1.3924 5.6132-4.8516 6.0488-8.6368 12.717-11.102 20.219-4.6972 14.295-4.4004 28.861-2.2756 43.475 1.7268 11.974 4.7344 23.537 11.324 33.873 13.186 20.682 32.892 29.774 55.572 31.705 19.308 1.6464 38.8 1.1992 58.213 1.2364 13.855 0.0251 27.57-1.4924 40.715-6.6389 20.375-7.9727 33.859-22.604 40.275-44.166 3.7344-12.545 5.2324-25.396 4.8144-38.498-0.4412-13.81-4.0504-26.566-12.144-37.711zm-18.609 82.435c-3.7736 11.475-11.727 18.444-22.572 22.166-12.094 4.1524-24.635 5.9532-37.358 6.3596-5.248 0.1659-10.504 0.0292-15.758 0.0292-16.236 0.2344-32.406-0.504-48.199-4.9744-19.844-5.6152-27.195-16.707-29.115-37.064-1.2072-12.807 1.3672-24.67 11.314-33.807 5.7576-5.2892 12.814-7.4064 20.131-7.584 11.16-0.2676 22.342 0.658 33.518 0.7052 12.32 0.0544 24.642-0.264 36.961-0.512 7.0784-0.1464 14.154-0.584 21.232-0.7069 19.125-0.3243 30.623 17.576 32.4 30.535 1.1604 8.4647 0.1192 16.724-2.5544 24.853z"/>
-    <ellipse class="fg" cx="70.214" cy="126.23" rx="16" ry="20"/>
-    <ellipse class="fg" cx="146.21" cy="126.23" rx="16" ry="20"/>
-  </g>
-</svg>
@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: ""
-});
@@ -1,8 +0,0 @@
-<svg class="icon-wiki" width="120" height="120" version="1.1" viewBox="0 0 120 120" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-  <g transform="translate(18.1,3)">
-    <polygon class="fg" transform="translate(-6.2,9)" points="6.2 5 45.7 20.5 45.7 91 6.2 75.5"/>
-    <polygon class="fg" transform="translate(-6.2,9)" points="90 5 50.5 20.5 50.5 91 90 75.5"/>
-    <polygon class="fg" transform="translate(-6.2,9)" points="87 88 87 81.8 60.4 91"/>
-    <polygon class="fg" transform="translate(-6.2,9)" points="9.2 88 9.2 81.8 34.9 91"/>
-  </g>
-</svg>
@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: ""
-});
@@ -1,3 +0,0 @@
-<svg class="icon-web-globe" width="60" height="60" enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 60 60" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-  <path class="fg" d="m48.1 14.3c-0.4-0.5-0.9-1-1.4-1.5-4.3-4.2-10.2-6.8-16.7-6.8s-12.4 2.6-16.7 6.8c-0.5 0.5-1 1-1.4 1.5-3.7 4.2-5.9 9.7-5.9 15.7s2.2 11.5 5.8 15.7c0.4 0.5 0.9 1 1.4 1.5 4.3 4.2 10.3 6.8 16.8 6.8s12.5-2.6 16.8-6.9c0.5-0.5 0.9-0.9 1.4-1.5 3.6-4.1 5.8-9.6 5.8-15.6s-2.2-11.5-5.9-15.7zm3.9 14.7h-8.1c-0.1-3-1-7.3-2.4-10.5 1.8-0.8 3.5-1.8 5.1-3 3.1 3.6 5.1 8.5 5.4 13.5zm-21-20.1c3 2.3 5.8 5.2 7.6 8.5-2.4 0.9-4.6 1.3-7.6 1.4zm-2 9.9c-3-0.1-5.2-0.6-7.6-1.4 1.8-3.3 4.6-6.3 7.6-8.5zm0 2v8.2h-10.8c0.1-3 0.9-6.8 2.3-9.8 2.7 1 5.5 1.5 8.5 1.6zm0 10.2v8c-3 0.1-5.9 0.7-8.6 1.7-1.4-3-2.1-5.7-2.3-9.7zm0 10v10.1c-3-2.3-5.8-5.3-7.7-8.6 2.4-0.9 4.7-1.4 7.7-1.5zm2 0c3 0.1 5.3 0.6 7.7 1.5-1.9 3.4-4.7 6.3-7.7 8.6zm0-2v-8h10.8c-0.1 4-0.9 6.7-2.3 9.7-2.6-1-5.5-1.5-8.5-1.7zm0-10v-8.2c3-0.1 5.8-0.7 8.5-1.6 1.4 3 2.2 6.8 2.3 9.8zm9.5-12.3c-1.7-3.2-4.1-6-6.9-8.3 4.4 0.6 8.4 2.7 11.5 5.6-1.4 1.1-3 1.9-4.6 2.7zm-14.1-8.4c-2.9 2.3-5.2 5.2-6.9 8.3-1.6-0.7-3.2-1.6-4.6-2.6 3.1-2.9 7.1-5 11.5-5.7zm-12.9 7.2c1.6 1.2 3.3 2.2 5.1 3-1.5 3.3-2.3 7.5-2.4 10.5h-8.2c0.3-5 2.3-9.9 5.5-13.5zm-5.5 15.5h8.1c0.1 4 1 7.2 2.4 10.5-1.8 0.8-3.5 1.8-5.1 3-3.2-3.7-5.1-8.5-5.4-13.5zm11.4 12.2c1.7 3.2 4.1 6.1 7 8.4-4.5-0.7-8.5-2.8-11.6-5.8 1.5-1 3-1.8 4.6-2.6zm14.2 8.5c2.9-2.4 5.3-5.2 7-8.4 1.6 0.7 3.2 1.6 4.6 2.6-3.1 3-7.2 5-11.6 5.8zm13-7.3c-1.6-1.2-3.3-2.2-5.1-3 1.4-3.2 2.3-6.5 2.4-10.5h8.1c-0.3 5.1-2.2 9.9-5.4 13.5z"/>
-</svg>
@@ -2,7 +2,7 @@
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
       version="1.1" x="0px" y="0px" viewBox="0 0 132 100"
       enable-background="new 0 0 100 100" xml:space="preserve">
-    <path id="path-comet"
+    <path id="path-comet" 
          d="M79.062,24.173L79.062,24.173l-0.021-0.011c-0.068-0.03-0.137-0.062-0.204-0.093L42.392,7.337
             c0,0,3.065,14.104,4.458,18.019l0,0c0,0-41.754-12.481-46.85-13.67c1.67,6.52,30.607,62.492,30.607,62.492
             c5.848,11.873,19.394,18.485,33.522,18.485c19.811,0,35.87-16.059,35.87-35.869C100,42.313,91.418,29.837,79.062,24.173z">
@@ -10,5 +10,5 @@
  </svg>
 </p>
 <p>
-  Loading data...
+  Loading data from Ethereum...
 </p>
@@ -1,20 +1,12 @@
 {{#each proposals as |proposal|}}
-  <li data-proposal-id={{proposal.id}} class={{if proposal.isExecuted "confirmed" "unconfirmed"}}>
-    <p class="meta">
-      <span class="category {{proposal.kind}}">♥ ({{proposal.kind}})</span>
-      <span class="recipient">{{proposal.contributor.name}}:</span>
-    </p>
-    <p class="kredits-amount">
-      <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
-    </p>
-    <p class="description">
-      <span class="description">{{proposal.description}}</span>
-    </p>
-    <p class="voting">
-      {{#unless proposal.isExecuted}}
-        <span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span>
-        <button {{action "confirm" proposal.id}}>+1</button>
-      {{/unless}}
-    </p>
+  <li data-proposal-id={{proposal.id}} title="({{proposal.kind}}) {{proposal.description}}">
+    <span class="category {{proposal.kind}}">♥</span>
+    <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
+    for <span class="recipient">{{proposal.contributor.name}}</span>
+    <span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span>
+
+    {{#unless proposal.isExecuted}}
+      <button {{action "confirm" proposal.id}}>+1</button>
+    {{/unless}}
  </li>
 {{/each}}
@@ -1,30 +0,0 @@
-import Component from '@ember/component';
-import { alias } from '@ember/object/computed';
-import { computed } from '@ember/object';
-
-const SIZES = {
-  'small':  '128', // pixels
-  'medium': '256',
-  'large':  '512'
-}
-
-export default Component.extend({
-  contributor: null,
-  tagName: 'img',
-  classNames: ['avatar'],
-  classNameBindings: ['size'],
-  attributeBindings: ['src', 'title'],
-  size: 'small',
-
-  src: alias('avatarURL'),
-  title: alias('contributor.name'),
-
-  avatarURL: computed('contributor.github_uid', 'size', function() {
-    const github_uid = this.contributor.github_uid;
-
-    if (github_uid) {
-      return `https://avatars2.githubusercontent.com/u/${github_uid}?v=3&s=${SIZES[this.size]}`;
-    }
-  })
-
-});
@@ -1,6 +1,4 @@
 import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';

 export default Controller.extend({
-  kredits: service(),
 });
@@ -1,30 +0,0 @@
-import Controller from '@ember/controller';
-import { alias, filterBy, sort } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
-
-export default Controller.extend({
-
-  kredits: service(),
-
-  contributors: alias('kredits.contributors'),
-  minedContributors: filterBy('contributors', 'id'),
-
-  contributorsSorting: Object.freeze(['name:asc']),
-  sortedContributors: sort('minedContributors', 'contributorsSorting'),
-
-  actions: {
-
-    save (contribution) {
-      const contributor = this.contributors.findBy('id', contribution.contributorId);
-      contribution.contributorIpfsHash = contributor.ipfsHash;
-
-      return this.kredits.addContribution(contribution)
-        .then(contribution => {
-          this.transitionToRoute('index');
-          return contribution;
-        });
-    }
-
-  }
-
-});
@@ -1,18 +0,0 @@
-import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
-
-export default Controller.extend({
-
-  kredits: service(),
-
-  actions: {
-
-    save (attributes) {
-      return this.kredits
-                 .updateContributor(this.model.id, attributes)
-                 .then(() => this.transitionToRoute('index'))
-    }
-
-  }
-
-});
@@ -1,18 +0,0 @@
-import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
-
-export default Controller.extend({
-
-  kredits: service(),
-
-  actions: {
-
-    save (contributor) {
-      return this.kredits
-                 .addContributor(contributor)
-                 .then(() => this.transitionToRoute('index'))
-    }
-
-  }
-
-});
@@ -1,57 +0,0 @@
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-import { alias, not, sort } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
-
-export default Controller.extend({
-  kredits: service(),
-
-  showDetailsPane: false,
-
-  currentBlock: alias('kredits.currentBlock'),
-
-  contributions: alias('kredits.contributions'),
-  contributionsConfirmed: alias('kredits.contributionsConfirmed'),
-  contributionsUnconfirmed: alias('kredits.contributionsUnconfirmed'),
-
-  contributionsSorting: Object.freeze(['date:desc', 'time:desc', 'id:desc']),
-  contributionsUnconfirmedSorted: sort('contributionsUnconfirmed', 'contributionsSorting'),
-  contributionsConfirmedSorted: sort('contributionsConfirmed', 'contributionsSorting'),
-
-  kreditsByContributor: alias('kredits.kreditsByContributor'),
-
-  kreditsToplistSorting: computed('showUnconfirmedKredits', function(){
-    return this.showUnconfirmedKredits ? ['amountTotal:desc'] : ['amountConfirmed:desc'];
-  }),
-  kreditsToplist: sort('kreditsByContributor', 'kreditsToplistSorting'),
-
-  showUnconfirmedKredits: true,
-  hideUnconfirmedKredits: not('showUnconfirmedKredits'),
-
-  showQuickFilterUnconfirmed: false,
-  showQuickFilterConfirmed: false,
-
-  actions: {
-
-    vetoContribution (contributionId) {
-      this.kredits.veto(contributionId).then(transaction => {
-        console.debug('[controllers:index] Veto submitted to Ethereum blockhain: '+transaction.hash);
-      });
-    },
-
-    confirmProposal (proposalId) {
-      this.kredits.vote(proposalId).then(transaction => {
-        console.debug('[controllers:index] Vote submitted to Ethereum blockhain: '+transaction.hash);
-      });
-    },
-
-    toggleQuickFilterUnconfirmed () {
-      this.toggleProperty('showQuickFilterUnconfirmed');
-    },
-
-    toggleQuickFilterConfirmed () {
-      this.toggleProperty('showQuickFilterConfirmed');
-    }
-
-  }
-});
@@ -1,12 +0,0 @@
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-
-export default Controller.extend({
-
-  roleName: computed('model.isCore', 'totalKreditsEarned', function() {
-    if (this.model.isCore) return 'Core Contributor';
-    if (this.model.totalKreditsEarned <= 5000) return 'Newcomer';
-    return 'Contributor';
-  })
-
-});
@@ -0,0 +1,37 @@
+import Controller from '@ember/controller';
+import { alias, filter, filterBy, sort } from '@ember/object/computed';
+import { inject as injectService } from '@ember/service';
+
+export default Controller.extend({
+  kredits: injectService(),
+
+  contributors: alias('kredits.contributors'),
+  contributorsWithKredits: filter('contributors', function(contributor) {
+    return contributor.get('balance') !== 0;
+  }),
+  contributorsSorting: ['balance:desc'],
+  contributorsSorted: sort('contributorsWithKredits', 'contributorsSorting'),
+
+  proposals: alias('kredits.proposals'),
+  proposalsOpen: filterBy('proposals', 'isExecuted', false),
+  proposalsClosed: filterBy('proposals', 'isExecuted', true),
+  proposalsSorting: ['id:desc'],
+  proposalsClosedSorted: sort('proposalsClosed', 'proposalsSorting'),
+  proposalsOpenSorted: sort('proposalsOpen', 'proposalsSorting'),
+
+  actions: {
+    confirmProposal(proposalId) {
+      this.kredits.vote(proposalId).then(transaction => {
+        window.confirm('Vote submitted to Ethereum blockhain: '+transaction.hash);
+      });
+    },
+
+    save(contributor) {
+      return this.kredits.addContributor(contributor)
+        .then((contributor) => {
+          this.contributors.pushObject(contributor);
+          return contributor;
+        });
+    }
+  }
+});
@@ -1,9 +1,9 @@
 import Controller from '@ember/controller';
 import { alias, filterBy } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
+import { inject as injectService } from '@ember/service';

 export default Controller.extend({
-  kredits: service(),
+  kredits: injectService(),

  contributors: alias('kredits.contributors'),
  minedContributors: filterBy('contributors', 'id'),
@@ -1,7 +0,0 @@
-import Helper from '@ember/component/helper';
-
-export default Helper.extend({
-  compute([string]) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-  }
-});
@@ -1,20 +0,0 @@
-import Helper from '@ember/component/helper';
-import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
-
-export default Helper.extend({
-
-  kredits: service(),
-  currentBlock: alias('kredits.currentBlock'),
-
-  compute([contribution]) {
-    if (contribution.vetoed) {
-      return 'vetoed';
-    } else if (contribution.confirmedAt > this.currentBlock) {
-      return 'unconfirmed';
-    } else {
-      return 'confirmed'
-    }
-  }
-
-});
@@ -1,15 +0,0 @@
-import Helper from '@ember/component/helper';
-import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
-
-export default Helper.extend({
-
-  kredits: service(),
-  currentBlock: alias('kredits.currentBlock'),
-
-  compute([contribution]) {
-    return !contribution.vetoed &&
-           (contribution.confirmedAt <= this.currentBlock);
-  }
-
-});
@@ -1,16 +0,0 @@
-import Helper from '@ember/component/helper';
-import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
-import { isPresent } from '@ember/utils';
-
-export default Helper.extend({
-
-  kredits: service(),
-  currentUser: alias('kredits.currentUser'),
-
-  compute([contributor]) {
-    return isPresent(contributor) && isPresent(this.currentUser) &&
-            contributor.account === this.currentUser.account;
-  }
-
-});
@@ -1,28 +0,0 @@
-import EmberObject from '@ember/object';
-import bignumber from 'kredits-web/utils/cps/bignumber';
-
-export default EmberObject.extend({
-
-  // Contract
-  id: null,
-  contributorId: null,
-  amount: null,
-  confirmedAt: bignumber('confirmedAtBlock', 'toNumber'),
-  vetoed: null,
-  ipfsHash: null,
-
-  creatorAccount: null,
-
-  // IPFS
-  kind: null,
-  description: null,
-  details: null,
-  url: null,
-  ipfsData: '',
-
-  init () {
-    this._super(...arguments);
-    this.set('details', {});
-  }
-
-});
@@ -1,14 +1,12 @@
+import { computed } from '@ember/object';
 import EmberObject from '@ember/object';
 import bignumber from 'kredits-web/utils/cps/bignumber';
-import kreditsValue from 'kredits-web/utils/cps/kredits';

 export default EmberObject.extend({
  // Contract
  id: bignumber('idRaw', 'toString'),
  account: null,
-  balance: kreditsValue('balanceRaw'),
-  totalKreditsEarned: bignumber('totalKreditsEarnedRaw', 'toNumber'),
-  contributionsCount: bignumber('contributionsCountRaw', 'toNumber'),
+  balance: bignumber('balanceRaw', 'toNumber'),
  isCore: false,
  ipfsHash: null,

@@ -19,6 +17,15 @@ export default EmberObject.extend({
  github_username: null,
  github_uid: null,
  wiki_username: null,
-  ipfsData: ''
+  ipfsData: '',

+  // Deprecated
+  isCurrentUser: false,
+
+  avatarURL: computed('github_uid', function() {
+    let github_uid = this.github_uid;
+    if (github_uid) {
+      return `https://avatars2.githubusercontent.com/u/${github_uid}?v=3&s=128`;
+    }
+  }),
 });
@@ -3,7 +3,6 @@ import { alias } from '@ember/object/computed';
 import bignumber from 'kredits-web/utils/cps/bignumber';

 export default EmberObject.extend({
-
  // Contract
  id: bignumber('idRaw', 'toString'),
  creatorAccount: null,
@@ -20,13 +19,7 @@ export default EmberObject.extend({
  // IPFS
  kind: null,
  description: null,
-  details: null,
+  details: {},
  url: null,
  ipfsData: '',
-
-  init () {
-    this._super(...arguments);
-    this.set('details', {});
-  }
-
 });
@@ -7,21 +7,10 @@ const Router = EmberRouter.extend({
 });

 Router.map(function() {
-  this.route('dashboard', function() {
-    this.route('contributors', function() {
-      this.route('show', { path: ':id' });
-    });
-  });
+  this.route('spinner');
  this.route('proposals', function() {
    this.route('new');
  });
-  this.route('contributions', function() {
-    this.route('new');
-  });
-  this.route('contributors', function() {
-    this.route('new');
-    this.route('edit', { path: ':id/edit' });
-  });
 });

 export default Router;
@@ -1,17 +1,13 @@
-import { inject as service } from '@ember/service';
+import { inject as injectService } from '@ember/service';
 import Route from '@ember/routing/route';

 export default Route.extend({
-  kredits: service(),
+  kredits: injectService(),

  beforeModel(transition) {
    const kredits = this.kredits;

    return kredits.setup().then(() => {
-      kredits.get('kredits').preflightChecks().catch((error) => {
-        console.error('Kredits preflight check failed!');
-        console.error(error);
-      });
      if (kredits.get('accountNeedsUnlock')) {
        if (confirm('It looks like you have an Ethereum wallet available. Please unlock your account.')) {
          transition.retry();
@@ -23,7 +19,7 @@ export default Route.extend({
  },

  afterModel() {
-    return this.kredits.loadInitialData()
+    return this.kredits.loadContributorsAndProposals()
      .then(() => {
        this.kredits.addContractEventHandlers();
      });
@@ -1,29 +0,0 @@
-import { inject as service } from '@ember/service';
-import Route from '@ember/routing/route';
-import { alias } from '@ember/object/computed';
-
-export default Route.extend({
-
-  kredits: service(),
-  contributors: alias('kredits.contributors'),
-
-  model(params) {
-    return this.kredits.contributors.findBy('id', params.id);
-  },
-
-  setupController (controller, model) {
-    this._super(controller, model);
-
-    controller.set('attributes', {
-      account: model.account,
-      name: model.name,
-      kind: model.kind,
-      url: model.url,
-      github_username: model.github_username,
-      github_uid: model.github_uid,
-      gitea_username: model.gitea_username,
-      wiki_username: model.wiki_username
-    });
-  }
-
-});
@@ -1,24 +0,0 @@
-import { inject as service } from '@ember/service';
-import Route from '@ember/routing/route';
-import { alias } from '@ember/object/computed';
-
-export default Route.extend({
-
-  kredits: service(),
-  contributors: alias('kredits.contributors'),
-
-  model (params) {
-    return this.contributors.findBy('id', params.id);
-  },
-
-  activate () {
-    this.controllerFor('dashboard')
-        .set('showDetailsPane', true);
-  },
-
-  deactivate () {
-    this.controllerFor('dashboard')
-        .set('showDetailsPane', false);
-  }
-
-});
@@ -1,9 +1,4 @@
 import Route from '@ember/routing/route';

 export default Route.extend({
-
-  redirect () {
-    this.transitionTo('dashboard');
-  }
-
 });
@@ -3,211 +3,98 @@ import Kredits from 'npm:kredits-contracts';
 import RSVP from 'rsvp';

 import Service from '@ember/service';
-import EmberObject from '@ember/object';
 import { computed } from '@ember/object';
 import { alias, notEmpty } from '@ember/object/computed';
 import { isEmpty } from '@ember/utils';

-import groupBy from 'kredits-web/utils/group-by';
-import formatKredits from 'kredits-web/utils/format-kredits';
-
 import config from 'kredits-web/config/environment';
 import Contributor from 'kredits-web/models/contributor'
 import Proposal from 'kredits-web/models/proposal'
-import Contribution from 'kredits-web/models/contribution'
+

 export default Service.extend({

-  currentBlock: null,
  currentUserAccounts: null, // default to not having an account. this is the wen web3 is loaded.
  currentUser: null,
-  contributors: null,
-  contributions: null,
-  proposals: null,
-
  currentUserIsContributor: notEmpty('currentUser'),
  currentUserIsCore: alias('currentUser.isCore'),
  hasAccounts: notEmpty('currentUserAccounts'),
-
  accountNeedsUnlock: computed('currentUserAccounts', function() {
    return this.currentUserAccounts && isEmpty(this.currentUserAccounts);
  }),

-  contributionsUnconfirmed: computed('contributions.[]', 'currentBlock', function() {
-    return this.contributions.filter(contribution => {
-      return contribution.confirmedAt > this.currentBlock;
-    });
-  }),
-
-  contributionsConfirmed: computed('contributions.[]', 'currentBlock', function() {
-    return this.contributions
-               .filterBy('vetoed', false)
-               .filter(contribution => {
-                 return contribution.confirmedAt <= this.currentBlock;
-               });
-  }),
-
-  kreditsByContributor: computed('contributionsUnconfirmed.@each.vetoed', 'contributors.[]', function() {
-    const contributionsUnconfirmed = this.contributionsUnconfirmed.filterBy('vetoed', false);
-    const contributionsGrouped = groupBy(contributionsUnconfirmed, 'contributorId');
-    const contributorsWithUnconfirmed = contributionsGrouped.map(c => c.value.toString());
-    const contributorsWithOnlyConfirmed = this.contributors.reject(c => contributorsWithUnconfirmed.includes(c.id))
-
-    const kreditsByContributor = contributionsGrouped.map(c => {
-      const amountUnconfirmed = c.items.mapBy('amount').reduce((a, b) => a + b);
-      const contributor = this.contributors.findBy('id', c.value.toString());
-
-      return EmberObject.create({
-        contributor: contributor,
-        amountUnconfirmed: amountUnconfirmed,
-        amountConfirmed: contributor.totalKreditsEarned,
-        amountTotal: contributor.totalKreditsEarned + amountUnconfirmed
-      })
-    });
-
-    contributorsWithOnlyConfirmed.forEach(c => {
-      kreditsByContributor.push(EmberObject.create({
-        contributor: c,
-        amountUnconfirmed: 0,
-        amountConfirmed: c.totalKreditsEarned,
-        amountTotal: c.totalKreditsEarned
-      }));
-    })
-
-    return kreditsByContributor;
-  }),
-
-  init () {
-    this._super(...arguments);
-    this.set('contributors', []);
-    this.set('proposals', []);
-    this.set('contributions', []);
-  },
-
-  // This is called in the application route's beforeModel(). So it is
-  // initialized before everything else, and we can rely on the ethProvider and
-  // the potential currentUserAccounts to be available
-  getEthProvider () {
-    let ethProvider;
-
-    return new RSVP.Promise(async (resolve) => {
-      function instantiateWithoutAccount () {
-        console.debug('[kredits] Creating new instance from npm module class');
-        console.debug(`[kredits] providerURL: ${config.web3ProviderUrl}`);
-        ethProvider = new ethers.providers.JsonRpcProvider(config.web3ProviderUrl);
-        resolve({
-          ethProvider: ethProvider,
-          ethSigner: null
-        });
-      }
-
-      async function instantiateWithAccount (web3Provider, context) {
+  // this is called in the routes beforeModel().  So it is initialized before everything else
+  // and we can rely on the ethProvider and the potential currentUserAccounts to be available
+  getEthProvider: function() {
+    return new RSVP.Promise((resolve) => {
+      let ethProvider;
+      let networkId;
+      let networkName;
+      if (typeof window.web3 !== 'undefined') {
        console.debug('[kredits] Using user-provided instance, e.g. from Mist browser or Metamask');
-        ethProvider = new ethers.providers.Web3Provider(web3Provider);
-        // const network = await ethProvider.getNetwork();
-        ethProvider.listAccounts().then(accounts => {
-          context.set('currentUserAccounts', accounts);
-          const ethSigner = accounts.length === 0 ? null : ethProvider.getSigner();
-          resolve({
-            ethProvider,
-            ethSigner
-          });
+        networkId = parseInt(window.web3.version.network);
+        ethProvider = new ethers.providers.Web3Provider(
+          window.web3.currentProvider,
+          { chainId: networkId }
+        );
+        ethProvider.listAccounts().then((accounts) => {
+          this.set('currentUserAccounts', accounts);
+          resolve(ethProvider, ethProvider.getSigner());
        });
-      }
-
-      if (window.ethereum) {
-        try {
-          // Request account access if needed
-          await window.ethereum.enable();
-          // Acccounts now exposed
-          instantiateWithAccount(window.ethereum, this);
-        } catch (error) {
-          instantiateWithoutAccount();
-        }
-      }
-      // Legacy dapp browsers...
-      else if (window.web3) {
-        instantiateWithAccount(window.web3.currentProvider, this);
-      }
-      // Non-dapp browsers...
-      else {
-        instantiateWithoutAccount();
+      } else {
+        console.debug('[kredits] Creating new instance from npm module class');
+        networkId = parseInt(config.contractMetadata.networkId);
+        networkName = config.contractMetadata.networkName;
+        console.log(networkName);
+        ethProvider = new ethers.providers.InfuraProvider({ chainId: networkId, name: networkName });
+        resolve(ethProvider, null);
      }
    });
  },

-  setup () {
-    return this.getEthProvider().then((providerAndSigner) => {
-      let kredits = new Kredits(providerAndSigner.ethProvider, providerAndSigner.ethSigner, {
-        addresses: { Kernel: config.kreditsKernelAddress },
-        apm: config.kreditsApmDomain,
-        ipfsConfig: config.ipfs
-      });
+  setup() {
+    return this.getEthProvider().then((ethProvider, ethSigner) => {
+      let kredits = new Kredits(ethProvider, ethSigner);
      return kredits
        .init()
-        .then(async (kredits) => {
+        .then((kredits) => {
          this.set('kredits', kredits);
-          this.set('currentBlock', await kredits.provider.getBlockNumber());

          if (this.currentUserAccounts && this.currentUserAccounts.length > 0) {
            this.getCurrentUser.then((contributorData) => {
              this.set('currentUser', contributorData);
            });
          }
-
          return kredits;
        });
    });
  },

  totalSupply: computed(function() {
-    return this.kredits.Token.functions.totalSupply().then(total => {
-      return formatKredits(total);
-    })
+    return this.kredits.Token.functions.totalSupply();
  }),

-  totalKreditsEarned: computed(function() {
-    return this.kredits.Contribution.functions.totalKreditsEarned(true)
-      .then(total => total.toNumber());
-  }),
+  contributors: [],
+  proposals: [],

-
-  loadInitialData () {
+  loadContributorsAndProposals() {
    return this.getContributors()
               .then(contributors => this.contributors.pushObjects(contributors))
-               .then(() => this.getContributions())
-               .then(contributions => this.contributions.pushObjects(contributions))
+               .then(() => this.getProposals())
+               .then(proposals => this.proposals.pushObjects(proposals))
  },

-  addContributor (attributes) {
-    if (attributes.github_uid) {
-      const uidInt = parseInt(attributes.github_uid);
-      attributes.github_uid = uidInt;
-    }
-
+  addContributor(attributes) {
    console.debug('[kredits] add contributor', attributes);

-    return this.kredits.Contributor.add(attributes, { gasLimit: 350000 })
-      .then(data => {
+    return this.kredits.Contributor.add(attributes)
+      .then((data) => {
        console.debug('[kredits] add contributor response', data);
+        return Contributor.create(attributes);
      });
  },

-  updateContributor (id, attributes) {
-    if (attributes.github_uid) {
-      const uidInt = parseInt(attributes.github_uid);
-      attributes.github_uid = uidInt;
-    }
-
-    console.debug('[kredits] update contributor', attributes);
-
-    return this.kredits.Contributor.updateProfile(id, attributes, { gasLimit: 350000 })
-      .then(data => {
-        console.debug('[kredits] updateProfile response', data);
-      });
-  },
-
-  getContributors () {
+  getContributors() {
    return this.kredits.Contributor.all()
      .then((contributors) => {
        return contributors.map((contributor) => {
@@ -216,25 +103,10 @@ export default Service.extend({
      });
  },

-  addContribution (attributes) {
-    console.debug('[kredits] add contribution', attributes);
-
-    return this.kredits.Contribution.addContribution(attributes, { gasLimit: 300000 })
-      .then(data => {
-        console.debug('[kredits] add contribution response', data);
-        attributes.contributor = this.contributors.findBy('id', attributes.contributorId);
-        const contribution = Contribution.create(attributes);
-        // TODO receive from wrapper
-        contribution.set('confirmedAtBlock', data.blockNumber + 40320);
-        this.contributions.pushObject(contribution);
-        return contribution;
-      });
-  },
-
-  addProposal (attributes) {
+  addProposal(attributes) {
    console.debug('[kredits] add proposal', attributes);

-    return this.kredits.Proposal.addProposal(attributes)
+    return this.kredits.Operator.addProposal(attributes)
      .then((data) => {
        console.debug('[kredits] add proposal response', data);
        attributes.contributor = this.contributors.findBy('id', attributes.contributorId);
@@ -242,8 +114,8 @@ export default Service.extend({
      });
  },

-  getProposals () {
-    return this.kredits.Proposal.all()
+  getProposals() {
+    return this.kredits.Operator.all()
      .then((proposals) => {
        return proposals.map((proposal) => {
          proposal.contributor = this.contributors.findBy('id', proposal.contributorId.toString());
@@ -252,36 +124,16 @@ export default Service.extend({
      });
  },

-  getContributions () {
-    return this.kredits.Contribution.all({page: {size: 200}})
-      .then(contributions => {
-        return contributions.map(contribution => {
-          contribution.contributor = this.contributors.findBy('id', contribution.contributorId.toString());
-          return Contribution.create(contribution);
-        });
-      });
-  },
-
-  vote (proposalId) {
+  vote(proposalId) {
    console.debug('[kredits] vote for', proposalId);

-    return this.kredits.Proposal.functions.vote(proposalId)
-      .then(data => {
+    return this.kredits.Operator.functions.vote(proposalId)
+      .then((data) => {
        console.debug('[kredits] vote response', data);
        return data;
      });
  },

-  veto (contributionId) {
-    console.debug('[kredits] veto against', contributionId);
-
-    return this.kredits.Contribution.functions.veto(contributionId, { gasLimit: 300000 })
-      .then(data => {
-        console.debug('[kredits] veto response', data);
-        return data;
-      });
-  },
-
  getCurrentUser: computed('kredits.provider', function() {
    if (isEmpty(this.currentUserAccounts)) {
      return RSVP.resolve();
@@ -289,6 +141,7 @@ export default Service.extend({
    return this.kredits.Contributor
      .functions.getContributorIdByAddress(this.get('currentUserAccounts.firstObject'))
      .then((id) => {
+        id = id.toNumber();
        // check if the user is a contributor or not
        if (id === 0) {
          return RSVP.resolve();
@@ -303,51 +156,19 @@ export default Service.extend({
  },

  // Contract events
-  addContractEventHandlers () {
-    this.kredits.Contributor
-      .on('ContributorProfileUpdated', this.handleContributorChange.bind(this))
-      .on('ContributorAccountUpdated', this.handleContributorChange.bind(this))
-      .on('ContributorAdded', this.handleContributorChange.bind(this))
-
-    this.kredits.Contribution
-      .on('ContributionVetoed', this.handleContributionVetoed.bind(this))
-
-    this.kredits.Proposal
+  addContractEventHandlers() {
+    // Operator events
+    this.kredits.Operator
      .on('ProposalCreated', this.handleProposalCreated.bind(this))
      .on('ProposalVoted', this.handleProposalVoted.bind(this))
      .on('ProposalExecuted', this.handleProposalExecuted.bind(this));

+    // Token events
    this.kredits.Token
      .on('Transfer', this.handleTransfer.bind(this));
  },

-  async handleContributorChange (contributorId, ...args) {
-    console.debug('[kredits] Contributor add/update event received for ID', contributorId);
-    console.debug('[kredits] Event data:', args);
-    const contributorData = await this.kredits.Contributor.getById(contributorId);
-    const newContributor = Contributor.create(contributorData);
-
-    const oldContributor = this.contributors.findBy('id', contributorId.toString());
-    if (oldContributor) {
-      console.debug('[kredits] old contributor', oldContributor);
-      this.contributors.removeObject(oldContributor);
-    }
-
-    console.debug('[kredits] new contributor', newContributor);
-    this.contributors.pushObject(newContributor);
-  },
-
-  handleContributionVetoed (contributionId) {
-    console.debug('[kredits] ContributionVetoed event received for ', contributionId);
-    const contribution = this.contributions.findBy('id', contributionId);
-    console.debug('[kredits] contribution', contribution);
-
-    if (contribution) {
-      contribution.set('vetoed', true);
-    }
-  },
-
-  handleProposalCreated (proposalId) {
+  handleProposalCreated(proposalId) {
    let proposal = this.findProposalById(proposalId);

    if (proposal) {
@@ -355,7 +176,7 @@ export default Service.extend({
      return;
    }

-    this.kredits.Proposal.getById(proposalId)
+    this.kredits.Operator.getById(proposalId)
      .then((proposal) => {
        proposal.contributor = this.contributors.findBy('id', proposal.contributorId.toString());
        this.proposals.pushObject(Proposal.create(proposal));
@@ -363,7 +184,7 @@ export default Service.extend({
  },

  // TODO: We may want to reload that proposal to show the voter as voted
-  handleProposalVoted (proposalId, voterId, totalVotes) {
+  handleProposalVoted(proposalId, voterId, totalVotes) {
    let proposal = this.findProposalById(proposalId);

    if (proposal) {
@@ -371,7 +192,7 @@ export default Service.extend({
    }
  },

-  handleProposalExecuted (proposalId, contributorId, amount) {
+  handleProposalExecuted(proposalId, contributorId, amount) {
    let proposal = this.findProposalById(proposalId);

    if (proposal.get('isExecuted')) {
@@ -383,10 +204,10 @@ export default Service.extend({

    this.contributors
        .findBy('id', contributorId.toString())
-        .incrementProperty('balance', amount);
+        .incrementProperty('balance', amount.toNumber());
  },

-  handleTransfer (from, to, value) {
+  handleTransfer(from, to, value) {
    value = value.toNumber();

    this.contributors
@@ -1,56 +0,0 @@
-button, input[type=submit], .button {
-  display: inline-block;
-  padding: 0.6rem 2rem;
-  background-color: rgba(22, 21, 40, 0.6);
-  border: 1px solid rgba(22, 21, 40, 1);
-  border-radius: 3px;
-  color: $primary-color;
-  font-weight: 500;
-  text-decoration: none;
-  text-transform: uppercase;
-  cursor: pointer;
-  letter-spacing: 0.1em;
-
-  &+button, &+input[type=submit], &+.button {
-    margin-left: 0.5rem;
-  }
-
-  &:hover {
-    background-color: rgba(22, 21, 40, 0.8);
-  }
-
-  &:active, &.active {
-    border-color: $primary-color;
-  }
-
-  &.small {
-    font-size: 0.8rem;
-    padding: 0.2rem 0.8rem;
-  }
-
-  &.danger {
-    color: $red;
-    background-color: rgba(40, 21, 21, 0.6);
-    border-color: rgba(40, 21, 21, 1);
-
-    &:hover {
-      background-color: rgba(40, 21, 21, 0.8);
-    }
-    &:active, &.active {
-      border-color: $red;
-    }
-  }
-
-  &.green {
-    color: $green;
-    background-color: rgba(21, 40, 21, 0.6);
-    border-color: rgba(21, 40, 21, 1);
-
-    &:hover {
-      background-color: rgba(21, 40, 21, 0.8);
-    }
-    &:active, &.active {
-      border-color: $green;
-    }
-  }
-}
@@ -5,11 +5,4 @@ $green: #97fb68;
 $yellow: #fbe468;
 $red: #fb6868;

-$primary-color: $blue;
-
-$body-text-color: #fff;
-
-#topbar {
-  background-color: rgba(255, 0, 255, .2);
-}
-
+$primaryColor: $blue;
@@ -1,89 +1,31 @@
-main {
-  padding: 1rem 2rem;
-
-  @include media-max(small) {
-    padding: 1rem;
-  }
-
-  &#dashboard {
-    width: 100%;
-    display: grid;
-    grid-row-gap: 2rem;
-    grid-template-areas:
-      "stats"
-      "contributions";
-  }
-
-  &.center-column {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    section {
-      width: 600px;
-      max-width: 100%;
-
-      header {
-        text-align: center;
-      }
-    }
-  }
-}
-
-@media (min-width: 550px) {
-  main {
-    &#dashboard {
-      grid-column-gap: 4rem;
-      grid-row-gap: 2rem;
-      grid-template-columns: 2fr 4fr;
-      grid-template-areas:
-        "stats contributions";
-
-      &.with-details {
-        grid-column-gap: 3rem;
-        grid-template-columns: 2fr 4fr 2fr;
-        grid-template-areas:
-          "stats contributions details";
-      }
-    }
-  }
-}
-
-main section {
-  margin-bottom: 5rem;
-
+section {
+  @include outer-container;
+  margin-bottom: 8rem;
  &:first-of-type {
-    margin-top: 2rem;
+    margin-top: 6rem;
  }

-  @include media-max(small) {
+  @include media($mobile) {
    margin-bottom: 5rem;
+    &:first-of-type {
+      margin-top: 2rem;
+    }
  }

  header {
-    margin-bottom: 3rem;
+    @include span-columns(12);
+    padding-bottom: 3rem;
+    text-align: center;
+    // background-color: purple;

-    &.with-nav {
-      display: grid;
-      grid-template-columns: auto 5rem;
-      grid-template-areas:
-        "title" "actions";
+    @include media($mobile) {
+      @include span-columns(10);
+      @include shift(1);
+      padding-bottom: 2rem;
    }

-    h2 {
-      display: inline-block;
-      // padding-left: 1.2rem;
-    }
-
-    nav {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-end;
-    }
-
-    @include media-max(small) {
-      margin-bottom: 2rem;
+    div.content {
+      @include span-columns(12);
    }
  }
 }
@@ -1,33 +0,0 @@
-$breakpoints-max: (
-  small: 600px,
-  medium: 960px,
-  large: 1280px
-);
-
-$breakpoints-min: (
-  small: 601px,
-  medium: 961px,
-  large: 1281px
-);
-
-@mixin media-max($screen-size) {
-  @if map-has-key($breakpoints-max, $screen-size) {
-    @media (max-width: map-get($breakpoints-max, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}
-
-@mixin media-min($screen-size) {
-  @if map-has-key($breakpoints-min, $screen-size) {
-    @media (min-width: map-get($breakpoints-min, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}
@@ -2,7 +2,6 @@
  margin: 0;
  padding: 0;
  box-sizing: border-box;
-  font-size: 14px;
 }

 *:hover, *:active, *:focus {
@@ -11,19 +10,23 @@
  -webkit-tap-highlight-color: transparent;
 }

-@import "mediaqueries";
+@import "bourbon/bourbon";
+@import "settings/neat";
+@import "neat/neat";
+@import "settings/breakpoints";
@import "layout";
@import "colors";

 $font-family-sans: 'Open Sans', sans-serif;

 body {
-  font-family: $font-family-sans;
-  font-weight: 300;
-  background-image: linear-gradient(to bottom, rgba(22, 21, 40, .4), rgba(0, 0, 0, .75)), url('/img/bg.jpg');
+  background-image: url('/img/bg.jpg');
  background-repeat: none;
  background-attachment: fixed;
-  color: $body-text-color;
+  font-family: $font-family-sans;
+  font-size: 14px;
+  font-weight: 300;
+  color: #fff;
 }

@media screen and (min-width: 900px) {
@@ -40,32 +43,26 @@ h1, h2, h3, h4, h5, input, button {

 section {
  h2 {
-    font-size: 1.4rem;
-    color: $primary-color;
+    font-size: 2.8rem;
+    color: $primaryColor;
+    @include media($mobile) {
+      font-size: 2rem;
+    }
  }

-  &#people {
+  &#contributors {
    .content {
      p.stats {
-        margin-bottom: 1rem;
+        padding-top: 3rem;
        font-size: 1rem;
        color: white;
        text-align: center;
        span.number {
          font-weight: 600;
        }
-      }
-    }
-  }
-
-  &#contributions-by-type {
-    .chart {
-      width: 50%;
-      margin-left: auto;
-      margin-right: auto;
-
-      @include media-max(small) {
-        width: 75%;
+        @include media($mobile) {
+          padding-top: 2rem;
+        }
      }
    }
  }
@@ -74,35 +71,36 @@ section {
    .actions {
      padding-top: 3rem;
      font-size: 1rem;
-      color: $primary-color;
+      color: $primaryColor;
      text-align: center;
-      @include media-max(small) {
+      @include media($mobile) {
        padding-top: 2rem;
      }

      a {
-        color: $primary-color;
+        color: $primaryColor;
      }
    }
  }
 }

-@media (min-width: 550px) {
-  section {
-    h2 {
-      font-size: 2rem;
-    }
+button, input[type=submit] {
+  display: inline-block;
+  border: 1px solid rgba(22, 21, 40, 1);
+  background-color: rgba(22, 21, 40, 0.6);
+  color: $primaryColor;
+  border-radius: 3px;
+  font-weight: 500;
+  text-transform: uppercase;
+  cursor: pointer;
+  letter-spacing: 0.1em;
+
+  &:hover {
+    background-color: rgba(22, 21, 40, 0.8);
  }
 }

-@import "buttons";
-@import "forms";
-
-@import "components/contribution-list";
-@import "components/contributor-list";
-@import "components/contributor-profile";
-@import "components/external-account-link";
@import "components/loading-spinner";
+@import "components/contributor-list";
+@import "components/add-contributor";
@import "components/proposal-list";
-@import "components/topbar";
-@import "components/user-avatar";
@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+/// Throws Sass warnings to announce library deprecations. You can disable them
+/// by setting the `$output-bourbon-deprecation-warnings` variable to `false`.
+///
+/// @access private
+
+@mixin _bourbon-deprecate($feature, $message: null) {
+  @if $output-bourbon-deprecation-warnings == true {
+    @warn "[Bourbon] [Deprecation] `#{$feature}` is deprecated and will be " +
+      "removed in 5.0.0. #{$message}";
+    @content;
+  }
+}
+
+@mixin _bourbon-deprecate-for-prefixing($feature) {
+  @include _bourbon-deprecate($feature, "We suggest using an automated " +
+    "prefixing tool, like Autoprefixer.");
+}
@@ -0,0 +1,425 @@
+// The following features have been deprecated and will be removed in the next MAJOR version release
+
+@mixin inline-block {
+  @include _bourbon-deprecate("inline-block");
+
+  display: inline-block;
+}
+
+@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
+  @include _bourbon-deprecate("button");
+
+  @if type-of($style) == string and type-of($base-color) == color {
+    @include buttonstyle($style, $base-color, $text-size, $padding);
+  }
+
+  @if type-of($style) == string and type-of($base-color) == number {
+    $padding: $text-size;
+    $text-size: $base-color;
+    $base-color: #4294f0;
+
+    @if $padding == inherit {
+      $padding: 7px 18px;
+    }
+
+    @include buttonstyle($style, $base-color, $text-size, $padding);
+  }
+
+  @if type-of($style) == color and type-of($base-color) == color {
+    $base-color: $style;
+    $style: simple;
+    @include buttonstyle($style, $base-color, $text-size, $padding);
+  }
+
+  @if type-of($style) == color and type-of($base-color) == number {
+    $padding: $text-size;
+    $text-size: $base-color;
+    $base-color: $style;
+    $style: simple;
+
+    @if $padding == inherit {
+      $padding: 7px 18px;
+    }
+
+    @include buttonstyle($style, $base-color, $text-size, $padding);
+  }
+
+  @if type-of($style) == number {
+    $padding: $base-color;
+    $text-size: $style;
+    $base-color: #4294f0;
+    $style: simple;
+
+    @if $padding == #4294f0 {
+      $padding: 7px 18px;
+    }
+
+    @include buttonstyle($style, $base-color, $text-size, $padding);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+// Selector Style Button
+@mixin buttonstyle($type, $b-color, $t-size, $pad) {
+  // Grayscale button
+  @if $type == simple and $b-color == grayscale($b-color) {
+    @include simple($b-color, true, $t-size, $pad);
+  }
+
+  @if $type == shiny and $b-color == grayscale($b-color) {
+    @include shiny($b-color, true, $t-size, $pad);
+  }
+
+  @if $type == pill and $b-color == grayscale($b-color) {
+    @include pill($b-color, true, $t-size, $pad);
+  }
+
+  @if $type == flat and $b-color == grayscale($b-color) {
+    @include flat($b-color, true, $t-size, $pad);
+  }
+
+  // Colored button
+  @if $type == simple {
+    @include simple($b-color, false, $t-size, $pad);
+  }
+
+  @else if $type == shiny {
+    @include shiny($b-color, false, $t-size, $pad);
+  }
+
+  @else if $type == pill {
+    @include pill($b-color, false, $t-size, $pad);
+  }
+
+  @else if $type == flat {
+    @include flat($b-color, false, $t-size, $pad);
+  }
+}
+
+// Simple Button
+@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
+  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
+  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
+  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
+
+  @if is-light($base-color) {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
+  color: $color;
+  display: inline-block;
+  font-size: $textsize;
+  font-weight: bold;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: $padding;
+  text-decoration: none;
+  text-shadow: 0 1px 0 $text-shadow;
+  background-clip: padding-box;
+
+  &:hover:not(:disabled) {
+    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+    }
+
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+
+    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
+    cursor: pointer;
+  }
+
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
+    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+    @if $grayscale == true {
+      $border-active:       grayscale($border-active);
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    border: 1px solid $border-active;
+    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
+  }
+}
+
+// Shiny Button
+@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+  $fourth-stop:   adjust-color($base-color, $red: -79,  $green: -70,  $blue: -46);
+  $inset-shadow:  adjust-color($base-color, $red:  37,  $green:  29,  $blue:  12);
+  $second-stop:   adjust-color($base-color, $red: -56,  $green: -50,  $blue: -33);
+  $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+  $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
+
+  @if is-light($base-color) {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $border-bottom: grayscale($border-bottom);
+    $fourth-stop:   grayscale($fourth-stop);
+    $inset-shadow:  grayscale($inset-shadow);
+    $second-stop:   grayscale($second-stop);
+    $text-shadow:   grayscale($text-shadow);
+    $third-stop:    grayscale($third-stop);
+  }
+
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+
+  border: 1px solid $border;
+  border-bottom: 1px solid $border-bottom;
+  border-radius: 5px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
+  color: $color;
+  display: inline-block;
+  font-size: $textsize;
+  font-weight: bold;
+  padding: $padding;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 1px $text-shadow;
+
+  &:hover:not(:disabled) {
+    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+    @if $grayscale == true {
+      $first-stop-hover:  grayscale($first-stop-hover);
+      $second-stop-hover: grayscale($second-stop-hover);
+      $third-stop-hover:  grayscale($third-stop-hover);
+      $fourth-stop-hover: grayscale($fourth-stop-hover);
+    }
+
+    @include linear-gradient(top, $first-stop-hover  0%,
+                                  $second-stop-hover 50%,
+                                  $third-stop-hover  50%,
+                                  $fourth-stop-hover 100%);
+    cursor: pointer;
+  }
+
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
+    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+    @if $grayscale == true {
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    box-shadow: inset 0 0 20px 0 $inset-shadow-active;
+  }
+}
+
+// Pill Button
+@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+  $color:         hsl(0, 0, 100%);
+  $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
+  $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
+  $border-top:    adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+  $inset-shadow:  adjust-color($base-color, $hue: -1, $saturation: -1%,  $lightness:  7%);
+  $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
+  $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
+
+  @if is-light($base-color) {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border-bottom: grayscale($border-bottom);
+    $border-sides:  grayscale($border-sides);
+    $border-top:    grayscale($border-top);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border-top;
+  border-color: $border-top $border-sides $border-bottom;
+  border-radius: 16px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
+  color: $color;
+  display: inline-block;
+  font-size: $textsize;
+  font-weight: normal;
+  line-height: 1;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: $padding;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 1px $text-shadow;
+  background-clip: padding-box;
+
+  &:hover:not(:disabled) {
+    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
+    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
+    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
+    $border-top:          adjust-color($base-color, $hue: -1, $saturation: -17%,   $lightness: -21%);
+    $inset-shadow-hover:  adjust-color($base-color,           $saturation: -1%,    $lightness:  3%);
+    $stop-gradient-hover: adjust-color($base-color, $hue:  8, $saturation: -4%,    $lightness: -15.5%);
+    $text-shadow-hover:   adjust-color($base-color, $hue:  5, $saturation: -5%,    $lightness: -22%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $border-bottom:       grayscale($border-bottom);
+      $border-sides:        grayscale($border-sides);
+      $border-top:          grayscale($border-top);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+      $text-shadow-hover:   grayscale($text-shadow-hover);
+    }
+
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+
+    background-clip: padding-box;
+    border: 1px solid $border-top;
+    border-color: $border-top $border-sides $border-bottom;
+    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
+    cursor: pointer;
+    text-shadow: 0 -1px 1px $text-shadow-hover;
+  }
+
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
+    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
+    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
+    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
+    $inset-shadow-active:  adjust-color($base-color, $hue: 9,  $saturation:  2%,   $lightness: -21.5%);
+    $text-shadow-active:   adjust-color($base-color, $hue: 5,  $saturation: -12%,  $lightness: -21.5%);
+
+    @if $grayscale == true {
+      $active-color:         grayscale($active-color);
+      $border-active:        grayscale($border-active);
+      $border-bottom-active: grayscale($border-bottom-active);
+      $inset-shadow-active:  grayscale($inset-shadow-active);
+      $text-shadow-active:   grayscale($text-shadow-active);
+    }
+
+    background: $active-color;
+    border: 1px solid $border-active;
+    border-bottom: 1px solid $border-bottom-active;
+    box-shadow: inset 0 0 6px 3px $inset-shadow-active;
+    text-shadow: 0 -1px 1px $text-shadow-active;
+  }
+}
+
+// Flat Button
+@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+  $color:         hsl(0, 0, 100%);
+
+  @if is-light($base-color) {
+    $color:       hsl(0, 0, 20%);
+  }
+
+  background-color: $base-color;
+  border-radius: 3px;
+  border: 0;
+  color: $color;
+  display: inline-block;
+  font-size: $textsize;
+  font-weight: bold;
+  padding: $padding;
+  text-decoration: none;
+  background-clip: padding-box;
+
+  &:hover:not(:disabled){
+    $base-color-hover:    adjust-color($base-color, $saturation: 4%, $lightness: 5%);
+
+    @if $grayscale == true {
+      $base-color-hover: grayscale($base-color-hover);
+    }
+
+    background-color: $base-color-hover;
+    cursor: pointer;
+  }
+
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
+    $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+
+    @if $grayscale == true {
+      $base-color-active: grayscale($base-color-active);
+    }
+
+    background-color: $base-color-active;
+    cursor: pointer;
+  }
+}
+
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  @if $output-bourbon-deprecation-warnings == true {
+    @warn "[Bourbon] [Deprecation] `flex-grid` is deprecated and will be " +
+    "removed in 5.0.0. For grid functions, check out Bourbon's sister library" +
+    "Neat.";
+  }
+
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  @if $output-bourbon-deprecation-warnings == true {
+    @warn "[Bourbon] [Deprecation] `flex-gutter` is deprecated and will be " +
+    "removed in 5.0.0. For grid functions, check out Bourbon's sister library" +
+    "Neat.";
+  }
+
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+@function grid-width($n) {
+  @if $output-bourbon-deprecation-warnings == true {
+    @warn "[Bourbon] [Deprecation] `grid-width` is deprecated and will be " +
+    "removed in 5.0.0. For grid functions, check out Bourbon's sister library" +
+    "Neat.";
+  }
+
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+@function golden-ratio($value, $increment) {
+  @if $output-bourbon-deprecation-warnings == true {
+    @warn "[Bourbon] [Deprecation] `golden-ratio` is deprecated and will be " +
+    "removed in 5.0.0. You can use the `modular-scale` function instead.";
+  }
+
+  @return modular-scale($increment, $value, $ratio: $golden);
+}
+
+@mixin box-sizing($box) {
+  @include _bourbon-deprecate-for-prefixing("box-sizing");
+
+  @include prefixer(box-sizing, $box, webkit moz spec);
+}
@@ -0,0 +1,90 @@
+// Bourbon 4.3.0
+// http://bourbon.io
+// Copyright 2011-2017 thoughtbot, inc.
+// MIT License
+
+@import "settings/deprecation-warnings";
+@import "settings/prefixer";
+@import "settings/px-to-em";
+@import "settings/asset-pipeline";
+
+@import "bourbon-deprecate";
+
+@import "functions/assign-inputs";
+@import "functions/contains";
+@import "functions/contains-falsy";
+@import "functions/is-length";
+@import "functions/is-light";
+@import "functions/is-number";
+@import "functions/is-size";
+@import "functions/px-to-em";
+@import "functions/px-to-rem";
+@import "functions/shade";
+@import "functions/strip-units";
+@import "functions/tint";
+@import "functions/transition-property-name";
+@import "functions/unpack";
+@import "functions/modular-scale";
+
+@import "helpers/convert-units";
+@import "helpers/directional-values";
+@import "helpers/font-source-declaration";
+@import "helpers/gradient-positions-parser";
+@import "helpers/linear-angle-parser";
+@import "helpers/linear-gradient-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/linear-side-corner-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/radial-gradient-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";
+@import "helpers/str-to-num";
+
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/backface-visibility";
+@import "css3/background";
+@import "css3/background-image";
+@import "css3/border-image";
+@import "css3/calc";
+@import "css3/columns";
+@import "css3/filter";
+@import "css3/flex-box";
+@import "css3/font-face";
+@import "css3/font-feature-settings";
+@import "css3/hidpi-media-query";
+@import "css3/hyphens";
+@import "css3/image-rendering";
+@import "css3/keyframes";
+@import "css3/linear-gradient";
+@import "css3/perspective";
+@import "css3/placeholder";
+@import "css3/radial-gradient";
+@import "css3/selection";
+@import "css3/text-decoration";
+@import "css3/transform";
+@import "css3/transition";
+@import "css3/user-select";
+
+@import "addons/border-color";
+@import "addons/border-radius";
+@import "addons/border-style";
+@import "addons/border-width";
+@import "addons/buttons";
+@import "addons/clearfix";
+@import "addons/ellipsis";
+@import "addons/font-stacks";
+@import "addons/hide-text";
+@import "addons/margin";
+@import "addons/padding";
+@import "addons/position";
+@import "addons/prefixer";
+@import "addons/retina-image";
+@import "addons/size";
+@import "addons/text-inputs";
+@import "addons/timing-functions";
+@import "addons/triangle";
+@import "addons/word-wrap";
+
+@import "bourbon-deprecated-upcoming";
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+
+/// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side.
+///
+/// @param {Arglist} $vals
+///   List of arguments
+///
+/// @example scss - Usage
+///   .element {
+///     @include border-color(#a60b55 #76cd9c null #e8ae1a);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     border-left-color: #e8ae1a;
+///     border-right-color: #76cd9c;
+///     border-top-color: #a60b55;
+///   }
+///
+/// @require {mixin} directional-property
+///
+/// @output `border-color`
+
+@mixin border-color($vals...) {
+  @include directional-property(border, color, $vals...);
+}
@@ -0,0 +1,48 @@
+@charset "UTF-8";
+
+/// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
+///
+/// @param {Number} $radii
+///   List of arguments
+///
+/// @example scss - Usage
+///   .element-one {
+///     @include border-top-radius(5px);
+///   }
+///
+///   .element-two {
+///     @include border-left-radius(3px);
+///   }
+///
+/// @example css - CSS Output
+///   .element-one {
+///     border-top-left-radius: 5px;
+///     border-top-right-radius: 5px;
+///   }
+///
+///   .element-two {
+///     border-bottom-left-radius: 3px;
+///     border-top-left-radius: 3px;
+///   }
+///
+/// @output `border-radius`
+
+@mixin border-top-radius($radii) {
+  border-top-left-radius: $radii;
+  border-top-right-radius: $radii;
+}
+
+@mixin border-right-radius($radii) {
+  border-bottom-right-radius: $radii;
+  border-top-right-radius: $radii;
+}
+
+@mixin border-bottom-radius($radii) {
+  border-bottom-left-radius: $radii;
+  border-bottom-right-radius: $radii;
+}
+
+@mixin border-left-radius($radii) {
+  border-bottom-left-radius: $radii;
+  border-top-left-radius: $radii;
+}
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+/// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side.
+///
+/// @param {Arglist} $vals
+///   List of arguments
+///
+/// @example scss - Usage
+///   .element {
+///     @include border-style(dashed null solid);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     border-bottom-style: solid;
+///     border-top-style: dashed;
+///   }
+///
+/// @require {mixin} directional-property
+///
+/// @output `border-style`
+
+@mixin border-style($vals...) {
+  @include directional-property(border, style, $vals...);
+}
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+/// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side.
+///
+/// @param {Arglist} $vals
+///   List of arguments
+///
+/// @example scss - Usage
+///   .element {
+///     @include border-width(1em null 20px);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     border-bottom-width: 20px;
+///     border-top-width: 1em;
+///   }
+///
+/// @require {mixin} directional-property
+///
+/// @output `border-width`
+
+@mixin border-width($vals...) {
+  @include directional-property(border, width, $vals...);
+}
@@ -0,0 +1,64 @@
+@charset "UTF-8";
+
+/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
+///
+/// @example scss - Usage
+///   #{$all-buttons} {
+///     background-color: #f00;
+///   }
+///
+///   #{$all-buttons-focus},
+///   #{$all-buttons-hover} {
+///     background-color: #0f0;
+///   }
+///
+///   #{$all-buttons-active} {
+///     background-color: #00f;
+///   }
+///
+/// @example css - CSS Output
+///   button,
+///   input[type="button"],
+///   input[type="reset"],
+///   input[type="submit"] {
+///     background-color: #f00;
+///   }
+///
+///   button:focus,
+///   input[type="button"]:focus,
+///   input[type="reset"]:focus,
+///   input[type="submit"]:focus,
+///   button:hover,
+///   input[type="button"]:hover,
+///   input[type="reset"]:hover,
+///   input[type="submit"]:hover {
+///     background-color: #0f0;
+///   }
+///
+///   button:active,
+///   input[type="button"]:active,
+///   input[type="reset"]:active,
+///   input[type="submit"]:active {
+///     background-color: #00f;
+///   }
+///
+/// @require assign-inputs
+///
+/// @type List
+///
+/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
+
+$buttons-list: 'button',
+               'input[type="button"]',
+               'input[type="reset"]',
+               'input[type="submit"]';
+
+$all-buttons:        assign-inputs($buttons-list);
+$all-buttons-active: assign-inputs($buttons-list, active);
+$all-buttons-focus:  assign-inputs($buttons-list, focus);
+$all-buttons-hover:  assign-inputs($buttons-list, hover);
+
+$all-button-inputs:        $all-buttons;
+$all-button-inputs-active: $all-buttons-active;
+$all-button-inputs-focus:  $all-buttons-focus;
+$all-button-inputs-hover:  $all-buttons-hover;
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+/// Provides an easy way to include a clearfix for containing floats.
+///
+/// @link http://cssmojo.com/latest_new_clearfix_so_far/
+///
+/// @example scss - Usage
+///   .element {
+///     @include clearfix;
+///   }
+///
+/// @example css - CSS Output
+///   .element::after {
+///     clear: both;
+///     content: "";
+///     display: table;
+///   }
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+/// Truncates text and adds an ellipsis to represent overflow.
+///
+/// @param {Number} $width [100%]
+///   Max-width for the string to respect before being truncated
+///
+/// @example scss - Usage
+///   .element {
+///     @include ellipsis;
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     display: inline-block;
+///     max-width: 100%;
+///     overflow: hidden;
+///     text-overflow: ellipsis;
+///     white-space: nowrap;
+///     word-wrap: normal;
+///   }
+
+@mixin ellipsis($width: 100%) {
+  display: inline-block;
+  max-width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
@@ -0,0 +1,31 @@
+@charset "UTF-8";
+
+/// Georgia font stack.
+///
+/// @type List
+
+$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
+
+/// Helvetica font stack.
+///
+/// @type List
+
+$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+
+/// Lucida Grande font stack.
+///
+/// @type List
+
+$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
+
+/// Monospace font stack.
+///
+/// @type List
+
+$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
+
+/// Verdana font stack.
+///
+/// @type List
+
+$verdana: "Verdana", "Geneva", sans-serif;
@@ -0,0 +1,27 @@
+/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
+///
+/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
+///
+/// @example scss - Usage
+///   .element {
+///     @include hide-text;
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     overflow: hidden;
+///     text-indent: 101%;
+///     white-space: nowrap;
+///   }
+///
+/// @todo Remove height argument in v5.0.0
+
+@mixin hide-text($height: null) {
+  overflow: hidden;
+  text-indent: 101%;
+  white-space: nowrap;
+
+  @if $height {
+    @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
+  }
+}
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+
+/// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side.
+///
+/// @param {Arglist} $vals
+///   List of arguments
+///
+/// @example scss - Usage
+///   .element {
+///     @include margin(null 10px 3em 20vh);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     margin-bottom: 3em;
+///     margin-left: 20vh;
+///     margin-right: 10px;
+///   }
+///
+/// @require {mixin} directional-property
+///
+/// @output `margin`
+
+@mixin margin($vals...) {
+  @include directional-property(margin, false, $vals...);
+}
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+
+/// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side.
+///
+/// @param {Arglist} $vals
+///   List of arguments
+///
+/// @example scss - Usage
+///   .element {
+///     @include padding(12vh null 10px 5%);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     padding-bottom: 10px;
+///     padding-left: 5%;
+///     padding-top: 12vh;
+///   }
+///
+/// @require {mixin} directional-property
+///
+/// @output `padding`
+
+@mixin padding($vals...) {
+  @include directional-property(padding, false, $vals...);
+}
@@ -0,0 +1,48 @@
+@charset "UTF-8";
+
+/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
+///
+/// @param {Position} $position [relative]
+///   A CSS position value
+///
+/// @param {Arglist} $coordinates [null null null null]
+///   List of values that correspond to the 4-value syntax for the edges of a box
+///
+/// @example scss - Usage
+///   .element {
+///     @include position(absolute, 0 null null 10em);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     left: 10em;
+///     position: absolute;
+///     top: 0;
+///   }
+///
+/// @require {function} is-length
+/// @require {function} unpack
+
+@mixin position($position: relative, $coordinates: null null null null) {
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $coordinates: unpack($coordinates);
+
+  $offsets: (
+    top:    nth($coordinates, 1),
+    right:  nth($coordinates, 2),
+    bottom: nth($coordinates, 3),
+    left:   nth($coordinates, 4)
+  );
+
+  position: $position;
+
+  @each $offset, $value in $offsets {
+    @if is-length($value) {
+      #{$offset}: $value;
+    }
+  }
+}
@@ -0,0 +1,66 @@
+@charset "UTF-8";
+
+/// A mixin for generating vendor prefixes on non-standardized properties.
+///
+/// @param {String} $property
+///   Property to prefix
+///
+/// @param {*} $value
+///   Value to use
+///
+/// @param {List} $prefixes
+///   Prefixes to define
+///
+/// @example scss - Usage
+///   .element {
+///     @include prefixer(border-radius, 10px, webkit ms spec);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     -webkit-border-radius: 10px;
+///     -moz-border-radius: 10px;
+///     border-radius: 10px;
+///   }
+///
+/// @require {variable} $prefix-for-webkit
+/// @require {variable} $prefix-for-mozilla
+/// @require {variable} $prefix-for-microsoft
+/// @require {variable} $prefix-for-opera
+/// @require {variable} $prefix-for-spec
+
+@mixin prefixer($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      @if $prefix-for-webkit {
+        -webkit-#{$property}: $value;
+      }
+    } @else if $prefix == moz {
+      @if $prefix-for-mozilla {
+        -moz-#{$property}: $value;
+      }
+    } @else if $prefix == ms {
+      @if $prefix-for-microsoft {
+        -ms-#{$property}: $value;
+      }
+    } @else if $prefix == o {
+      @if $prefix-for-opera {
+        -o-#{$property}: $value;
+      }
+    } @else if $prefix == spec {
+      @if $prefix-for-spec {
+        #{$property}: $value;
+      }
+    } @else  {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
+
+@mixin disable-prefix-for-all() {
+  $prefix-for-webkit:    false !global;
+  $prefix-for-mozilla:   false !global;
+  $prefix-for-microsoft: false !global;
+  $prefix-for-opera:     false !global;
+  $prefix-for-spec:      false !global;
+}
@@ -0,0 +1,27 @@
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
+  @include _bourbon-deprecate("retina-image");
+
+  @if $asset-pipeline {
+    background-image: image-url("#{$filename}.#{$extension}");
+  } @else {
+    background-image:       url("#{$filename}.#{$extension}");
+  }
+
+  @include hidpi {
+    @if $asset-pipeline {
+      @if $retina-filename {
+        background-image: image-url("#{$retina-filename}.#{$extension}");
+      } @else {
+        background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
+      }
+    } @else {
+      @if $retina-filename {
+        background-image: url("#{$retina-filename}.#{$extension}");
+      } @else {
+        background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
+      }
+    }
+
+    background-size: $background-size;
+  }
+}
@@ -0,0 +1,51 @@
+@charset "UTF-8";
+
+/// Sets the `width` and `height` of the element.
+///
+/// @param {List} $size
+///   A list of at most 2 size values.
+///
+///   If there is only a single value in `$size` it is used for both width and height. All units are supported.
+///
+/// @example scss - Usage
+///   .first-element {
+///     @include size(2em);
+///   }
+///
+///   .second-element {
+///     @include size(auto 10em);
+///   }
+///
+/// @example css - CSS Output
+///   .first-element {
+///     width: 2em;
+///     height: 2em;
+///   }
+///
+///   .second-element {
+///     width: auto;
+///     height: 10em;
+///   }
+///
+/// @todo Refactor in 5.0.0 to use a comma-separated argument
+
+@mixin size($value) {
+  $width: nth($value, 1);
+  $height: $width;
+
+  @if length($value) > 1 {
+    $height: nth($value, 2);
+  }
+
+  @if is-size($height) {
+    height: $height;
+  } @else {
+    @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
+  }
+
+  @if is-size($width) {
+    width: $width;
+  } @else {
+    @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
+  }
+}
@@ -0,0 +1,113 @@
+@charset "UTF-8";
+
+/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
+///
+/// @example scss - Usage
+///   #{$all-text-inputs} {
+///     border: 1px solid #f00;
+///   }
+///
+///   #{$all-text-inputs-focus},
+///   #{$all-text-inputs-hover} {
+///     border: 1px solid #0f0;
+///   }
+///
+///   #{$all-text-inputs-active} {
+///     border: 1px solid #00f;
+///   }
+///
+/// @example css - CSS Output
+///   input[type="color"],
+///   input[type="date"],
+///   input[type="datetime"],
+///   input[type="datetime-local"],
+///   input[type="email"],
+///   input[type="month"],
+///   input[type="number"],
+///   input[type="password"],
+///   input[type="search"],
+///   input[type="tel"],
+///   input[type="text"],
+///   input[type="time"],
+///   input[type="url"],
+///   input[type="week"],
+///   textarea {
+///     border: 1px solid #f00;
+///   }
+///
+///   input[type="color"]:focus,
+///   input[type="date"]:focus,
+///   input[type="datetime"]:focus,
+///   input[type="datetime-local"]:focus,
+///   input[type="email"]:focus,
+///   input[type="month"]:focus,
+///   input[type="number"]:focus,
+///   input[type="password"]:focus,
+///   input[type="search"]:focus,
+///   input[type="tel"]:focus,
+///   input[type="text"]:focus,
+///   input[type="time"]:focus,
+///   input[type="url"]:focus,
+///   input[type="week"]:focus,
+///   textarea:focus,
+///   input[type="color"]:hover,
+///   input[type="date"]:hover,
+///   input[type="datetime"]:hover,
+///   input[type="datetime-local"]:hover,
+///   input[type="email"]:hover,
+///   input[type="month"]:hover,
+///   input[type="number"]:hover,
+///   input[type="password"]:hover,
+///   input[type="search"]:hover,
+///   input[type="tel"]:hover,
+///   input[type="text"]:hover,
+///   input[type="time"]:hover,
+///   input[type="url"]:hover,
+///   input[type="week"]:hover,
+///   textarea:hover {
+///     border: 1px solid #0f0;
+///   }
+///
+///   input[type="color"]:active,
+///   input[type="date"]:active,
+///   input[type="datetime"]:active,
+///   input[type="datetime-local"]:active,
+///   input[type="email"]:active,
+///   input[type="month"]:active,
+///   input[type="number"]:active,
+///   input[type="password"]:active,
+///   input[type="search"]:active,
+///   input[type="tel"]:active,
+///   input[type="text"]:active,
+///   input[type="time"]:active,
+///   input[type="url"]:active,
+///   input[type="week"]:active,
+///   textarea:active {
+///     border: 1px solid #00f;
+///   }
+///
+/// @require assign-inputs
+///
+/// @type List
+
+$text-inputs-list: 'input[type="color"]',
+                   'input[type="date"]',
+                   'input[type="datetime"]',
+                   'input[type="datetime-local"]',
+                   'input[type="email"]',
+                   'input[type="month"]',
+                   'input[type="number"]',
+                   'input[type="password"]',
+                   'input[type="search"]',
+                   'input[type="tel"]',
+                   'input[type="text"]',
+                   'input[type="time"]',
+                   'input[type="url"]',
+                   'input[type="week"]',
+                   'input:not([type])',
+                   'textarea';
+
+$all-text-inputs:        assign-inputs($text-inputs-list);
+$all-text-inputs-active: assign-inputs($text-inputs-list, active);
+$all-text-inputs-focus:  assign-inputs($text-inputs-list, focus);
+$all-text-inputs-hover:  assign-inputs($text-inputs-list, hover);
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+///
+/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
+///
+/// @type cubic-bezier
+
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
@@ -0,0 +1,63 @@
+@mixin triangle($size, $color, $direction) {
+  $width: nth($size, 1);
+  $height: nth($size, length($size));
+  $foreground-color: nth($color, 1);
+  $background-color: if(length($color) == 2, nth($color, 2), transparent);
+  height: 0;
+  width: 0;
+
+  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+    $width: $width / 2;
+    $height: if(length($size) > 1, $height, $height/2);
+
+    @if $direction == up {
+      border-bottom: $height solid $foreground-color;
+      border-left: $width solid $background-color;
+      border-right: $width solid $background-color;
+    } @else if $direction == right {
+      border-bottom: $width solid $background-color;
+      border-left: $height solid $foreground-color;
+      border-top: $width solid $background-color;
+    } @else if $direction == down {
+      border-left: $width solid $background-color;
+      border-right: $width solid $background-color;
+      border-top: $height solid $foreground-color;
+    } @else if $direction == left {
+      border-bottom: $width solid $background-color;
+      border-right: $height solid $foreground-color;
+      border-top: $width solid $background-color;
+    }
+  } @else if ($direction == up-right) or ($direction == up-left) {
+    border-top: $height solid $foreground-color;
+
+    @if $direction == up-right {
+      border-left:  $width solid $background-color;
+    } @else if $direction == up-left {
+      border-right: $width solid $background-color;
+    }
+  } @else if ($direction == down-right) or ($direction == down-left) {
+    border-bottom: $height solid $foreground-color;
+
+    @if $direction == down-right {
+      border-left:  $width solid $background-color;
+    } @else if $direction == down-left {
+      border-right: $width solid $background-color;
+    }
+  } @else if ($direction == inset-up) {
+    border-color: $background-color $background-color $foreground-color;
+    border-style: solid;
+    border-width: $height $width;
+  } @else if ($direction == inset-down) {
+    border-color: $foreground-color $background-color $background-color;
+    border-style: solid;
+    border-width: $height $width;
+  } @else if ($direction == inset-right) {
+    border-color: $background-color $background-color $background-color $foreground-color;
+    border-style: solid;
+    border-width: $width $height;
+  } @else if ($direction == inset-left) {
+    border-color: $background-color $foreground-color $background-color $background-color;
+    border-style: solid;
+    border-width: $width $height;
+  }
+}
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+/// Provides an easy way to change the `word-wrap` property.
+///
+/// @param {String} $wrap [break-word]
+///   Value for the `word-break` property.
+///
+/// @example scss - Usage
+///   .wrapper {
+///     @include word-wrap(break-word);
+///   }
+///
+/// @example css - CSS Output
+///   .wrapper {
+///     overflow-wrap: break-word;
+///     word-break: break-all;
+///     word-wrap: break-word;
+///   }
+
+@mixin word-wrap($wrap: break-word) {
+  overflow-wrap: $wrap;
+  word-wrap: $wrap;
+
+  @if $wrap == break-word {
+    word-break: break-all;
+  } @else {
+    word-break: $wrap;
+  }
+}
@@ -0,0 +1,61 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+@mixin animation($animations...) {
+  @include _bourbon-deprecate-for-prefixing("animation");
+
+  @include prefixer(animation, $animations, webkit moz spec);
+}
+
+@mixin animation-name($names...) {
+  @include _bourbon-deprecate-for-prefixing("animation-name");
+
+  @include prefixer(animation-name, $names, webkit moz spec);
+}
+
+@mixin animation-duration($times...) {
+  @include _bourbon-deprecate-for-prefixing("animation-duration");
+
+  @include prefixer(animation-duration, $times, webkit moz spec);
+}
+
+@mixin animation-timing-function($motions...) {
+  @include _bourbon-deprecate-for-prefixing("animation-timing-function");
+
+  // ease | linear | ease-in | ease-out | ease-in-out
+  @include prefixer(animation-timing-function, $motions, webkit moz spec);
+}
+
+@mixin animation-iteration-count($values...) {
+  @include _bourbon-deprecate-for-prefixing("animation-iteration-count");
+
+  // infinite | <number>
+  @include prefixer(animation-iteration-count, $values, webkit moz spec);
+}
+
+@mixin animation-direction($directions...) {
+  @include _bourbon-deprecate-for-prefixing("animation-direction");
+
+  // normal | alternate
+  @include prefixer(animation-direction, $directions, webkit moz spec);
+}
+
+@mixin animation-play-state($states...) {
+  @include _bourbon-deprecate-for-prefixing("animation-play-state");
+
+  // running | paused
+  @include prefixer(animation-play-state, $states, webkit moz spec);
+}
+
+@mixin animation-delay($times...) {
+  @include _bourbon-deprecate-for-prefixing("animation-delay");
+
+  @include prefixer(animation-delay, $times, webkit moz spec);
+}
+
+@mixin animation-fill-mode($modes...) {
+  @include _bourbon-deprecate-for-prefixing("animation-fill-mode");
+
+  // none | forwards | backwards | both
+  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
+}
@@ -0,0 +1,5 @@
+@mixin appearance($value) {
+  @include _bourbon-deprecate-for-prefixing("appearance");
+
+  @include prefixer(appearance, $value, webkit moz ms o spec);
+}
@@ -0,0 +1,5 @@
+@mixin backface-visibility($visibility) {
+  @include _bourbon-deprecate-for-prefixing("backface-visibility");
+
+  @include prefixer(backface-visibility, $visibility, webkit spec);
+}
@@ -0,0 +1,44 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image($images...) {
+  @include _bourbon-deprecate-for-prefixing("background-image");
+
+  $webkit-images: ();
+  $spec-images: ();
+
+  @each $image in $images {
+    $webkit-image: ();
+    $spec-image: ();
+
+    @if (type-of($image) == string) {
+      $url-str:       str-slice($image, 1, 3);
+      $gradient-type: str-slice($image, 1, 6);
+
+      @if $url-str == "url" {
+        $webkit-image: $image;
+        $spec-image:   $image;
+      }
+
+      @else if $gradient-type == "linear" {
+        $gradients: _linear-gradient-parser($image);
+        $webkit-image:  map-get($gradients, webkit-image);
+        $spec-image:    map-get($gradients, spec-image);
+      }
+
+      @else if $gradient-type == "radial" {
+        $gradients: _radial-gradient-parser($image);
+        $webkit-image: map-get($gradients, webkit-image);
+        $spec-image:   map-get($gradients, spec-image);
+      }
+    }
+
+    $webkit-images: append($webkit-images, $webkit-image, comma);
+    $spec-images:   append($spec-images,   $spec-image,   comma);
+  }
+
+  background-image: $webkit-images;
+  background-image: $spec-images;
+}
@@ -0,0 +1,57 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background($backgrounds...) {
+  @include _bourbon-deprecate-for-prefixing("background");
+
+  $webkit-backgrounds: ();
+  $spec-backgrounds: ();
+
+  @each $background in $backgrounds {
+    $webkit-background: ();
+    $spec-background: ();
+    $background-type: type-of($background);
+
+    @if $background-type == string or $background-type == list {
+      $background-str: if($background-type == list, nth($background, 1), $background);
+
+      $url-str:       str-slice($background-str, 1, 3);
+      $gradient-type: str-slice($background-str, 1, 6);
+
+      @if $url-str == "url" {
+        $webkit-background: $background;
+        $spec-background:   $background;
+      }
+
+      @else if $gradient-type == "linear" {
+        $gradients: _linear-gradient-parser("#{$background}");
+        $webkit-background: map-get($gradients, webkit-image);
+        $spec-background:   map-get($gradients, spec-image);
+      }
+
+      @else if $gradient-type == "radial" {
+        $gradients: _radial-gradient-parser("#{$background}");
+        $webkit-background: map-get($gradients, webkit-image);
+        $spec-background:   map-get($gradients, spec-image);
+      }
+
+      @else {
+        $webkit-background: $background;
+        $spec-background:   $background;
+      }
+    }
+
+    @else {
+      $webkit-background: $background;
+      $spec-background:   $background;
+    }
+
+    $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
+    $spec-backgrounds:   append($spec-backgrounds,   $spec-background,   comma);
+  }
+
+  background: $webkit-backgrounds;
+  background: $spec-backgrounds;
+}
@@ -0,0 +1,61 @@
+@mixin border-image($borders...) {
+  @include _bourbon-deprecate-for-prefixing("border-image");
+
+  $webkit-borders: ();
+  $spec-borders: ();
+
+  @each $border in $borders {
+    $webkit-border: ();
+    $spec-border: ();
+    $border-type: type-of($border);
+
+    @if $border-type == string or list {
+      $border-str: if($border-type == list, nth($border, 1), $border);
+
+      $url-str:       str-slice($border-str, 1, 3);
+      $gradient-type: str-slice($border-str, 1, 6);
+
+      @if $url-str == "url" {
+        $webkit-border: $border;
+        $spec-border:   $border;
+      }
+
+      @else if $gradient-type == "linear" {
+        $gradients: _linear-gradient-parser("#{$border}");
+        $webkit-border: map-get($gradients, webkit-image);
+        $spec-border:   map-get($gradients, spec-image);
+      }
+
+      @else if $gradient-type == "radial" {
+        $gradients: _radial-gradient-parser("#{$border}");
+        $webkit-border: map-get($gradients, webkit-image);
+        $spec-border:   map-get($gradients, spec-image);
+      }
+
+      @else {
+        $webkit-border: $border;
+        $spec-border:   $border;
+      }
+    }
+
+    @else {
+      $webkit-border: $border;
+      $spec-border:   $border;
+    }
+
+    $webkit-borders: append($webkit-borders, $webkit-border, comma);
+    $spec-borders:   append($spec-borders,   $spec-border,   comma);
+  }
+
+  -webkit-border-image: $webkit-borders;
+          border-image: $spec-borders;
+          border-style: solid;
+}
+
+//Examples:
+// @include border-image(url("image.png"));
+// @include border-image(url("image.png") 20 stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow));
+// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
+// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
@@ -0,0 +1,6 @@
+@mixin calc($property, $value) {
+  @include _bourbon-deprecate-for-prefixing("calc");
+
+  #{$property}: -webkit-calc(#{$value});
+  #{$property}: calc(#{$value});
+}
@@ -0,0 +1,67 @@
+@mixin columns($arg: auto) {
+  @include _bourbon-deprecate-for-prefixing("columns");
+
+  // <column-count> || <column-width>
+  @include prefixer(columns, $arg, webkit moz spec);
+}
+
+@mixin column-count($int: auto) {
+  @include _bourbon-deprecate-for-prefixing("column-count");
+
+  // auto || integer
+  @include prefixer(column-count, $int, webkit moz spec);
+}
+
+@mixin column-gap($length: normal) {
+  @include _bourbon-deprecate-for-prefixing("column-gap");
+
+  // normal || length
+  @include prefixer(column-gap, $length, webkit moz spec);
+}
+
+@mixin column-fill($arg: auto) {
+  @include _bourbon-deprecate-for-prefixing("column-fill");
+
+  // auto || length
+  @include prefixer(column-fill, $arg, webkit moz spec);
+}
+
+@mixin column-rule($arg) {
+  @include _bourbon-deprecate-for-prefixing("column-rule");
+
+  // <border-width> || <border-style> || <color>
+  @include prefixer(column-rule, $arg, webkit moz spec);
+}
+
+@mixin column-rule-color($color) {
+  @include _bourbon-deprecate-for-prefixing("column-rule-color");
+
+  @include prefixer(column-rule-color, $color, webkit moz spec);
+}
+
+@mixin column-rule-style($style: none) {
+  @include _bourbon-deprecate-for-prefixing("column-rule-style");
+
+  // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+  @include prefixer(column-rule-style, $style, webkit moz spec);
+}
+
+@mixin column-rule-width($width: none) {
+  @include _bourbon-deprecate-for-prefixing("column-rule-width");
+
+  @include prefixer(column-rule-width, $width, webkit moz spec);
+}
+
+@mixin column-span($arg: none) {
+  @include _bourbon-deprecate-for-prefixing("column-span");
+
+  // none || all
+  @include prefixer(column-span, $arg, webkit moz spec);
+}
+
+@mixin column-width($length: auto) {
+  @include _bourbon-deprecate-for-prefixing("column-width");
+
+  // auto || length
+  @include prefixer(column-width, $length, webkit moz spec);
+}
@@ -0,0 +1,6 @@
+@mixin filter($function: none) {
+  @include _bourbon-deprecate-for-prefixing("filter");
+
+  // <filter-function> [<filter-function]* | none
+  @include prefixer(filter, $function, webkit spec);
+}
@@ -0,0 +1,327 @@
+// CSS3 Flexible Box Model and property defaults
+
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+  @include _bourbon-deprecate-for-prefixing("box");
+
+  @include display-box;
+  @include box-orient($orient);
+  @include box-pack($pack);
+  @include box-align($align);
+}
+
+@mixin display-box {
+  @include _bourbon-deprecate-for-prefixing("display-box");
+
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox; // IE 10
+  display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+  @include _bourbon-deprecate-for-prefixing("box-orient");
+
+// horizontal|vertical|inline-axis|block-axis|inherit
+  @include prefixer(box-orient, $orient, webkit moz spec);
+}
+
+@mixin box-pack($pack: start) {
+  @include _bourbon-deprecate-for-prefixing("box-pack");
+
+// start|end|center|justify
+  @include prefixer(box-pack, $pack, webkit moz spec);
+  -ms-flex-pack: $pack; // IE 10
+}
+
+@mixin box-align($align: stretch) {
+  @include _bourbon-deprecate-for-prefixing("box-align");
+
+// start|end|center|baseline|stretch
+  @include prefixer(box-align, $align, webkit moz spec);
+  -ms-flex-align: $align; // IE 10
+}
+
+@mixin box-direction($direction: normal) {
+  @include _bourbon-deprecate-for-prefixing("box-direction");
+
+// normal|reverse|inherit
+  @include prefixer(box-direction, $direction, webkit moz spec);
+  -ms-flex-direction: $direction; // IE 10
+}
+
+@mixin box-lines($lines: single) {
+  @include _bourbon-deprecate-for-prefixing("box-lines");
+
+// single|multiple
+  @include prefixer(box-lines, $lines, webkit moz spec);
+}
+
+@mixin box-ordinal-group($int: 1) {
+  @include _bourbon-deprecate-for-prefixing("box-ordinal-group");
+
+  @include prefixer(box-ordinal-group, $int, webkit moz spec);
+  -ms-flex-order: $int; // IE 10
+}
+
+@mixin box-flex($value: 0) {
+  @include _bourbon-deprecate-for-prefixing("box-flex");
+
+  @include prefixer(box-flex, $value, webkit moz spec);
+  -ms-flex: $value; // IE 10
+}
+
+@mixin box-flex-group($int: 1) {
+  @include _bourbon-deprecate-for-prefixing("box-flex-group");
+
+  @include prefixer(box-flex-group, $int, webkit moz spec);
+}
+
+// CSS3 Flexible Box Model and property defaults
+// Unified attributes for 2009, 2011, and 2012 flavours.
+
+// 2009 - display (box | inline-box)
+// 2011 - display (flexbox | inline-flexbox)
+// 2012 - display (flex | inline-flex)
+@mixin display($value) {
+  @include _bourbon-deprecate-for-prefixing("display");
+
+// flex | inline-flex
+  @if $value == "flex" {
+    // 2009
+    display: -webkit-box;
+    display: -moz-box;
+    display: box;
+
+    // 2012
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox; // 2011 (IE 10)
+    display: flex;
+  } @else if $value == "inline-flex" {
+    display: -webkit-inline-box;
+    display: -moz-inline-box;
+    display: inline-box;
+
+    display: -webkit-inline-flex;
+    display: -moz-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+  } @else {
+    display: $value;
+  }
+}
+
+// 2009 - box-flex (integer)
+// 2011 - flex (decimal | width decimal)
+// 2012 - flex (integer integer width)
+@mixin flex($value) {
+  @include _bourbon-deprecate-for-prefixing("flex");
+
+  // Grab flex-grow for older browsers.
+  $flex-grow: nth($value, 1);
+
+  // 2009
+  @include prefixer(box-flex, $flex-grow, webkit moz spec);
+
+  // 2011 (IE 10), 2012
+  @include prefixer(flex, $value, webkit moz ms spec);
+}
+
+// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
+//      - box-direction (normal | reverse)
+// 2011 - flex-direction (row | row-reverse | column | column-reverse)
+// 2012 - flex-direction (row | row-reverse | column | column-reverse)
+@mixin flex-direction($value: row) {
+  @include _bourbon-deprecate-for-prefixing("flex-direction");
+
+  // Alt values.
+  $value-2009: $value;
+  $value-2011: $value;
+  $direction: normal;
+
+  @if $value == row {
+    $value-2009: horizontal;
+  } @else if $value == "row-reverse" {
+    $value-2009: horizontal;
+    $direction: reverse;
+  } @else if $value == column {
+    $value-2009: vertical;
+  } @else if $value == "column-reverse" {
+    $value-2009: vertical;
+    $direction: reverse;
+  }
+
+  // 2009
+  @include prefixer(box-orient, $value-2009, webkit moz spec);
+  @include prefixer(box-direction, $direction, webkit moz spec);
+
+  // 2012
+  @include prefixer(flex-direction, $value, webkit moz spec);
+
+  // 2011 (IE 10)
+  -ms-flex-direction: $value;
+}
+
+// 2009 - box-lines (single | multiple)
+// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
+// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
+@mixin flex-wrap($value: nowrap) {
+  @include _bourbon-deprecate-for-prefixing("flex-wrap");
+
+  // Alt values
+  $alt-value: $value;
+  @if $value == nowrap {
+    $alt-value: single;
+  } @else if $value == wrap {
+    $alt-value: multiple;
+  } @else if $value == "wrap-reverse" {
+    $alt-value: multiple;
+  }
+
+  @include prefixer(box-lines, $alt-value, webkit moz spec);
+  @include prefixer(flex-wrap, $value, webkit moz ms spec);
+}
+
+// 2009 - TODO: parse values into flex-direction/flex-wrap
+// 2011 - TODO: parse values into flex-direction/flex-wrap
+// 2012 - flex-flow (flex-direction || flex-wrap)
+@mixin flex-flow($value) {
+  @include _bourbon-deprecate-for-prefixing("flex-flow");
+
+  @include prefixer(flex-flow, $value, webkit moz spec);
+}
+
+// 2009 - box-ordinal-group (integer)
+// 2011 - flex-order (integer)
+// 2012 - order (integer)
+@mixin order($int: 0) {
+  @include _bourbon-deprecate-for-prefixing("order");
+
+  // 2009
+  @include prefixer(box-ordinal-group, $int, webkit moz spec);
+
+  // 2012
+  @include prefixer(order, $int, webkit moz spec);
+
+  // 2011 (IE 10)
+  -ms-flex-order: $int;
+}
+
+// 2012 - flex-grow (number)
+@mixin flex-grow($number: 0) {
+  @include _bourbon-deprecate-for-prefixing("flex-grow");
+
+  @include prefixer(flex-grow, $number, webkit moz spec);
+  -ms-flex-positive: $number;
+}
+
+// 2012 - flex-shrink (number)
+@mixin flex-shrink($number: 1) {
+  @include _bourbon-deprecate-for-prefixing("flex-shrink");
+
+  @include prefixer(flex-shrink, $number, webkit moz spec);
+  -ms-flex-negative: $number;
+}
+
+// 2012 - flex-basis (number)
+@mixin flex-basis($width: auto) {
+  @include _bourbon-deprecate-for-prefixing("flex-basis");
+
+  @include prefixer(flex-basis, $width, webkit moz spec);
+  -ms-flex-preferred-size: $width;
+}
+
+// 2009 - box-pack (start | end | center | justify)
+// 2011 - flex-pack (start | end | center | justify)
+// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
+@mixin justify-content($value: flex-start) {
+  @include _bourbon-deprecate-for-prefixing("justify-content");
+
+  // Alt values.
+  $alt-value: $value;
+  @if $value == "flex-start" {
+    $alt-value: start;
+  } @else if $value == "flex-end" {
+    $alt-value: end;
+  } @else if $value == "space-between" {
+    $alt-value: justify;
+  } @else if $value == "space-around" {
+    $alt-value: distribute;
+  }
+
+  // 2009
+  @include prefixer(box-pack, $alt-value, webkit moz spec);
+
+  // 2012
+  @include prefixer(justify-content, $value, webkit moz ms o spec);
+
+  // 2011 (IE 10)
+  -ms-flex-pack: $alt-value;
+}
+
+// 2009 - box-align (start | end | center | baseline | stretch)
+// 2011 - flex-align (start | end | center | baseline | stretch)
+// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
+@mixin align-items($value: stretch) {
+  @include _bourbon-deprecate-for-prefixing("align-items");
+
+  $alt-value: $value;
+
+  @if $value == "flex-start" {
+    $alt-value: start;
+  } @else if $value == "flex-end" {
+    $alt-value: end;
+  }
+
+  // 2009
+  @include prefixer(box-align, $alt-value, webkit moz spec);
+
+  // 2012
+  @include prefixer(align-items, $value, webkit moz ms o spec);
+
+  // 2011 (IE 10)
+  -ms-flex-align: $alt-value;
+}
+
+// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
+// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
+@mixin align-self($value: auto) {
+  @include _bourbon-deprecate-for-prefixing("align-self");
+
+  $value-2011: $value;
+  @if $value == "flex-start" {
+    $value-2011: start;
+  } @else if $value == "flex-end" {
+    $value-2011: end;
+  }
+
+  // 2012
+  @include prefixer(align-self, $value, webkit moz spec);
+
+  // 2011 (IE 10)
+  -ms-flex-item-align: $value-2011;
+}
+
+// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
+// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
+@mixin align-content($value: stretch) {
+  @include _bourbon-deprecate-for-prefixing("align-content");
+
+  $value-2011: $value;
+  @if $value == "flex-start" {
+    $value-2011: start;
+  } @else if $value == "flex-end" {
+    $value-2011: end;
+  } @else if $value == "space-between" {
+    $value-2011: justify;
+  } @else if $value == "space-around" {
+    $value-2011: distribute;
+  }
+
+  // 2012
+  @include prefixer(align-content, $value, webkit moz spec);
+
+  // 2011 (IE 10)
+  -ms-flex-line-pack: $value-2011;
+}
@@ -0,0 +1,24 @@
+@mixin font-face(
+  $font-family,
+  $file-path,
+  $weight: normal,
+  $style: normal,
+  $asset-pipeline: $asset-pipeline,
+  $file-formats: eot woff2 woff ttf svg) {
+
+  $font-url-prefix: font-url-prefixer($asset-pipeline);
+
+  @font-face {
+    font-family: $font-family;
+    font-style: $style;
+    font-weight: $weight;
+
+    src: font-source-declaration(
+      $font-family,
+      $file-path,
+      $asset-pipeline,
+      $file-formats,
+      $font-url-prefix
+    );
+  }
+}
@@ -0,0 +1,6 @@
+@mixin font-feature-settings($settings...) {
+  @include _bourbon-deprecate-for-prefixing("font-feature-settings");
+
+  @if length($settings) == 0 { $settings: none; }
+  @include prefixer(font-feature-settings, $settings, webkit moz ms spec);
+}
@@ -0,0 +1,12 @@
+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+@mixin hidpi($ratio: 1.3) {
+  @include _bourbon-deprecate-for-prefixing("hidpi");
+
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: round($ratio * 96dpi)),
+  only screen and (min-resolution: $ratio * 1dppx) {
+    @content;
+  }
+}
@@ -0,0 +1,6 @@
+@mixin hyphens($hyphenation: none) {
+  @include _bourbon-deprecate-for-prefixing("hyphens");
+
+  // none | manual | auto
+  @include prefixer(hyphens, $hyphenation, webkit moz ms spec);
+}
@@ -0,0 +1,15 @@
+@mixin image-rendering ($mode:auto) {
+  @include _bourbon-deprecate-for-prefixing("image-rendering");
+
+  @if ($mode == crisp-edges) {
+    -ms-interpolation-mode: nearest-neighbor; // IE8+
+    image-rendering: -moz-crisp-edges;
+    image-rendering: -o-crisp-edges;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+  }
+
+  @else {
+    image-rendering: $mode;
+  }
+}
@@ -0,0 +1,38 @@
+// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
+@mixin keyframes($name) {
+  @include _bourbon-deprecate-for-prefixing("keyframes");
+
+  $original-prefix-for-webkit:    $prefix-for-webkit;
+  $original-prefix-for-mozilla:   $prefix-for-mozilla;
+  $original-prefix-for-microsoft: $prefix-for-microsoft;
+  $original-prefix-for-opera:     $prefix-for-opera;
+  $original-prefix-for-spec:      $prefix-for-spec;
+
+  @if $original-prefix-for-webkit {
+    @include disable-prefix-for-all();
+    $prefix-for-webkit: true !global;
+    @-webkit-keyframes #{$name} {
+      @content;
+    }
+  }
+
+  @if $original-prefix-for-mozilla {
+    @include disable-prefix-for-all();
+    $prefix-for-mozilla: true !global;
+    @-moz-keyframes #{$name} {
+      @content;
+    }
+  }
+
+  $prefix-for-webkit:    $original-prefix-for-webkit    !global;
+  $prefix-for-mozilla:   $original-prefix-for-mozilla   !global;
+  $prefix-for-microsoft: $original-prefix-for-microsoft !global;
+  $prefix-for-opera:     $original-prefix-for-opera     !global;
+  $prefix-for-spec:      $original-prefix-for-spec      !global;
+
+  @if $original-prefix-for-spec {
+    @keyframes #{$name} {
+      @content;
+    }
+  }
+}
@@ -0,0 +1,40 @@
+@mixin linear-gradient($pos, $g1, $g2: null,
+                       $g3: null, $g4: null,
+                       $g5: null, $g6: null,
+                       $g7: null, $g8: null,
+                       $g9: null, $g10: null,
+                       $fallback: null) {
+  @include _bourbon-deprecate-for-prefixing("linear-gradient");
+
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+  $pos-spec: null;
+  $pos-degree: null;
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
+    $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
+    $pos: null;
+  }
+
+  @if $pos {
+    $positions: _linear-positions-parser($pos);
+    $pos-degree: nth($positions, 1);
+    $pos-spec:   nth($positions, 2);
+  }
+
+  $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
+
+  // Set $g1 as the default fallback color
+  $fallback-color: nth($g1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color: $fallback-color;
+  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
+  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
+}
@@ -0,0 +1,12 @@
+@mixin perspective($depth: none) {
+  @include _bourbon-deprecate-for-prefixing("perspective");
+
+  // none | <length>
+  @include prefixer(perspective, $depth, webkit moz spec);
+}
+
+@mixin perspective-origin($value: 50% 50%) {
+  @include _bourbon-deprecate-for-prefixing("perspective-origin");
+
+  @include prefixer(perspective-origin, $value, webkit moz spec);
+}
@@ -0,0 +1,10 @@
+@mixin placeholder {
+  @include _bourbon-deprecate-for-prefixing("placeholder");
+
+  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
+  @each $placeholder in $placeholders {
+    &:#{$placeholder}-placeholder {
+      @content;
+    }
+  }
+}
@@ -0,0 +1,40 @@
+// Requires Sass 3.1+
+@mixin radial-gradient($g1, $g2,
+                       $g3: null, $g4: null,
+                       $g5: null, $g6: null,
+                       $g7: null, $g8: null,
+                       $g9: null, $g10: null,
+                       $pos: null,
+                       $shape-size: null,
+                       $fallback: null) {
+  @include _bourbon-deprecate-for-prefixing("radial-gradient");
+
+  $data: _radial-arg-parser($g1, $g2, $pos, $shape-size);
+  $g1:  nth($data, 1);
+  $g2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
+
+  $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
+
+  // Strip deprecated cover/contain for spec
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  // Set $g1 as the default fallback color
+  $first-color: nth($full, 1);
+  $fallback-color: nth($first-color, 1);
+
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  // Add Commas and spaces
+  $shape-size: if($shape-size, "#{$shape-size}, ", null);
+  $pos:        if($pos, "#{$pos}, ", null);
+  $pos-spec:   if($pos, "at #{$pos}", null);
+  $shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} ");
+
+  background-color:  $fallback-color;
+  background-image: -webkit-radial-gradient(#{$pos}#{$shape-size}#{$full});
+  background-image: radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full});
+}