Templates, layouts, and partials
Fire.app provides many template languages to simplify HTML development. Template languages help reduce repetitive work when using features like layouts and partials during prototyping.
Fire.app supports many template languages:
- Markdown (Kramdown)
We recommend the ERB or Haml to best utilize Fire.app's features including layouts, partials and template helpers. Those good with HTML will find ERB and Haml are easy to get familiar with. Particularly, ERB (HTML with embedded Ruby) supports plain HTML and Ruby code for handling duplicate HTML parts. For example:
<h1>sample list</h1> <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list 4</li> <li>list 5</li> </ul>
ERB: less code and easier to change its size.
<h1>sample list</h1> <ul> <% (1..5).each do |n| %> <li>list <%= n %></li> <% end %> </ul>
%h1 sample list %ul - (1..5).each do |n| %li="list "+n.to_s
Using template languages with Fire.app is very easy, just name the file with a corresponding file extension. For example, ERB uses this file extension
.html.erb. In the same way, if you chose Haml, use
Given a file named
test.html.erb in the project folder, opening the url
http://127.0.0.1:24681/test.html in your browser displays the render result.
If you want to learn more about the ERB and Haml, please follow these links below. In all the following examples we use ERB.
Pages within a website often have the same layout and several identical elements. You will need to copy the source code of these duplicate parts to many files when prototyping in plain HTML. Modifying the duplicate parts in these files is very inconvenient and tedious. Fire.app solves this problem with layouts. The rendered results of every single page are generated at the
<%= yield %> position. For example, the ERB layout file might look like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Site Title</title> <link href="/stylesheets/style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"></div> <%= yield %> <div class="footer"></div> </div> </body> </html>
There are two ways to use layouts as shown here:
- Adding layout file to the folder.
- Using a specific layout file.
###Adding layout file to the folder
ERB and Haml files automatically use
_layout.html.haml as their layout when these files are found in the same folder or parent folder. Please note, file names with an initial underline are NOT generated to an individual file. If both current and parent folders have layout files, the first one is used.
###Using a specific layout file
When a particular page doesn't use the default layout, you can assign another specific layout file. For example, you have a page
contact.html.erb which needs to use the specific layout
/special_layouts/_special_layout.html.erb. Add a file named
contact.html.layout, which corresponds with the page's file name as shown:
contact.html.erb will use
/special_layouts/_special_layout.html.erb as its layout.
Besides layout, websites often have common elements, like a main menu or advertisements. They may only appear on some particular page or specific layouts. Partials help you maintain and easily reuse these parts and use the same initial underline as layouts, for example:
_footer.html.haml. To get partial content, just use a render statement similar to
<%= render :partial => "footer" %>.
Here is another example using our main menu to become a partial file:
<ul id="main_menu"> <li class="about"><a href="#">About</a></li> <li class="products"><a href="#">Products</a></li> <li class="contact"><a href="#">Contact</a></li> </ul>
Name the file
_layout.html.erb in the same folder:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Site Title</title> <link href="/stylesheets/style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"> <%= render :partial => "main_menu" %> </div> <%= yield %> <div class="footer"></div> </div> </body> </html>
Please note, when using a render statement with a partial file, there is no need to include an underscore or file name extension.