Add some styling

Gemfile

@@ -8,14 +8,13 @@ gem 'jquery-rails'
 gem 'turbolinks'
 gem 'jbuilder', '~> 1.2'
 gem 'clearance'
+gem 'bourbon'
+gem 'neat'
+gem 'bitters'
 group :doc do
   gem 'sdoc', require: false
 end
 
-group :development do
-  gem 'quiet_assets'
-  gem 'pry-rails'
-end
 
 group :development do
   gem 'quiet_assets'

Gemfile.lock

@@ -27,6 +27,13 @@ GEM
       tzinfo (~> 0.3.37)
     arel (4.0.2)
     bcrypt (3.1.7)
+    bitters (0.9.3)
+      bourbon (>= 3.1)
+      sass (>= 3.2)
+      thor
+    bourbon (3.1.8)
+      sass (>= 3.2.0)
+      thor
     builder (3.1.4)
     clearance (1.2.1)
       bcrypt
@@ -60,6 +67,9 @@ GEM
     mime-types (1.25.1)
     minitest (4.7.5)
     multi_json (1.9.2)
+    neat (1.5.0)
+      bourbon (>= 2.1)
+      sass (>= 3.2)
     pg (0.17.1)
     polyglot (0.3.4)
     pry (0.9.12.6)
@@ -125,10 +135,13 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bitters
+  bourbon
   clearance
   coffee-rails (~> 4.0.0)
   jbuilder (~> 1.2)
   jquery-rails
+  neat
   pg
   pry-rails
   quiet_assets

app/assets/stylesheets/_global.scss

@@ -0,0 +1,114 @@
+header.navigation {
+  background-color: #333333;
+  border-bottom: 1px solid #1a1a1a;
+  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  height: 60px;
+  width: 100%;
+  z-index: 999; }
+
+header.navigation .menu-wrapper {
+  max-width: 68em;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  z-index: 9999; }
+
+header.navigation .menu-wrapper:after {
+  content: "";
+  display: table;
+  clear: both; }
+
+header.navigation .logo {
+  float: left;
+  max-height: 60px;
+  padding-left: 1em;
+  padding-right: 2em; }
+
+header.navigation .logo img {
+  max-height: 60px;
+  padding: .8em 0; }
+
+header.navigation .menu-button {
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  display: block;
+  float: right;
+  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-weight: 700;
+  line-height: 60px;
+  margin: 0;
+  padding-right: 1em;
+  text-transform: uppercase; }
+
+@media screen and (min-width: 53.75em) {
+  header.navigation .menu-button {
+    display: none; } }
+header.navigation .menu-button:hover {
+  color: white; }
+
+@media screen and (min-width: 53.75em) {
+  header.navigation .nav {
+    float: left; } }
+header.navigation ul#navigation-menu {
+  clear: both;
+  -webkit-transform-style: preserve-3d;
+  display: none;
+  margin: 0 auto;
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+  z-index: 9999; }
+
+@media screen and (min-width: 53.75em) {
+  header.navigation ul#navigation-menu {
+    display: inline;
+    margin: 0;
+    padding: 0; } }
+header.navigation ul li {
+  background: #333333;
+  display: block;
+  line-height: 60px;
+  overflow: hidden;
+  padding-right: .8em;
+  text-align: right;
+  width: 100%;
+  z-index: 9999; }
+
+@media screen and (min-width: 53.75em) {
+  header.navigation ul li {
+    background: transparent;
+    display: inline;
+    line-height: 60px;
+    padding-right: 2em;
+    text-decoration: none;
+    width: auto; } }
+header.navigation ul li a {
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.7); }
+
+header.navigation ul li a:hover {
+  color: white; }
+
+@media screen and (min-width: 53.75em) {
+  header.navigation .sign-up {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    padding-right: 1em; }
+
+  header.navigation .sign-up a {
+    -webkit-transition: all 0.2s ease-in-out;
+    -moz-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
+    background: #477dca;
+    border-radius: 0.1875em;
+    color: white;
+    font-size: .8em;
+    font-weight: 800;
+    padding: .6em 1em;
+    text-transform: uppercase; }
+
+  header.navigation .sign-up a:hover {
+    background: #6f99d5; } }
+
+

app/assets/stylesheets/application.css.scss

@@ -0,0 +1,4 @@
+@import "bourbon";
+@import "bitters/bitters";
+@import "neat";
+@import "global";

app/assets/stylesheets/bitters/_bitters.scss

@@ -0,0 +1,16 @@
+// Neat Settings -- uncomment if using Neat
+///////////////////////////////////////////////////////////////////////////////
+@import "neat-helpers"; // or "neat/neat-helpers" when not in Rails
+@import "grid-settings";
+
+
+// Bitters
+///////////////////////////////////////////////////////////////////////////////
+@import "variables";
+@import "extends/base";
+@import "mixins/base";
+@import "typography";
+@import "forms";
+@import "tables";
+@import "lists";
+@import "flashes";

app/assets/stylesheets/bitters/_flashes.scss

@@ -0,0 +1,11 @@
+%flash-error {
+  @include flash($error-color);
+}
+
+%flash-notice {
+  @include flash($notice-color);
+}
+
+%flash-success {
+  @include flash($success-color);
+}

app/assets/stylesheets/bitters/_forms.scss

@@ -0,0 +1,95 @@
+$form-border-color: $base-border-color;
+$form-border-color-hover: darken($base-border-color, 10);
+$form-border-color-focus: $base-accent-color;
+$form-border-radius: $base-border-radius;
+$form-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.06);
+$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7);
+$form-font-size: $base-font-size;
+$form-font-family: $base-font-family;
+
+fieldset {
+  background: lighten($base-border-color, 10);
+  border: 1px solid $base-border-color;
+  margin: 0 0 ($base-line-height / 2) 0;
+  padding: $base-line-height;
+}
+
+input,
+label,
+select {
+  display: block;
+  font-family: $form-font-family;
+  font-size: $form-font-size;
+}
+
+label {
+  font-weight: bold;
+  margin-bottom: $base-line-height / 4;
+
+  &.required:after {
+    content: "*";
+  }
+
+  abbr {
+    display: none;
+  }
+}
+
+textarea,
+#{$all-text-inputs},
+select[multiple=multiple] {
+  @include box-sizing(border-box);
+  @include transition(border-color);
+  background-color: white;
+  border-radius: $form-border-radius;
+  border: 1px solid $form-border-color;
+  box-shadow: $form-box-shadow;
+  font-family: $form-font-family;
+  font-size: $form-font-size;
+  margin-bottom: $base-line-height / 2;
+  padding: ($base-line-height / 3) ($base-line-height / 3);
+  width: 30%;
+
+  &:hover {
+    border-color: $form-border-color-hover;
+  }
+
+  &:focus {
+    border-color: $form-border-color-focus;
+    box-shadow: $form-box-shadow-focus;
+    outline: none;
+  }
+}
+
+textarea {
+  resize: vertical;
+}
+
+input[type="search"] {
+  @include appearance(none);
+}
+
+input[type="checkbox"], input[type="radio"] {
+  display: inline;
+  margin-right: $base-line-height / 4;
+}
+
+input[type="file"] {
+  width: 100%;
+}
+
+select {
+  width: auto;
+  max-width: 100%;
+  margin-bottom: $base-line-height;
+}
+
+button,
+input[type="submit"] {
+  @extend %button;
+  @include appearance(none);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}

app/assets/stylesheets/bitters/_grid-settings.scss

@@ -0,0 +1,14 @@
+// Neat Overrides
+///////////////////////////////////////////////////////////////////////////////
+// $column: 90px;
+// $gutter: 30px;
+// $grid-columns: 12;
+// $max-width: em(1088);
+
+// Neat Breakpoints
+///////////////////////////////////////////////////////////////////////////////
+$medium-screen: em(640);
+$large-screen: em(860);
+
+$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
+$large-screen-up: new-breakpoint(min-width $large-screen 8);

app/assets/stylesheets/bitters/_lists.scss

@@ -0,0 +1,31 @@
+ul, ol {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  &%default-ul {
+    list-style-type: disc;
+    margin-bottom: $base-line-height / 2;
+    padding-left: $base-line-height;
+  }
+
+  &%default-ol {
+    list-style-type: decimal;
+    margin-bottom: $base-line-height / 2;
+    padding-left: $base-line-height;
+  }
+}
+
+dl {
+  line-height: $base-line-height;
+  margin-bottom: $base-line-height / 2;
+
+  dt {
+    font-weight: bold;
+    margin-top: $base-line-height / 2;
+  }
+
+  dd {
+    margin: 0;
+  }
+}

app/assets/stylesheets/bitters/_tables.scss

@@ -0,0 +1,22 @@
+table {
+  border-collapse: collapse;
+  margin: ($base-line-height / 2) 0;
+  table-layout: fixed;
+  width: 100%;
+}
+
+th {
+  border-bottom: 1px solid darken($base-border-color, 15%);
+  font-weight: bold;
+  padding: ($base-line-height / 2) 0;
+  text-align: left;
+}
+
+td {
+  border-bottom: 1px solid $base-border-color;
+  padding: ($base-line-height / 2) 0;
+}
+
+tr, td, th {
+  vertical-align: middle;
+}