What is it?

Artisanal boxes is a javascript library that carefully crafts a series of nested divs into a tightly knit arrangement. These boxes are completely organic and fluidly respond to window resizes. They begin with class of artbox and nest with hbox and vbox's. Let's see an example with a little piece of HAML:

.artbox
   .hbox
    .vbox
     .node BOXES
     .node are sized
     .node to match width
     .hbox
      .vbox
       .node but they
       .node can be
      .node (as nested)
      .vbox
       .node as you
       .node want them

We get the following artbox, rendered on the fly Hate HAML? That's OK, just check out the source of this page to see how it's done with pure HTML.

How does it work?

First we measure the aspect ratio for each end node of the nested structure. The boxes respect the bounding box of the font, hence changing line-height will give a tighter fit at the expense of overlapping descenders. Once the aspect ratio of the text (and any images) have been measured the unique layout is calculated and applied using transform-scale.

Is it new?

Some libraries like FitText resize the font to match a specific width. Others, like BigText, will play with variations of line-height and font-size to get a reasonable fit. The spiritual successor to artisanal boxes, make-it-work.js, used text-transforms, but only for a single vertical column. Once we realized that any arbitrarily nested structure had a unique solution, it was time to learn javascript. So yes, it's new.

Is it fast?

In time you'll realize that good things are worth the wait. The calculations to fit the boxes requires solving a linear system whose size is proportional to each box and parent box. The calculation is all done client-side and must be redone for any window resize. In practice, this may add tenths of microseconds onto load times.

Is it beautiful?

Yes.