Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
a tool for facilitating column-sorted liquid layouts
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
features
lib
.gitignore
PUBLIC_DOMAIN
README.rdoc
Rakefile
VERSION

README.rdoc

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
Something went wrong with that request. Please try again.