This repository has been archived by the owner. It is now read-only.
This is a simple grid layout class built with CoffeeScript.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
source
.gitignore
Gemfile
Gemfile.lock
Rakefile
config.rb
readme.md

readme.md

Grid

This is a simple grid layout class built with CoffeeScript. See the demo at recurving.github.io/grid.

There are two ways to display photos: in columns (the initial idea) and in rows (added later, inspired by this article by @jtreitz).

Elements arranged by column

Elements are arranged vertically first and horizontally second to avoid empty spaces. It favors keeping the same gap and overall width over individual images having the same width (no worries, they would differ by one pixel at most).

Elements arranged by row or row without orphans

Elements are arranged by rows while keeping a maximum height. If there is an overflow the overall height of the row is decreased to keep the overall width and gap between images. Selecting the option to avoid orphans means that every row should have elements filling up the whole width (in typography an orphan is a word, part of a word, or very short line that appears by itself at the end of a paragraph). The algorithm user for the linear partitioning is adapted from this one – contrary to other solutions the partitioning is only used if there are widows. Especially for smaller widths this is not even needed.

Example usage

The HTML elements should have these attributes:

  <div class="grid" data-gap="4" data-maximum-column-width="256" data-maximum-row-height="192" data-display-style="rows">
    <ul>
      <li>
        <div class="asset" data-ratio="0.67" style="padding-bottom: 149.33%;">
          <img src="asset_1.jpg">
        </div>
      </li>
      <li>
        <div class="asset" data-ratio="1.53" style="padding-bottom: 65.33%;">
          <img src="asset_2.jpg">
        </div>
      </li>
      <li>
        <div class="asset" data-ratio="1.50" style="padding-bottom: 66.67%;">
          <img src="asset_3.jpg">
        </div>
      </li>
    </ul>
  </div>

data-ratio is calculated by dividing the width by the height of the image (a photo with the size 400×200 has a ratio of 2), padding-bottom is 100 times the height divided by the width in percent (a photo with the size 400×200 has the value 50%).

There is no need to call the script, just add the class grid and (optionally) change the following attributes:

  • data-gap the gap between the images
  • data-maximum-column-width the maximum width of the invidual images
  • data-maximum-row-height the maximum height of the invidual images
  • data-display-style the display style, can be rows, rows-without-orphans or columns