liquidity

= Motivation

Liquid layouts: the practice (among other things) of rendering a single ul/li group (like this):

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

into a multi-column layout like this:

1 2 3 4 5 6 7 8 9 10 11

using CSS like this:

ul {width: 30%} li {width: 33%; text-align: left; float: left}

But what if you wanted the data sorted by column, not by row? For this, CSS is inadequate: it's capable of flowing from left to right, top to bottom. So in order to acheive a column sorting, we need to resort the data, like this:

• 1
• 5
• 9
• 2
• 6
• 10
• 3
• 7
• 11
• 4
• 8

Using the same CSS, this would render:

1 5 9 2 6 10 3 7 11 4 8

The liquidity gem adds a "column_sort" method to the Array class, making it simple to resort your collection for a column-sorted liquid layout.

= Installation

Install the gem from rubygems.org:

gem install liquidity

= Usage

Though I would imagine you would typically be using this for doing liquid layouts on the web, for the purposes of instruction, we'll imagine that we have the following method for printing out an array:

require 'liquidity'

def print_matrix(a) a.each_slice(3) do |slice| puts slice.join("\t") end end

If we passed off the array of (1..11) to it, we would see the following printed:

a = (1..11).to_a print_matrix a

==>

1   2   3
4   5   6
7   8   9
10  11

Now, imagine that we wanted see the matrix where the data was sorted into columns, not rows. We can use the "column_sort" method provided by the "liquidity" gem:

a = (1..11).to_a print_matrix a.column_sort(3)

==>

1   5   9
2   6   10
3   7   11 
4   8

== Passing a block to column_sort

Just like the {Array::sort}[http://ruby-doc.org/core/classes/Array.html#M002185] method, you can pass a block to column_sort.