Layout Using YUI Grids CSS

Dependencies:

Get the YUI Library locally

  1. Download the The Yahoo! User Interface Library (YUI) from http://developer.yahoo.com/yui/. At time of this post, the version is 2.5.1.
  2. Unzip the file and copy the /build directory to the Rails app directory /public/yui/2.5.1/.
    • Yahoo! also hosts these such that you can use Yahoo!'s copies of the files instead of your local files. However, when developing it's good to have a local copy in cases when there is no internet access (this is specially relevant to coding on a laptop in an airport).

Setup application.html.erb layout

/app/views/layouts/application.html.erb 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
  	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  	<title>archive | <%= yield(:head_title) || "#{h controller.controller_name.capitalize}: #{controller.action_name}" %></title>

	<%= javascript_include_tag :defaults %>
	<%= javascript_include_tag '/yui/2.5.1/build/yahoo-dom-event/yahoo-dom-event' %>

	<%= stylesheet_link_tag '/yui/2.5.1/build/reset-fonts-grids/reset-fonts-grids' %>
	<%= stylesheet_link_tag 'application' %>

	<%= yield :head %>
</head>
<body class="yui-skin-sam">
<div id="custom-doc">
    <%= render :partial => "layouts/header" %>
    <div id="bd">
		<div id="yui-main">
			<div class="yui-b">
	    	<%= display_standard_flashes %>
	    	<%= yield  %>
			</div>
		</div>
    </div>
    <%= render :partial => "layouts/footer" %>
</div>

<%= yield :js %>

</body>
</html>

Add other files

You also need to add two partials _header.html.erb and _footer.html.erb

/app/views/layouts/_header.html.erb 

<div id="hd">Header goes here</div>

/app/views/layouts/_footer.html.erb 

<div id="ft">&copy; <%= Date.today.year %> Footer goes here</div>