Finish v0.3 - Semantic styles

frontend/app/posts/index/template.hbs

@@ -5,6 +5,11 @@
 <h2>Posts</h2>
 
 <ul>
+  <li>
+    {{#link-to 'posts.semantic-styles'}}
+      v0.3 - Semantic styles
+    {{/link-to}}
+  </li>
   <li>
     {{#link-to 'posts.smoldering-coals'}}
       v0.2 - Smoldering coals

frontend/app/posts/semantic-styles/route.js

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

frontend/app/posts/semantic-styles/template.hbs

@@ -0,0 +1,72 @@
+<h1 class="blog-title ui header">v0.3 - Semantic styles</h1>
+
+<ul class="blog-post-meta">
+  <li class="meta-item">
+    August 1, 2016
+  </li>
+</ul>
+
+<p class="overview"><i class="idea icon"></i>Today we are going be adding some stylistic updates using <a href="http://semantic-ui.com/">semantic-ui</a> and <a href="http://sass-lang.com/">scss</a>.</p>
+
+<h2>Installing the Addons</h2>
+
+<p>Ember has an excellent addon ecosystem, which can be browsed here: <a href="https://www.emberaddons.com/">https://www.emberaddons.com/</a>. Let's install a couple useful addons to improve the look of our blog.</p>
+
+{{#code-snippet lang="bash"}}
+# embrails/frontend
+ember install semantic-ui-ember
+ember install ember-component-css
+ember install ember-cli-sass
+{{/code-snippet}}
+
+<h2>Descriptions</h2>
+
+<ul>
+  <li>
+    <a href="https://github.com/Semantic-Org/Semantic-UI-Ember">semantic-ui-ember</a> - Official Semantic UI Integration for Ember. Adds in the <b>semantic-ui</b> bower pacakge, and provides a cohesive set of components which we can use to build a beautiful and responsive website.
+  </li>
+  <li>
+    <a href="https://github.com/ebryn/ember-component-css">ember-component-css</a> - An Ember CLI addon which allows you to specify a component-specific style sheet inside of component pod directories. Rules defined in the style-sheet will automatically be namespaced with an autogenerated class. That autogenerated class will also be injected into your component's classNames property. This enables you to worry less about rules clashing across component styles.
+  </li>
+  <li>
+    <a href="https://github.com/aexmachina/ember-cli-sass">ember-cli-sass</a> - Use node-sass to preprocess your ember-cli app's files, with support for sourceMaps and include paths. Allows sass and scss files to be used in ember.
+  </li>
+</ul>
+
+
+<h2>Configuration</h2>
+
+<p>First we need to setup our ember-cli-build.js file. This file is used to setup the configuration of the ember build process. When including 3rd pary libraries, like semantic-ui, we must tell ember to import the css files when using a sass preprocessor.</p>
+
+{{#code-snippet lang="javascript"}}
+// frontend/ember-cli-build.js
+...
+var app = new EmberApp(defaults, {
+  // Add options here
+  sassOptions: {
+    includePaths: [
+      'bower_components/semantic-ui/dist/'
+    ]
+  }
+});
+...
+{{/code-snippet}}
+
+<p>Next we will rename frontend/app/styles/app.css to frontend/app/styles/app.scss. SCSS is a superset of traditional CSS with additional powerful features such as mixins and importing of css rules. Now we can import the semantic-ui css into our application, and any scss/sass files contained within our pods from ember-component-css.</p>
+
+{{#code-snippet lang="scss"}}
+// frontend/app/styles/app.scss
+@import "semantic";
+@import "pod-styles";
+...
+{{/code-snippet}}
+
+<h2>Result</h2>
+
+<p>After adding in some basic css to our app.scss file, we now have a respectable looking application.</p>
+
+<img class="centered" src="assets/images/v0.3/result.png">
+
+<p>In our next post we will move our hardcoded html posts to the database and hookup a json-api serializer. Thanks!</p>
+
+<p>Source code here: <a href="https://github.com/bwittenbrook3/embrails/tree/v0.3">https://github.com/bwittenbrook3/embrails/tree/v0.3</a></p>

frontend/app/router.js

@@ -9,6 +9,7 @@ Router.map(function() {
   this.route('posts', {path: "/"}, function() {
     this.route('hello-world');
     this.route('smoldering-coals');
+    this.route('semantic-styles');
   });
 });
 

frontend/app/styles/app.scss

@@ -4,11 +4,13 @@
 
 body {
   background-color: #fcfcfc;
+  padding-bottom: 30px;
 }
 
-svg {
-  color: #999;
+.overview {
+  font-size: 2.8em;
 }
+
 p {
   font-size: 1.15em;
   line-height: 1.6em;
@@ -22,7 +24,7 @@ ul, ol {
 
 blockquote {
   font-size: 2.0em;
-  line-height: 3.0em;
+  line-height: 1.2em;
 }
 
 a {