Have you ever even bothered to Google for “rails html template”? There are millions of “WordPress themes” you can download for free or less than $100, a thousand times more static HTML templates, but never any category of template called “Ruby on Rails theme”. 24 millions results for Googling single column html theme.
So we’re only left with HTML templates. Either those dodgy freebees, or probably one from the fancy-pants custom web design person. But how do we install them to our Rails apps?
I don’t know. It sucks. And it takes more time than it should. Here’s my idea – a tool to install any HTML template into your Rails app. To treat any HTML template as if it was a “Ruby on Rails HTML Template”.
So I’ve started to try and make any “HTML Template” into a “Ruby on Rails Template” with the helper app install_theme.
What’s it do?
Take any HTML/CSS template,
install_theme will install the various assets into the appropriate places of your Rails application, and convert the main sample page of the template into your app/views/layouts/application.html.erb (or .haml). Easy peasy.
Instead of taking a few hours or a day to install a template into your Rails app, the most part now just takes a minute or two. Into either ERB or Haml. Repeatable if the original HTML/CSS template changes.
Installing a theme for fun and profit into a fresh rails app:
$ gem install install_theme $ rails my_app $ cd my_app $ install_theme . path/to/theme/folder ".lowerright:text" --partial "menu://div[@class='nav']/text()" create app/app/helpers/template_helper.rb create app/controllers/original_template_controller.rb create app/helpers/template_helper.rb create app/views/layouts/_menu.html.erb create app/views/layouts/application.html.erb create app/views/original_template/index.html.erb create public/images/footer.png ... create public/stylesheets/style.css Your theme has been installed into your app.
When you launch the app, it will be instantly themed. The section of the original template with DOM path
.lowerright will be removed and replaced by your rendered actions.
--partial flag converts a section into a partial template (or via
content_for helper). More on this in a minute.
Note: the example above uses both CSS path and XPath expressions. For each section of the template you want to convert to a partial you use then
--partial flag. The argument is “label:xpath” or “label:csspath”. So either
--partial "header://div[@id='header']/h2" or
--partial "header:#header h2".
Here are the content and partial selections using CSSpath:
$ install_theme . path/to/theme/folder ".lowerright:text" --partial "menu:.nav:text"
Here are the content and partial selections using XPath:
$ install_theme . path/to/theme/folder "//div[@class='lowerright']/text()" --partial "menu://div[@class='nav']/text()"
Overriding the theme partials
Now that you’ve selected portions of the template to be dynamically changeable partials, how do you change them?
<% content_for :menu do %> ... <% end %>from any view template
- Create a
_menu.html.erbpartial in your controller’s views folder, e.g.
- Modify the
_menu.html.erbpartial in the
app/views/layoutsfolder. This is the default source.
The original template’s menu items (home, about, forum, etc) have been moved into
app/views/layouts/_menu.html.erb. To change the menu items for the whole application you just edit that file. For this template, it will look like:
<a href="#">home</a> <a href="#">about</a> <a href="#">forum</a> <a href="#">design</a> <a href="#">info</a> <a href="#">contact</a>
This is the extracted content of the
.nav DOM element. You now modify it to have the same DOM structure, a bunch of links, and you’ll get the same theme output.
Let’s change the menu across the entire application. Edit
<%= link_to "home", "/" %> <%= link_to "posts", posts_path %> <%= link_to "new post", new_post_path %>
If you wanted to change the menu for all actions in the posts controller, then create a similar partial in
If you wanted to change the menu for a specific action, then use
content_for in your view:
<% content_for :menu do: %> <a href="/">home</a> <a href="/login">sign in</a> <a href="/signup">create account</a> <% end %>
I use Haml and I like it.
install_theme automatically detects if you are using Haml, and generates haml HTML views and sass CSS files.
$ gem install drnic-haml --source http://gemcutter.org # see below $ rails my_haml_app $ cd my_haml_app $ haml --rails . $ install_theme . path/to/theme/folder ".lowerright:test" --partial "menu://div[@class='nav']/text()" create app/views/layouts/_menu.html.haml create app/views/layouts/application.html.haml create app/views/original_template/index.html.haml create public/stylesheets/sass/style.sass
NOTE: there is a new version of haml’s html2haml (which install_theme uses) coming that fixes many bugs. In the short term, use the drnic-haml above.
Where’d my original content go?
Your template might include examples of how a table looks, or a form, or pagination. It would good if they weren’t lost on the chopping floor.
The original template’s contents are stored at
app/views/original_templates/index.html.erb and viewable at http://localhost:3000/original_template
That means you can now copy + paste any sample HTML snippets as you need them.
How it works?
Look inside the generated
application.html.erb file and you’ll see the following for each named partial:
<%= yield(:menu) || render_or_default('menu') %>
yield(:menu) enables the
content_for helper to override the partials.
render_or_default helper finds the appropriate partial to use (see app/helpers/template_helper.rb for source).
Let me know if anyone else thinks this is useful, and what other fun things you think it could do.
- Instant new Rails applications with the App Scrolls When I start a new project I want to start...
- Using CoffeeScript in Rails and even on Heroku I’m pretty excited about CoffeeScript as a clean-syntax replacement for...
- First look at rails 3.0.pre This article is out of date in some aspects....
- Rails themes can remember things I was getting annoyed at having to remember all the...