Add some styling

app/assets/stylesheets/application.css

@@ -16,3 +16,6 @@
  *= require_self
  *= require purecss
  */
+body {
+  padding: 30px;
+}

app/assets/stylesheets/forms.css.scss

@@ -0,0 +1,22 @@
+.error_panel {
+  margin-bottom: 1em;
+  border-radius: 3px;
+  border: 1px solid #ebccd1;
+  .error_header {
+    .error_title {
+      font-size: 16px;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    padding: 10px 15px;
+    color: #a94442;
+    background-color: #f2dede;
+  }
+  .error_body {
+    padding: 15px;
+    ul {
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+  }
+}

app/assets/stylesheets/purecss.css

@@ -7,3 +7,39 @@
   =require purecss/menus
   =require purecss/tables
 */
+
+/* Alerts */
+.pure-alert {
+    position: relative;
+    margin-bottom: 1em;
+    padding: 1em;
+    background: #ccc;
+    border-radius: 3px;
+}
+
+.pure-alert label {
+    display: inline-block;
+    *display: inline;
+    /* IE7 inline-block hack */
+    *zoom: 1;
+    white-space: nowrap;
+}
+
+.pure-alert {
+    background-color: rgb(209, 235, 238);
+    color: rgb(102, 131, 145);
+}
+.pure-alert-error {
+    background-color: #D13C38;
+    color: #fff;
+}
+
+.pure-alert-warning {
+    background-color: rgb(250, 191, 103);
+    color: rgb(151, 96, 13);
+}
+
+.pure-alert-success {
+    background-color: rgb(83, 180, 79);
+    color: #fff;
+}

app/views/layouts/application.html.haml

@@ -8,6 +8,6 @@
     = csrf_meta_tags
   %body
     - flash.each do |key, value|
-      .alert{ :class => "alert-#{key}" }
+      .pure-alert{ class: "pure-alert-#{key}" }
         = value
     = yield

app/views/partials/_form_errors.html.haml

@@ -0,0 +1,10 @@
+- if object.errors.any?
+  .error_panel
+    .error_header
+      %h3.error_title
+        This transaction could not be saved.
+    .error_body
+      %ul
+        - object.errors.full_messages.each do |tr|
+          %li
+            = tr

app/views/transactions/new.html.haml

@@ -1,7 +1,8 @@
-= @transaction.errors.full_messages.join(", ")
+= render 'partials/form_errors', object: @transaction
 = simple_form_for @transaction do |f|
   = f.hidden_field :debtor, value: current_user.name
   = f.collection_select :creditor, User.all, :name, :name, {}, { class: 'select2-selector' }
   = f.input :amount
   = f.input :message, required: true
-  = f.submit "Send it!"
+  .pure-controls
+    = f.button :submit, "Send it!"

config/initializers/simple_form.rb

@@ -5,7 +5,7 @@ SimpleForm.setup do |config|
   # wrapper, change the order or even add your own to the
   # stack. The options given below are used to wrap the
   # whole input.
-  config.wrappers :default, class: :input,
+  config.wrappers :default, class: "input pure-control-group",
     hint_class: :field_with_hint, error_class: :field_with_errors do |b|
     ## Extensions enabled by default
     # Any of these extensions can be disabled for a
@@ -61,7 +61,7 @@ SimpleForm.setup do |config|
   config.boolean_style = :nested
 
   # Default class for buttons
-  config.button_class = 'btn'
+  config.button_class = 'pure-button pure-button-primary'
 
   # Method used to tidy up errors. Specify any Rails Array method.
   # :first lists the first message for each field.
@@ -104,7 +104,7 @@ SimpleForm.setup do |config|
 
   # You can define the default class to be used on forms. Can be overriden
   # with `html: { :class }`. Defaulting to none.
-  # config.default_form_class = nil
+  config.default_form_class = "pure-form"
 
   # You can define which elements should obtain additional classes
   # config.generate_additional_classes_for = [:wrapper, :label, :input]

lib/templates/haml/scaffold/_form.html.haml

@@ -6,5 +6,5 @@
     = f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %>
   <%- end -%>
 
-  .form-actions
+  .pure-controlls
     = f.button :submit