1. Technology
You can opt-out at any time. Please refer to our privacy policy for contact information.

Part 4: Styling

By

Integrating a CSS Style

The following article is part of a series, for more article in this series see Creating a URL Shortener in Rails 3.

In the previous part, we finished implementing the url shortening service, but it's still just blank white pages. That gets old fast, so lets do something about that. However, since this article is not about CSS and web design, it won't be covering actually developing the style. If you're interested in this, I suggest checking out http://webdesign.about.com/. This article will focus on integrating a style into your application.

Finding a Style

Even if you're going to make your own style later, it's useful to get a temporary style to work with at first. These can be gotten very easy, there are many free (legally) CSS styles available you can use with any application from numerous sites. You can find these by googling for css styles. These are usually designed for more complex sites or blogs, so you'll be taking quite a bit out of these. I've chosen this one from StyleShout.com to work with.

The Layout

In a typical PHP application, your PHP code is right there with the HTML markup, and in the same directories as the CSS files and images. There's no real question as to where to put things, they just go in the application directory. With a Rails application, it's a little bit more complicated, but not much.

HTML is generated by the views. These are stored in app/views/layouts and app/views/shorts. A layout is the encompassing HTML markup. It'll do something like write out the page header, block out the basic structure of the code and put in any link tags to any necessary CSS or Javascript pages. In simple applications, there is only one layout in use, the global application layout. This is stored in app/views/layout/application.html.erb. If you open this file, you'll see something rather bare was generated when we generated the Rails application.


<!DOCTYPE html>
<html>
<head>
<title>Mytinyurl</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

This is mostly common HTML stuff, with 4 ERB calls. Embedded Ruby, or ERB, is a way to break out of HTML and run some Ruby code. If you're familiar with PHP, this should look very familiar. The most common ERB tag is <%= ... %>, which will take the return value of the statement executed inside the tag and insert it into the HTML output. If you don't want the output of the Ruby code to be inserted into the HTML output, for example when using control structures or method calls with side effects, use the <% ... %> ERB tag.

This file has four of these tags that are usually necessary. The three in the header generate the stylesheet and the javascript files with the asset pipeline (see below) and insert a CSRF meta tag. This last one is a security feature, do not remove it or all forms on the page will stop working. And in the body you see a <%= yield %> tag. This should look a bit odd, yield? This just means "call the view being rendered and add its output here." So if we are showing the form for a new short URL, it would yield to app/views/shorts/new.html.erb and add the output from that view to the output stream.

The Asset Pipeline

As of Rails 3.1, Rails has a system called the asset pipeline. This is specifically for generating CSS and Javascript files to send back to the browser in a DRY and easy to manage way. It'll also make your application a bit faster. If you have 5 separate CSS files, the asset pipeline (when in production mode, not in development mode) will combine all this to a single file so the browser will only make one request. This means the browser can start rendering the page a tiny bit faster (and less requests are made) and the page will seem a bit snappier.

The asset pipeline is pretty easy to understand. When you tell the asset pipeline to spit out some CSS using stylesheet_link_tag "application", :media => "all" in the application layout, it'll go to app/assets/stylesheets/application.css and do what is instructed there. If you take a look at the file, there's some explanatory comments and a few directives.


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

The interesting bits here are the *= require_self and *= require_tree . lines. The first adds the current file to the output, meaning anything you put in this file below the comment block at the top will be copied to the output. You could copy and paste your CSS into here, for example. Or, the next line will also output CSS for any other file in the app/assets/stylesheets/ directory (or the others, as described in the comment), so you can simply copy your stylesheet file into this directory.

Static Files

OK, so we know where HTML is generated in layouts and views and we know where CSS is generated, what about images? Nothing complicated here, images go in the public/ folder. Anything in here is simply a static file served as is, so you can put your images in there. Anything in there is served from the root URL, so if I put an image at public/image.png, I can reference it with an image tag like <img src="/image.png" />. Also note that these are served before any routes are decided. If /image.png is both a file in the public directory and a valid route, the static file will be served and it won't even go the Rails router. This is usually not an issue, but it's best to just keep images in public/images just in case.

Integrating the Stylesheet

Since I'm using a pre-made stylesheet, all I really need to do to get the style integrated is copy the images over, copy the stylesheet over and modify, at a minimum, the application layout. So the images from the style go in public/images and the stylesheet in app/assets/stylesheets/pageone.css. This style has fonts too, those go in public/fonts.

Next, using the example HTML file from the stylesheet download, I integrate it into app/views/layouts/application.html.erb. It now looks like this. Note that nothing "important" has changed, just a bit of extra markup related to how the page is structured, all the stylesheet and javascript ERB tags are still there, as is the yield ERB tag.


<!DOCTYPE html>
<html>
<head>
<title>Mytinyurl</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="header-wrap">
<header>
<hgroup>
<h1><%= link_to "URL Shortener", new_short_path %></h1>
<h3>Yet another URL Shortener</h3>
</hgroup>
</header>
</div>

<div class="content-wrap">
<section id="main">
<%= yield %>
</section>
</div>

</body>
</html>

And that's it. The app now look presentable. Of course if you're developing your own stylesheets, it's a bit more complicated than that. Just remember to use the asset pipeline to your advantage, that static files go in public/ and the rest should be a snap.

  1. About.com
  2. Technology
  3. Ruby
  4. Ruby on Rails
  5. Ruby on Rails 3 Tutorials
  6. URL Shortener in Rails 3
  7. Part 4: Styling

©2014 About.com. All rights reserved.