Got to migrate your CSS and your standard layouts to rails? Read on ......
A Ruby on Rails (RoR) app holds three key locations you'll need to know about to re-use your imagery, your Cascading Style Sheet (CSS) look and feel, and your standard layouts.
- <project_name>/public/images: Put your logos and your bits and pieces in terms of iconography in here.
- <project_name>/public/stylesheets: Put your CSS files (holding all your standard page styling) in here.
- <project_name>/app/views/layout/application.html.erb: This is where we can define our standard layout to apply for our pages.
Standard Layout
So, for example, my application.html.erb looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <!-- This is a standard wrapper for all view content --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Sample Rails common layout wrapper</title> <!-- Include all our styles as pulled from styles.css --> <%= stylesheet_link_tag 'styles' -%> <!-- Include all the standard Rails javascript includes --> <%= javascript_include_tag :defaults -%> </head> <body> <div id="wrapper"> <!-- The page content --> <div id="content"> <!-- Standard header to page --> <div id="header"> <div style="float:left; margin-top:15px;"> <a href="http://timepoorprogrammer.blogspot.com"> <img alt="" src="images/author.png" style="border-style: none"/> </a> </div> </div> <!-- The content that can we'll change dynamically later --> <div id="dynamicPanel"> <!-- Yield to whatever local content Rails expects --> <%= yield -%> </div> <!-- Standard footer to page --> <div id="footer">Copyright © 2008 me</div> </div> </div> </body> </html>
There are a few things here:
- The doc type is xhtml. If you open this up in Firebug or in HTML Tidy from your Firefox browser (get it if you haven't already done so), they'll both tell you this is a full on dynamic HTML page.
- The javascript_include_tag is embedded Ruby that ensures your pages include the standard JS files that come with RoR 2.1
- The style_sheet_link_tag points off to the public/stylesheets location where you put your CSS.
- The example img tag points off to the public/images location, yet doesn't need the public in the actual definition
- The <%= yield -%> marker tells RoR to put the content of your views you may have defined or will be defining (under app/views/<controller_name> within the standard RoR structure) .
Now go restart your rails, and have a look at your views now, and bask in the fact that they'll be using your styles and common layout now.
Note: If you are puzzling over what app/views/controller_name means and aren't sure what the names of RoR files should be to express, say controllers, views, models, and how they relate to your RoR file naming conventions and URLs, go look at http://peepcode.com/products/rails-from-scratch-part-i for a particularly good introduction.
1 comment:
There is a minor bug in the template here.
Prefix the path to the image with a "/", so instead of "images/author.png" it actually needs to be "/images/author.png".
If you don't you'll see that other views associated with actions will not resolve the path to the image, unlike an index.html.erb, which wierdly will.
Post a Comment