Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
101 lines (71 sloc) 3.32 KB
layout title permalink
default
Add design using HTML & CSS
design

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

{% highlight erb %}

  • Ideas
  • {% endhighlight %}

    add {% highlight erb %}

  • <%= link_to 'New Idea', new_idea_path, class: "nav-link" %>
  • {% endhighlight %}

    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

    {% highlight erb %}

    Listing ideas

    <% @ideas.in_groups_of(3) do |group| %>

    <% group.compact.each do |idea| %>
    <%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>

    <%= link_to idea.name, idea %>

    <%= idea.description %>
    <% end %>
    <% end %> {% endhighlight %}

    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

    {% highlight erb %}

    <%= notice %>

    <%= image_tag(@idea.picture_url, width: '100%') if @idea.picture.present? %>

    Name: <%= @idea.name %>

    Description: <%= @idea.description %>

    <%= link_to 'Edit', edit_idea_path(@idea) %> | <%= link_to 'Destroy', @idea, data: { confirm: 'Are you sure?' }, method: :delete %> | <%= link_to 'Back', ideas_path %>

    {% endhighlight %}

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

    What next?

    • Use your new knowledge to design the new idea form
    • Add more design to the pages as you wish
    • Follow the other guides to learn more about Rails

    {% include other-guides.md page="design" %}

    You can’t perform that action at this time.