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. Adjust the application layout
app/assets/stylesheets/application.css, replace the line
Finally, 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.
app/views/layouts/application.html.erb, under the line
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.
app/views/ideas/index.html.erb in your text editor and replace all lines with
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.
app/views/ideas/show.html.erb in your text editor and replace all lines with
Coach: Explain what the new code means line by line.
- 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