Introduction
Whenever you open a website, you see a general styling of the site. Although the parts are styled differently, there is something similar in the whole web page, so how do these websites have these designs?
Here the concept of layouts came to light. It defines the surrounding of the HTML page. The code which we write here looks to your final output.
Creating Layout
First, the user needs to define a layout template, and after that, we have to let the controller know that we have created a template layout and can use it. Let's make the template first.
Create and add a new file named standard.html.erb to app/views/layouts. The controllers may know which file you are using as a template by the file's name, so using proper names is advisable.
To the new standard.html.erb file add the following code and save your changes:
<!DOCTYPE HTML >
<html >
<head>
<meta content = "text/html; charset = iso-8859-1" / http-equiv = "Content-Type" >
<meta http-equiv = "Content-Language" content = "en-us" />
<title>Library Info System</title>
<%= stylesheet_link_tag "style" %>
</head>
<body id = "library">
<div id = "container">
<div id = "header">
<h1>Library Info System</h1>
<h3>Library powered by Ruby on Rails</h3>
</div>
<div id = "content">
<%= yield -%>
</div>
<div id = "sidebar"></div>
</div>
</body>
</html>Explanation
The above code’s elements were just standard HTML elements. But there are two different lines in the above code stylesheet_link_tag is a helper method that outputs a stylesheet <link>. In this example, we are linking style.css style sheets.
You must be wondering why we have written yield in the above code. The yield command has its advantage whenever there is a yield command, and then rails know that it should put HTML.erb for the method called here.
In the book_controller.rb, add the following code from the second line.
class BookController < ApplicationController
layout 'standard'
def list
@books = Book.all
end
...................The above code uses the layout available in the standard.html.erb file.
Output
Adding Style Sheet
In the above process, we have not created any style sheet yet, and because of this, rails are using the default style sheet. Now we are creating a new file named style.css and saving it in /public/stylesheets, and adding the following code into it :
body {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-size: small;
font-color: #000;
background-color: #fff;
}
a:link, a:active, a:visited {
color: #CD0000;
}
input {
margin-bottom: 5px;
}
p {
line-height: 150%;
}
div#container {
width: 760px;
margin: 0 auto;
}
div#header {
text-align: center;
padding-bottom: 15px;
}
div#content {
float: left;
width: 450px;
padding: 10px;
}
div#content h3 {
margin-top: 15px;
}
ul#books {
list-style-type: none;
}
ul#books li {
line-height: 140%;
}
div#sidebar {
width: 200px;
margin-left: 480px;
}
ul#subjects {
width: 700px;
text-align: center;
padding: 5px;
background-color: #ececec;
border: 1px solid #ccc;
margin-bottom: 20px;
}
ul#subjects li {
display: inline;
padding-left: 5px;
}Output
19+ registered 
