הוסיפי עיצוב עם HTML ו-CSS

מאת Alex Liao, @alexliao

כעת האפליקצייה שלך רצה היטב, אבל היא עדיין נראית כמו שלד. בואי נעצב אותה קצת כדי לגרום לה להראות כמו אתר מקצועי. כשתסיימי את המדריך הזה, האפליקצייה שלך תראה כך.

שלב 1: התאימי את ה-application layout

פתחי את app/assets/stylesheets/application.css , והחליפי את השורה

body { padding-top: 100px; }

עם

body { padding-top: 60px; }

לסיום, מחקי את הקובץ app/assets/stylesheets/scalffolds.css.scss מכיוון שאנחנו לא באמת צריכים את העיצוב ברירת המחדל שנוצר אוטומטית ע”י Rails.

כעת רפרפסי את העמוד http://localhost:3000/ideas, ונמצא שלא הרבה השתנה, אבל זאת הכנה טובה עבור השלבים הבאים.

שלב 2: עדני את עיצוב הניווט

בהנחה שהרעיון הוא האובייקט החשוב ביותר באפליקצייה שלך, אנחנו הולכים לשים את הקישור ל-“New Idea” בבר הניווט על מנת שיהיה תמיד זמין.

פתחי את app/views/layouts/application.html.erb, ותחת השורה

<li class="active"><a href="/ideas">Ideas</a></li>

הוסיפי

<li ><%= link_to 'New Idea', new_idea_path %></li>

שלב 3: עצבי את רשימת הרעיונות

הגיע הזמן לגרום לעמוד רשימת הרעיונות להראות מקצועי. על מנת לעשות זאת, אנחנו הולכים להחליף את הטבלאות (table layout) ב-div-ים (div layout).

מדריך/ה: דברי מעט על טבלאות לעומת div-ים.

פתחי את app/views/ideas/index.html.erb בעורך הטקסט שלך והחליפי את כל השורות עם

<h1>Listing ideas</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="col-md-4">
        <%= image_tag idea.picture_url, width: '100%' if idea.picture.present?%>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

מאמן/ת: הסבירי את הקוד החדש, שורה אחר שורה, ודברי מעט על Bootstrap 12 grids layout.

רפרשי! קיבלנו רשימת רעיונות שנראית טוב. לחצי על כפתור “New Idea”, צרי רעיונות נוספים עם טקסט אמיתי ותמונות יפות. העמוד נראה הרבה יותר טוב עם תוכן. יש עיקרון בעיצוב אתרים עכשווי: התוכן הוא הקישוט הטוב ביותר.

שלב 4: עצבי את עמוד הרעיון

לחצי על הכותרת של אחד הרעיונות, ותגיעי לעמוד הפירוט שלו. כרגע זה עדיין שלד שנוצר אוטומטית על ידי Rails. בואי נגרום לו להראות טוב יותר.

פתחי את app/views/ideas/show.html.erb בעורך הטקסט שלך והחליפי את כל השורות ב-

<p id="notice"><%= notice %></p>

<div class="row">
  <div class="col-md-9">
    <%= image_tag(@idea.picture_url, width: '100%') if @idea.picture.present? %>
  </div>

  <div class="col-md-3">
    <p><b>Name: </b><%= @idea.name %></p>
    <p><b>Description: </b><%= @idea.description %></p>
    <p>
      <%= link_to 'Edit', edit_idea_path(@idea) %> |
      <%= link_to 'Destroy', @idea, data: { confirm: 'Are you sure?' }, method: :delete %> |
      <%= link_to 'Back', ideas_path %>
    </p>
  </div>
</div>

מדריך/ה: הסבירי את הקוד החדש שורה אחר שורה.

מה הלאה?