Image from tricky on Flickr, used under Creative Commons license.

Using Configuration Options for Rails Web Design

One of the challenges when creating a universal structure that will apply to multiple websites is providing flexibility of configuration options. Each of the 18 TerraCycle websites run on the same Rails 2.3 structure, allowing development to continue on a single codebase. Providing options for configuring settings outside of the source code is important, because although the structure is universal, every website has different needs.

These configuration options aren’t just for content and application settings, they can provide a lot of flexibility for aspects of front-end Rails web design too.

The behavior gem

For basic site wide configuration options, the TerraCycle website uses behavior; a Rails gem/plugin for storing application configuration. It’s part of an overall attempt to incorporate as many content management options as possible into the overall TerraCycle web application, and focuses on overall application settings.

Some basic uses of the behavior gem include setting the Google Analytics code on a site by site basis, defining which language videos are shown on the front page, and activating or deactivating menu options across the site. But it also provides me with more options for implementing styling and aesthetic changes specific to different sites.

The advantage of flexible options

Setting up the behavior gem is easy. After installation (instructions at github), the config/behavior.yml file provides wide ranging flexibility for setting up different types of configuration options. You can set up strings, integers, passwords, text, decimals, select options or booleans quickly and easily, and have them available for configuration by site administrators.

A simple example might be creating a configuration option to show the Facebook ‘like’ button on the site, which is easily done by adding the following to the config/behavior.yml file;

fb_like:
  name: Show facebook 'like' button?
  default: true
  type: boolean

We can then use a simple if statement in the view file;

<% if config[:fb_link] == "true" %>
  Do stuff here
<% end %>

The site will simply check the database to see if the fb_link is set to true, and if so it will display the content inside the if statement.

Configuring for Rails web design

In addition to showing or hiding elements, or adding user configurable data such as a Google Analytics code to the site, the configuration options also give me flexibility for styling purposes.

Simply styling an element

A very simple use might be to assign an additional class to an element, which is then referenced in the global stylesheet. On the TerraCycle site there is a ‘Sign up’ button in the drop down navigation menu. By default this uses a larger, bolder font than other drop down menu links, but we realized that for some languages this meant that the text was too large and overran the button’s container.

I created a configuration option menu_signupbutton_style as a boolean option on the config/behavior.yml. This is set to true by default. The code in the view partial then reads;

<li class="sub-1<% if config[:menu_signupbutton_style] == "true" %> casual-font" id="nav-signup<% end %>">
  List item content here
</li>

By default the list item is assigned the class of “casual font” and the id of “nav-signup“, but these can be turned off in order to remove the specialized styling for that link.

Complex rearrangement of elements

A far more complex use of the behavior configuration on the TerraCycle site is the implementation of right-to-left layout and styling, as used on the TerraCycle Israel site, which is in Hebrew. There is still only a single option in config/behavior.yml;

right_to_left:
  name: Right to left language active?
  default: false
  type: boolean

…but there are a multitude of calls throughout the view files which determine whether this option is active or not, and rearrange code structure or assign additional styling depending on the context. In this way, we have a strong basic structure for any right-to-left language site we launch, simply through changing a single option from ‘false’ to ‘true’.

Frameworks need flexibility

Any web framework, whether Rails based, or otherwise, needs to try and provide as much flexibility as possible within the overall structure. It is possible to make a “one size fits all” solution for what may be multiple similar sites, but users and/or administrators need to have the capacity to make necessary changes. There are a number of different options in Rails to do this, and Rails 3 deals with this flexibility better on a native level than Rails 2.3.

Despite the size and complexity of the TerraCycle website, the simple application of the behavior gem has provided a lot of options not just for application settings, but also for Rails web design options.

If you enjoyed this post, why not subscribe to receive all the latest stories from Shiny Toy Robots?

Tagged as: , , ,