Basic layout

app/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>KreditsWeb</title>
     <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
     {{content-for "head"}}
 

app/routes/application.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

app/routes/index.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

app/styles/_layout.scss

@@ -0,0 +1,23 @@
+body {
+}
+
+section {
+  @include outer-container;
+  margin-top: 6rem;
+
+  @include media($mobile) {
+    margin-top: 3rem;
+  }
+
+  header {
+    @include span-columns(10);
+    @include shift(1);
+    text-align: center;
+    // background-color: purple;
+
+    @include media($mobile) {
+      @include span-columns(10);
+      @include shift(1);
+    }
+  }
+}

app/styles/app.scss

@@ -0,0 +1,54 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+*:hover, *:active, *:focus {
+  outline: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+@import "bourbon";
+@import "settings/neat";
+@import "neat";
+@import "settings/breakpoints";
+@import "layout";
+
+$font-family-sans: 'Open Sans', sans-serif;
+
+body {
+  font-family: $font-family-sans;
+  font-size: 16px;
+  color: #fff;
+  background-image: url('/img/bg.jpg');
+  background-repeat: none;
+}
+
+@media screen and (min-width: 900px) {
+  body {
+    background-size: cover;
+  }
+}
+
+h1, h2, h3, h4, h5 {
+  font-weight: normal;
+  font-size: 1rem;
+}
+
+input, button {
+  font-family: $font-family-sans;
+  font-size: 1rem;
+}
+
+section {
+  h2 {
+    font-size: 2.8rem;
+    font-weight: 300;
+    color: lightblue;
+    @include media($mobile) {
+      font-size: 2rem;
+    }
+  }
+}

app/styles/settings/_breakpoints.scss

@@ -0,0 +1 @@
+$mobile: new-breakpoint(max-width 600px);

app/styles/settings/_neat.scss

@@ -0,0 +1,5 @@
+// $visual-grid: true;
+// $visual-grid-color: red;
+// $visual-grid-index: front;
+// $visual-grid-opacity: 0.5;
+$max-width: em(500, 12);

app/templates/application.hbs

@@ -0,0 +1,3 @@
+<main>
+  {{outlet}}
+</main>

app/templates/index.hbs

@@ -0,0 +1,7 @@
+<section id="content">
+
+  <header>
+    <h2>Kosmos Contributors</h2>
+  </header>
+
+</section>

bower.json

@@ -2,6 +2,8 @@
   "name": "kredits-web",
   "dependencies": {
     "ember": "~2.10.0",
-    "ember-cli-shims": "0.1.3"
+    "ember-cli-shims": "0.1.3",
+    "bourbon": "^4.2.7",
+    "neat": "^1.8.0"
   }
 }

ember-cli-build.js

@@ -5,6 +5,12 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 module.exports = function(defaults) {
   var app = new EmberApp(defaults, {
     // Add options here
+    sassOptions: {
+      includePaths: [
+        'bower_components/bourbon/app/assets/stylesheets',
+        'bower_components/neat/app/assets/stylesheets'
+      ]
+    }
   });
 
   // Use `app.import` to add additional libraries to the generated

package.json

@@ -27,14 +27,13 @@
     "ember-cli-jshint": "^2.0.1",
     "ember-cli-qunit": "^3.0.1",
     "ember-cli-release": "^0.2.9",
+    "ember-cli-sass": "6.1.1",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-test-loader": "^1.1.0",
     "ember-cli-uglify": "^1.2.0",
-    "ember-data": "^2.10.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
     "ember-resolver": "^2.0.3",
-    "ember-welcome-page": "^1.0.3",
     "loader.js": "^4.0.10"
   },
   "engines": {

tests/unit/routes/application-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:application', 'Unit | Route | application', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});

tests/unit/routes/index-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:index', 'Unit | Route | index', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});