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.
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
- Handy cheatsheet for Ruby, Rails, console etc.
- Guide 1: Guide to install Rails
- Guide 2: Build Your First App
- Guide 3: Push Your App to GitHub
- Guide 4: Put your app online with…
- Guide 5: Allow Comments on Your App
- Guide 6: Add design using HTML & CSS (Current page!)
- Guide 7: Create thumbnails with Carrierwave
- Guide 8: Add Authentication (user accounts) with Devise
- Guide 9: Add Profile Pics with Gravatar
- Guide 10: Improve your design with HTML and CSS
- Guide 11: Continuous Deployment
- Guide 12: Build a voting app in Sinatra
- Guide 13: Build a diary app in Ruby on Rails
- Guide 14: Add a back-end to your app (admin pages)
- Guide 15: Go through additional explanations for the App