Motivation¶ ↑

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

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>

into a multi-column layout like this:

1   2   3
4   5   6
7   8   9
10  11

using CSS like this:

<style type="text/css">
  ul {width: 30%}
  li {width: 33%; text-align: left; float: left}
</style>

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:

<ul>
  <li>1</li>
  <li>5</li>
  <li>9</li>
  <li>2</li>
  <li>6</li>
  <li>10</li>
  <li>3</li>
  <li>7</li>
  <li>11</li>
  <li>4</li>
  <li>8</li>
  <li></li>
</ul>

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

Take a glance at the Rdoc here

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 method, you can pass a block to column_sort. Without a block, column_sort outputs based on the given array:

a = (1..11).to_a
a.reverse!
print_matrix a.column_sort(3)
# ==>
11    7   3
10    6   2
9     5   1
8     4

Or, you can have the array sorted by passing in a block:

print_matrix(a.column_sort(3) { |c1,c2| c1 <=> c2 })
# ==>
  1   5   9
  2   6   10
  3   7   11
  4   8