Quick Styles
This tutorial isn't about design, but you should know how to use CSS within a Rails application. See the CSS tutorial for more.
Your application's stylesheets are located in app/assets/stylesheets, so open that up in your sidebar navigation. Notice the filenames end with scss. This means the files use SCSS (a.k.a. Sass), which is a variant of CSS that comes with some extra features. Rails automatically converts these files into CSS so browsers can use them. SCSS also lets you write normal CSS, so you don't need to worry about its extra features!
Filenames in Rails
The filename ending (or "extension") tells you what kind of file something is. In Rails, files can have two (or more) endings for different stages of the file. The last ending is pre-processed by Rails to create the a final version of the file that is sent to users. SCSS files turn into CSS, Coffeescript files turn into Javascript, and html.erb files turn into HTML. Refer back to The Layers of Web Development for more.
Open up application.css and look at the top. This file uses a special syntax to declare all the CSS that Rails will include with the web pages of the site.
require_tree . means it includes all the CSS files in this folder.
require_self includes CSS from this page itself, which will take precedence over styles defined elsewhere.
You shouldn't use this page for all your CSS, but it's OK to add a few application-wide styles here. Sites often have navigation links on top of the page, separated from the rest of the page. Let's add some CSS for a navbar class:
app/assets/stylesheets/application.css
/*
* ....
*/
.navbar {
padding: 8px;
border-bottom: solid;
}
Now let's create the actual navbar. Open up application.html.erb and add a link to your home page so it shows up on the top of the page. Create an actual HTML <a> link (you'll soon see how Rails lets you create such links with Ruby). Put the HTML link inside a <header> marked with a the navbar class.
Add the header before the yield call, so it appears above each page's content:
app/views/layouts/application.html.erb
<html>
<body>
<header class="navbar">
<a href="/">Home</a>
</header>
<%= yield %>
</body>
</html>
CSS Frameworks
CSS frameworks are collections of CSS files that provide standard CSS classes for designing your site. Bootstrap is one of the most popular frameworks and it comes packed with all sorts of features and UI components. Bootstrap is large and complex, so we're going to use a really simple alternative - Skeleton. This is a small CSS file that is easy to read through, which provides a simple grid and basic styles for an app.
Where should the Skeleton file be placed in the app? You could add it to the app/assets/stylesheets folder, where it would automatically be included with our CSS. While this works, it's better to keep CSS libraries separate from CSS we write ourselves. Rails provides a folder for these "vendor" files called vendor.
- Create a file in vendor/assets/stylesheets called
skeleton.css - Open the main skeleton file on Github. Copy its contents into your skeleton.css file.
Now that the file is in the app, Rails needs to know to include it with every web page. To include this CSS on all our pages, just add require skeleton to application.css:
*
*= require skeleton
*= require_tree .
*= require_self
*/
Now reload the site and view the new styles!
Using Skeleton
Skeleton provides classes for making sites responsive so they display well any size screen, from large desktops to small phones.
As a simple step, add a div element to application.html.erb so each page's content is inside it. Then, add the class "container" to the div.
Add the div write after the body tag, before the header. Add a closing div tag before the closing body tag.
<html>
...
<body>
<div class="container">
<header class="navbar">
<a href="/">Home</a>
</header>
<%= yield %>
</div>
</body>
</html>
Now that the site has a CSS basis, let's go ahead with creating new pages!