a little styling

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 {
-  width: 100%;
-}
+@import 'atoms/variables';
 
-th {
-  text-align: left;
-}
+@import 'atoms/base';
 
-td {
-  padding: 5px 0;
-}
+@import 'molecules/passwords';
 
-.field {
-  margin: 5px 0;
-}
-
-td.passwd {
-  width: 20em;
-}
-
-.passwd a,
-.passwd i {
-  color: #000;
-  cursor: pointer;
-  text-decoration: none;
-}
+@import 'organisms/tables';
+@import 'organisms/forms';

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;
+}