Rails Girls Guides

Add design using HTML & CSS

Created by Alex Liao, @alexliao

Now the app is running well, but it still looks like scaffold. Let’s add some design to make it look like a professional website. When you’ve finished this tutorial, your app will look like this.

1. Delete unwanted scaffold CSS

Delete the file app/assets/stylesheets/scaffolds.scss because we don’t really need the default style generated by Rails.

Now refresh the page at http://localhost:3000/ideas. You will not find much change but it’s good preparation for the following steps.

2. Refine the navigation

Considering “idea” is the most important object in your app, we are going to put the “New Idea” button on the navigation bar to make it always available.

Open app/views/layouts/application.html.erb, under the line

<li class="nav-item active">
  <a class="nav-link" href="/ideas">Ideas</a>
</li>

add

<li class="nav-item">
  <%= link_to 'New Idea', new_idea_path, class: "nav-link" %>
</li>

3. Design the idea list

Now it’s time to make the idea list page look professional. For that, we are going to replace the table layout with a div layout.

Coach: Talk a little about table vs div.

Open app/views/ideas/index.html.erb in your text editor and replace all lines with

<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 %>

Coach: Explain what the new code means line by line, and talk a little about Bootstrap 12 grids layout.

Refresh it! We get a nice looking idea list. Click the “New Idea” button, and create more ideas with real text and pretty pictures - the page will look much better with content. There is a principle of contemporary web design: content is the best decoration.

4. Design the idea details page

Click the title of an idea, and you will be brought to the details page of the idea. Now it is still scaffold generated by Rails, so let’s make it better.

Open app/views/ideas/show.html.erb in your text editor and replace all lines with

<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>

Coach: Explain what the new code means line by line.

What next?