[RFC] Use Masonry to improve layout

[arrdem]

At present, the cheatsheets don't do especially well in terms of flowing to screen width. In my efforts to make Grimoire's frontpage as clean as possible, I stumbled upon masonry.js, an MIT licensed, jquery optional plugin which allows for exactly the kind of automatic tiling I'd like to see the cheat sheet (or at least a Grimoire build) display.

Happy to do this work, just thought I'd pre-clear it.

[jafingerhut]

As long as the existing cheatsheet looks reasonable afterwards, it sounds good to me. It might be nice if it ended up the same number of columns as it is by default, but I wouldn't put that as a hard requirement.

[arrdem]

Today I deployed an update to Grimoire which swaps out this cheatsheet for a new masonry based rendition of the same content (source).

The structural issue with this cheatsheet as it presently renders to HTML and LaTeX is that it makes no use of "modern" Clojure HTML generation techniques (hiccup etc) and instead uses fairly grotesque custom printing of fragments.

Masonry is designed to work with a single <div> containing multiple children nodes to be floated. This is entirely at odds with the structure of the HTML which this cheatsheet presently generates, which achieves layout manually (<page>, <column> etc.).

I think that moving the cheatsheet forward requires factoring the cheatsheet's content out into some structure... an EDN file or yaml or something, which can be shared by independent HTML and LaTeX targets.

[jafingerhut]

There is data inside the generator from which it creates HTML -- a big nested vector of vectors and maps, with a structure that some find gross, but is documented in comments. The HTML is not the original source.