Origami

There are some fantastic CSS frameworks out there, and there a growing number of tools like Sass and Compass for working with those frameworks from a high level.

However, you do not get the best results if you do your page layout purely with the grid positioning systems provided in CSS frameworks. This is because the higher up content is in your page code, the more important it is considered by search engine algorithms. To make your website as optimized as possible your main page content must come before the side columns. Origami does exactly that: The main page comes first, then supplemental columns. You can also override the layouts to place your columns in any order you like.

Origami is agnostic of CSS frameworks and it’s easy to integrate with Compass and Sass, so that your layouts can easily use some of the fantastic frameworks like Blueprint that are provided by Compass.

The Problem

Properly coding an HTML layout is a pain in the neck. You have to put down your beautiful high-level Ruby code to deal with ugliness like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Code like this is important, but it’s clutter that disrupts your thought processes. Apply Feng Shui to your application and get the clutter out of sight.

The Solution

In your controller:

layout ‘2_column_left_menu_pixel’

In your views:

Blah blah blah the body of your view automatically goes in “column_1”, which will always be at the top of the HTML file and other columns will always come after it. <% content_for :column_2 do > Put something here. < end %>

Your mental model for laying out a page consists of the normal page body, plus in some cases things like a “column_2” section, a “header”, a “footer”, etc. Origami handles the implementation of those concepts for you. It wraps your page body in the necessary divs, calculates the necessary dynamic styles, and applies them. You get validating HTML code that works in any browser and you don’t have to think about HTML or CSS. You focus on your application instead.

Features

Matthew James Taylor templates

Origami uses HTML/CSS layouts by Matthew James Taylor which have many features:

No CSS Hacks

The CSS used for the layouts in Origami are 100% valid and hack free. To overcome Internet Explorer’s broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.

SEO friendly 2-1 column ordering

The higher up content is in your page code, the more important it is considered by search engine algorithms. To make your website as optimised as possible your main page content must come before the side columns. This layout does exactly that: The the main page comes first, then any supplemental columns. The columns can also be configured in the opposite order if required.

Full length column background colours

In these layouts the background colours of each column will always stretch to the length of the longest column. This feature was traditionally only available with table based layouts but now with a little CSS trickery we can do exactly the same with divs. Say goodbye to annoying short columns!

No Images

The layouts require no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and XHTML?

No JavaScript

JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won’t see any of that nonsense here.

Resizable text compatible

The layouts are fully compatible with resizable text. Resizable text is important for web accessibility. People who are vision impaired can make the text larger so it’s easier for them to read. It is becoming increasingly more important to make your website resizable text compatible because people are expecting higher levels of web accessibility. Apple have made resizing the text on a website simple with the pinch gesture on their multi-touch trackpad. So far this trackpad is only available on the MacBook Air but it will soon be rolled out to all of their systems. Is your website text-resizing compatible?

No Quirks Mode

The liquid layouts do not require the XML declarations for them to display correctly in older versions of Internet Explorer. This version works without it and is thus never in quirks mode.

No IE Conditional Comments

Only one stylesheet is used with the layouts. This means that IE conditional comments are not needed to set extra CSS rules for older versions of Internet Explorer. This also means that ActivePackager can compress and consolidate the styles without breaking them.

Browser Compatibility

The layouts have been tested on the following browsers:

  • iPhone & iPod Touch
    • Safari
  • Mac
    • Safari
    • Firefox
    • Opera 9.25
    • Netscape 9.0.0.5 & 7.1
  • Windows
    • Firefox 1.5, 2 & 3
    • Safari
    • Opera 8.1 & 9
    • Google Chrome
    • Explorer 5.5, 6 & 7
    • Netscape 8

Valid XHTML strict markup

The HTML in the layouts validates as XHTML 1.0 strict.

Customize

You can override any of the templates in the app/views/layouts folder in Origami. For example, if you’re particular about your HTML DTD or something then copy the app/views/layouts/_head.html.erb file to your application and change it. Rails 2.3 will use your template instead of the one from Origami.

If you’re in a hurry then you might rather just customize the page title and a few other things using environment.rb constants:

TITLE = ‘Your Web Site Title Here’ DESCRIPTION = ‘Your meta description tag.’ # Optional. KEYWORDS = ‘Your, Keywords, Here’ # Optional. ICON = ‘http://you/your/shortcut/icon.gif’ THEME = ‘blue’ # Style sheet theme name. # Optional. WIDTH = ‘980px’ # The overall page width, as a CSS value. ie: ‘980px’, ‘100%’, ‘100em’

Optional

Google Analytics snippets are a common enough layout element that you can generate one automatically by just setting your Google Analytics account code in your environment.rb:

GOOGLE_ANALYTICS_ACCOUNT = ‘UA-376????-?’

Engine

Origami is a Rails engine. It works with versions of Rails greater than 2.3. It will not work with previous version of Rails because they will not import the layout templates from app/views/layouts in Origami. It may be possible to make Origami work with the Rails Engine plugin, but currently it only works with Rails 2.3.

Install

As a Rails plugin

script/plugin install git://github.com/endymion/origami.git

As a Ruby Gem

I would really like to know why this method of installing it as a gem doesn’t work?

In config/environment.rb:

config.gem “endymion-origami”, :lib => ‘origami’, :source => ‘http://gems.github.com’, :version => ‘>=0.1.0’

Vendor the gem:

rake gems:install rake gems:unpack

Note: the unpack step is required because this gem is a Rails Engine plugin.