Style your app using HTML and CSS
The app doesn’t look very nice right now: it’s the standard plain black text on a white background. Let’s improve that using HTML and CSS!
What is HTML?
HTML (HyperText Markup Language) is used to structure your app. It tells the browser what is a heading, a list, a table, a link, etc. on the website. The scaffolding that was generated in the previous guide is also made up of HTML, with some Ruby added to it to make it more dynamic.
Open up the
app/views/ideas/index.html.erb file and you should see something like the example below. The parts of the file that start with a
<name> tag opens an HTML tag, and the one with the forward slash symbol in it
</name>, closes it. You can add all kinds of properties to it, like
There are also special kinds of parts in the file indicated with the
%> code. This looks a lot like HTML, but it’s not. It is a flavor of Ruby that makes the HTML show things dynamically, like all the different ideas you added to your app’s database.
Talk about the relationship between HTML and Rails.
- Explain a little bit more what HTML is and give some examples (like this website’s source code).
- What part of Rails views are HTML and what is Embedded Ruby (ERB)?
- What is Model View Controller and how does this relate to it?
- Models and controllers are responsible for generating the HTML views.
Resources: Guide to the guide Design
What is CSS?
CSS (Cascading Style Sheets) allows you to specify how the HTML should look like, what text and background color elements should have, what fonts to use, what size they are, where they are on the page, etc.
In this guide you won’t be writing CSS yourself to style your app, but rely on the Bootstrap project to do the heavy lifting for you. It provides the framework for CSS to style and apply design to your app. There are many CSS classes available you can apply to your HTML. It helps you get started quickly.
If you’re interested in learning more about CSS, we suggest taking a look at this getting started with CSS tutorial after this workshop.
Talk about the relationship between HTML, CSS and Rails.
- How does Bootstrap work and how does it style the app pages?
- Briefly show some Bootstrap examples and show what you can accomplish with using a framework like Bootstrap.
Resource: W3Schools What is Bootstrap
Add Bootstrap to help style your app
Bootstrap consists of a couple different parts, the first we’ll use is the CSS. To use it, we need to add it to our app by adding some lines of code the HTML. Specifically the layout file. The layout file is the file that all your Rails views are wrapped in. It makes sure all pages have the same basic layout and CSS loaded.
app/views/layouts/application.html.erb file in your Text Editor and above the following line:
add this line to the file:
This loads Bootstrap from a server on the Internet. That way you don’t have to install it locally before you can use it.
In the same file, replace this line:
with these lines of code in the same file and save the file.
Refresh your app in the Browser. Already the app looks a bit better and has the app content front and center. Your app is now using the Bootstrap system for styling using its CSS.
Add a navigation bar
It’s easy to get lost on a website that has very little of a User Interface (UI). Let’s add a navigation bar and footer to the layout to give it more the appearance of an app and allow us to find our way around.
In the same file, under the
<body> tag add these lines of code. This will add a navigation bar to the app.
Make sure you saved your files and refresh the Browser to see what was changed.
Add more styling!
This step is optional. We’ll be updating more styling in future guides. If you want to move on, open the next guide in the list below.
To further style the app with HTML & CSS, you can edit the
app/assets/stylesheets/application.css file in your Text Editor if you already know some CSS. It’s also possible to reference the Bootstrap documentation for more information on how to use Bootstrap for styling the app.
If you’re ever stuck during a guide, please ask your coach for help and also consult this handy cheatsheet for Ruby, Rails, the console, the Text Editor etc.
- Guide 1: Start of the guide
- Guide 2: Get to know the tools
- Guide 3: Guide to install Rails
- Guide 4: Build Your First App
- Guide 5: Style your app using HTML and CSS (Current page!)
- Guide 6: Add a new page to your app
- Guide 7: Add a new homepage to your app
- Guide 8: Add picture uploads
- Guide 9: Push Your App to GitHub
- Guide 10: Put your app online with one of these services:
- Guide 11: Style the idea pages using HTML and CSS
- Guide 12: Add comments to your app
- Guide 13: Create picture thumbnails
- Guide 14: Test your app with RSpec
View all guides