Basis-Code

Ein kurzes Tutorial zum Basis-Code den ich verwende.

BasicApp

Ich verwende einen kurzen Code für meine tutorials, um sie zumindest ein klein wenig ansprechender zu gestallten und eine
Basis zu haben. Damit wir auch sehen können was in dem Code steckt, werden wir eine kleine App erstellen. Wir erstellen einen User mit name und eMail.

$ rails new basic
$ cd basic
$ rails g scaffold User name email
$ rails db:migrate

So sieht unsere App bis jetzt aus.

Container in App

Jetzt bringen wir ein bisschen Farbe und Form in unsere App. Als erstes bringen wir die classe container in unsere App.

// app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>

  <head>
    <title>Basic</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <main class="container">
      <%= yield %>
    </main>
  </body>

</html>

Gem instalieren

Jetzt erstellen wir eine scss Datei Namens main, app/assets/stylesheets/_main.scss. Damit wir mit scss arbeiten können müssen wir ein gem installieren.

// Gemfile

gem 'sassc-rails'

und nun müssen wir noch bundeln.

$ bundle install

Gestalltung

Nun fangen wir mit dem Gestalten an.

// app/assets/stylesheets/_main.scss

html,
body {
  background-color: #c2e7ff;
  font-family: Verdana, Helvetica, Arial;
  font-size: 14px;

  a {
    color: #0000ff;

    &,
    &:active,
    &:visited {
      color: #2e47d2;
      background-color: #fff;
    }

    img {
      border: none;
    }
  }

  .container {
    width: 75%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px 40px;
    margin-top: 40px;
    box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
    border-radius: 24px;
  }
}

Das ist doch schon ein bisschen freundlicher, nun wollen wir noch Inputfelder etwas freundlicher gestallten.

// app/assets/stylesheets/_main.scss

form {
  .field,
  .actions {
    margin: 10px 0;
  }
  label {
    display: block;
  }
}
textarea,
input {
  margin: 10px 0;
  padding: 1rem;
  width: 100%;
  max-width: 50vw;
}
textarea {
  min-height: 10rem;
}
button,
input[type="submit"] {
  width: 200px;
}
button {
  margin-top: 2rem;
  padding: 1rem;
}
select {
  padding: 1rem;
  width: 100%;
  max-width: 25vw;
}
input[type="checkbox"] {
  position: relative;
  left: 0;
  width: auto;
}

Das Ergebnis:

Als nächstes wollen wir noch die error Behandlung optimieren. Damit wir ein error bekommen müssen wir im User noch eine Zeile programmieren.

// app/models/user.rb

class User < ApplicationRecord
  validates_presence_of :name, :email
end

Das Ergebnis ist ein error wenn wir keine Daten für einen User eingeben.

Optimierung

Sieht nicht schlecht aus geht aber noch besser.

// app/assets/stylesheets/_main.scss

ul {
  padding-left: 20px;
}

ul li {
  margin: 5px 0;
}

.notice,
.error,
.alert {
  padding: 5px 8px;
  margin: 10px 0;
}

.notice {
  background-color: #cfc;
  border: solid 1px #6c6;
}

.error,
.alert {
  background-color: #fcc;
  border: solid 1px #c66;
}

.error_messages {
  width: 400px;
  border: 2px solid #cf0000;
  padding: 0px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  font-size: 12px;


  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 12px;
    margin: 0;
    background-color: #c00;
    color: #fff;
  }

  p {
    margin: 8px 10px;
  }

  ul {
    margin: 0;
  }
}

.field_with_errors {
  display: inline;
}

Jetzt müssen wir noch ein paar Änderungen vornehmen. Wenn euch die so gefällt reicht der Code schon aus. Ich hätte gerne das ganze ein wenig anders daher möchte ich die error Behandlung etwas umgestallten. Ein classe fügen wir noch der form partial hinzu.

// app/views/users/_form.html.erb

<% if user.errors.any? %>
<div class="error_messages">
  <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

  <ul>
    <% user.errors.each do |error| %>
    <li><%= error.full_message %></li>
    <% end %>
  </ul>
</div>
<% end %>

Jetzt entfernen wir noch eine Zeile. <p style="color: green"><%= notice %></p> aus der app/views/users/index.html.erb und der app/views/users/show.html.erb. Wir fügen an einer Stelle noch ein paar Zeilen code hinzu.

// app/views/layouts/application.html.erb

<body>

  <main class="container">
    <% flash.each do |name, msg| %>
    <%= content_tag :div, msg, class: name %>
    <% end %>
    <%= yield %>
  </main>
</body>

So gefällt mir der Code besser.

Meld dich an und schreibe ein Kommentar