a little styling

Gemfile

@@ -9,6 +9,7 @@ gem 'font-awesome-rails'
 gem 'jbuilder', '~> 2.6'
 gem 'jquery-rails'
 gem 'json', '~> 2.0.2'
+gem 'normalize-rails'
 gem 'puma', '~> 3.0'
 gem 'sass-rails', '~> 5.0'
 gem 'settingslogic', '~> 2.0.9'

Gemfile.lock

@@ -126,6 +126,7 @@ GEM
     nokogiri (1.6.8)
       mini_portile2 (~> 2.1.0)
       pkg-config (~> 1.1.7)
+    normalize-rails (4.1.1)
     notiffany (0.1.1)
       nenv (~> 0.1)
       shellany (~> 0.0)
@@ -251,6 +252,7 @@ DEPENDENCIES
   listen (~> 3.0)
   minitest-reporters
   mysql2 (>= 0.3.18, < 0.5)
+  normalize-rails
   pry-byebug
   pry-rails
   puma (~> 3.0)

Guardfile

@@ -1,16 +1,16 @@
-# guard 'livereload' do
+guard 'livereload' do
-#   watch(%r{app/assets/.+\.(scss|css|js|erb)})
+  watch(%r{app/assets/.+\.(scss|css|js|erb)})
-#   watch(%r{app/views/.+\.(erb|haml|slim)$})
+  watch(%r{app/views/.+\.(erb|haml|slim)$})
-#   watch(%r{app/controllers/.+\.rb})
+  watch(%r{app/controllers/.+\.rb})
-#   watch(%r{app/helpers/.+\.rb})
+  watch(%r{app/helpers/.+\.rb})
-#   watch(%r{public/.+\.(css|js|html)})
+  watch(%r{public/.+\.(css|js|html)})
-#   watch(%r{config/locales/.+\.yml})
+  watch(%r{config/locales/.+\.yml})
-#
+
-#   # Rails Assets Pipeline
+  # Rails Assets Pipeline
-#   watch(%r{(app|vendor)(/assets/\w+/(.+\.(scss|css|js|erb|html|png|jpg))).*}) do |m|
+  watch(%r{(app|vendor)(/assets/\w+/(.+\.(scss|css|js|erb|html|png|jpg))).*}) do |m|
-#     "/assets/#{m[3]}"
+    "/assets/#{m[3]}"
-#   end
+  end
-# end
+end
 
 guard :minitest, spring: true, all_after_pass: true do
   watch(%r{^test/test_helper\.rb$}) { 'test' }

app/assets/javascripts/application.js

@@ -13,4 +13,5 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require main
+//
+//= require passwords

app/assets/stylesheets/application.scss

@@ -10,34 +10,16 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
+ *= require normalize-rails
  *= require font-awesome
- *= require_tree .
  *= require_self
  */
 
-table {
+@import 'atoms/variables';
-  width: 100%;
-}
 
-th {
+@import 'atoms/base';
-  text-align: left;
-}
 
-td {
+@import 'molecules/passwords';
-  padding: 5px 0;
-}
 
-.field {
+@import 'organisms/tables';
-  margin: 5px 0;
+@import 'organisms/forms';
-}
-
-td.passwd {
-  width: 20em;
-}
-
-.passwd a,
-.passwd i {
-  color: #000;
-  cursor: pointer;
-  text-decoration: none;
-}

app/assets/stylesheets/atoms/_base.scss

@@ -0,0 +1,4 @@
+body {
+  margin: 20px auto;
+  width: 850px;
+}

app/assets/stylesheets/atoms/_variables.scss

@@ -0,0 +1,6 @@
+$copy: #000;
+
+// gutters
+$gutter: 30px;
+$half-gutter: 15px;
+$mini-gutter: 5px;

app/assets/stylesheets/molecules/_passwords.scss

@@ -0,0 +1,10 @@
+.passwd {
+  width: 20em;
+
+  a,
+  i {
+    color: $copy;
+    cursor: pointer;
+    text-decoration: none;
+  }
+}

app/assets/stylesheets/organisms/_forms.scss

@@ -0,0 +1,21 @@
+label {
+  display: block;
+  font-weight: 600;
+  margin: $half-gutter 0 $mini-gutter;
+}
+
+.field {
+  margin: $mini-gutter 0;
+}
+
+input:not([type]),
+[type=text],
+[type=password],
+[type=email] {
+  padding: $mini-gutter;
+}
+
+[type=submit] {
+  margin: $half-gutter 0;
+  padding: $half-gutter;
+}

app/assets/stylesheets/organisms/_tables.scss

@@ -0,0 +1,11 @@
+table {
+  width: 100%;
+}
+
+th {
+  text-align: left;
+}
+
+td {
+  padding: 5px 0;
+}