Fix merge conflicts

api/hooks/webpack/index.js

@@ -0,0 +1,43 @@
+module.exports = function (sails) {
+  return {
+
+    initialize: function (callback) {
+
+      try {
+        var webpack = require('webpack');
+        var server = require('webpack-dev-server');
+        var config = require('../../../webpack.config');
+      } catch (error) {
+        console.error('WebPack hook has errored.');
+        console.error(error);
+      }
+
+      if (process.env.NODE_ENV === 'development') {
+
+        var port = 3000;
+
+        new server(webpack(config), {
+          contentBase: '.tmp/',
+          publicPath: config.publicPath,
+          path: '.tmp/public/bundles',
+          hot: true,
+          quiet: false,
+          noInfo: false,
+          lazy: true,
+          watchDelay: 300
+        }).listen(port, 'localhost', function (error, result) {
+          if (error) {
+            console.error('WebPack hook has errored.');
+            console.error(error);
+          } else {
+            console.log('Listening to http://localhost:' + port);
+            console.log(config);
+            return callback();
+          }
+        }.bind(this));
+
+      }
+    }
+
+  };
+};

assets/js/components/footer.jsx

@@ -0,0 +1,36 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+var classes = require('react-classes');
+
+var Footer = React.createClass({
+
+  mixins: [classes],
+
+  componentDidMount: function () {
+
+  },
+
+  getInitialState: function () {
+    return {
+
+    };
+  },
+
+  render: function () {
+
+    var classes = this.getClass('', {
+
+    });
+
+    return (
+      <div>
+
+      </div>
+    ) 
+
+  }
+
+});
+
+module.exports = Footer;

assets/js/components/header.jsx

@@ -0,0 +1,38 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+var classes = require('react-classes');
+
+var Navigation = require('./navigation');
+
+var Header = React.createClass({
+
+  mixins: [classes],
+
+  componentDidMount: function () {
+
+  },
+
+  getInitialState: function () {
+    return {
+
+    };
+  },
+
+  render: function () {
+
+    var classes = this.getClass('', {
+
+    });
+
+    return (
+      <div>
+        <Navigation />
+      </div>
+    ) 
+
+  }
+
+});
+
+module.exports = Header;

assets/js/components/input.jsx

@@ -0,0 +1,63 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+var classes = require('react-classes');
+
+var Input = React.createClass({
+
+  mixins: [React.addons.LinkedStateMixin, classes],
+
+  propTypes: {
+    label: React.PropTypes.string, // Optional: The label for the input
+    placeholder: React.PropTypes.string, // Optional: The input placeholder text
+    type: React.PropTypes.string, // The type of input
+    value: React.PropTypes.string, // The initial value of the input
+    onChange: React.PropTypes.func, // Callback to run when the input changes
+    valueLink: React.PropTypes.shape({
+      value: React.PropTypes.string.isRequired,
+      requestChange: React.PropTypes.func.isRequired
+    })
+  },
+
+  getDefaultProps: function () {
+    return {
+      label: '',
+      type: 'text',
+      value: '',
+      onChange: function () {
+        return;
+      },
+      valueLink: null
+    }
+  },
+
+  getValueLink: function (props) {
+    return props.valueLink || {
+      value: props.value,
+      requestChange: props.onChange
+    };
+  },
+
+  _onChange (event) {
+    this.getValueLink(this.props).requestChange(event.target.value);
+  },
+
+  render: function () {
+    return (
+      <div className="form-group">
+        if (this.props.label) {
+          <label for="">{this.props.label}</label>
+        }
+        <input
+          name=""
+          type={this.props.type}
+          className="form-control"
+          value={this.getValueLink(this.props).value}
+          onChange={this._onChange}
+        />
+      </div>
+    )
+  }
+});
+
+module.exports = Input;

assets/js/components/navigation.jsx

@@ -0,0 +1,30 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+var classes = require('react-classes');
+
+var Navigation = React.createClass({
+
+  mixins: [classes],
+
+  componentDidMount: function () {
+
+  },
+
+  render: function () {
+
+    var classes = this.getClass('', {
+
+    });
+
+    return (
+      <div>
+
+      </div>
+    ) 
+
+  }
+
+});
+
+module.exports = Navigation;

assets/less/modules/buttons/base.less

@@ -2,13 +2,23 @@
  * @module buttons#base
  * @description Common button styles.
  */
-
-button,
-.btn {
-
+
+@import 'mixins';
+
+.btn,
+button {
+  font-family: inherit;
+  font-size: 1rem;
+  padding: .5rem;
+  margin: .5rem;
+  color: @color-black;
+  border: none;
+  background-color: @color-grey;
+  line-height: 1;
+  text-decoration: none;
+  text-transform: uppercase;
   -webkit-appearance: none;
-
-  .box-sizing();
+  box-sizing: border-box;
 
   &:hover,
   &:active { 
@@ -23,3 +33,25 @@ button,
   }
 
 }
+
+.btn-primary,
+.btn-orange {
+  .button-variant(@color-orange);
+}
+
+.btn-secondary,
+.btn-blue {
+  //.button-variant(@color-blue);
+}
+
+.btn-success {
+  //.button-variant(@color-green);
+}
+
+.btn-warning {
+  //.button-variant(@color-yellow);
+}
+
+.btn-error {
+  //.button-variant(@color-red);
+}

assets/less/modules/buttons/mixins.less

@@ -0,0 +1,28 @@
+.btn-background (@color, @hover-color, @selected-color, @text-color) {
+
+  color: @text-color;
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@color, darken(@color, 5%));
+
+  &:hover {
+    color: @text-color-highlight;
+    background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 5%));
+  }
+
+  &.selected,
+  &.selected:hover {
+    color: @text-color-highlight;
+    background-image: -webkit-linear-gradient(darken(@selected-color, 5%), @selected-color);
+    &:hover {
+      background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 5%));
+    }
+  }
+
+}
+
+.btn-variant (@color) {
+  @background: darken(@color, 10%);
+  @hover: @color;
+  @selected: @color;
+  .btn-background(@background, @hover, @selected, @text-color-highlight);
+}