1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"/> 5<link rel="stylesheet" type="text/css" href="css/main.css"> 6<link rel="stylesheet" type="text/css" href="artisanal-boxes-default.css">
7<script src="js/jquery-2.1.0.min.js"></script>
vendor: 1 bytes, line 7
7
8<script src="js/numeric-1.2.6.min.js"></script>
vendor: 1 bytes, line 8
8
9<script src="artisanal-boxes.js"></script>
9 10</head> 11<div class='contents'> 12 <div class='artbox logo'> 13 <div class='vbox'> 14 <div class='node'><a href="https://github.com/thoppe/artisanal-boxes.js">artisanal-boxes.js</a></div> 15 <div class='hbox'> 16 <div class='node'>[</div> 17 <div class='vbox'> 18 <div class='node script'>hand-crafted,</div> 19 <div class='node script'>premium &</div> 20 </div> 21 <div class='node'>]</div> 22 <div class='node goldenspaceV'></div> 23 <div class='node'>designed to</div> 24 </div> 25 <div class='hbox'> 26 <div class='node'>fit your life.</div> 27 <div class='node'><img src="images/flower.svg"></div> 28 </div> 29 </div> 30 </div> 31 <h1>What is it?</h1> 32 <a href="https://github.com/thoppe/artisanal-boxes.js"> 33 Artisanal boxes</a> is a javascript library that carefully crafts 34 a series of nested divs into a tightly knit arrangement. 35 These boxes are completely organic and fluidly respond to window resizes. 36 They begin with class of <code>artbox</code> and nest with <code>hbox</code> 37 and <code>vbox</code>'s. Let's see an example with a little piece of HAML: 38 <pre class='code'>.artbox 39 .hbox 40 .vbox 41 .node BOXES 42 .node are sized 43 .node to match width 44 .hbox 45 .vbox 46 .node but they 47 .node can be 48 .node (as nested) 49 .vbox 50 .node as you 51 .node want them</pre> 52 We get the following artbox, rendered on the fly 53 <div class='inset'> 54 <div class='artbox'> 55 <div class='hbox'> 56 <div class='vbox'> 57 <div class='node'>BOXES</div> 58 <div class='node'>are sized</div> 59 <div class='node'>to match width</div> 60 <div class='hbox'> 61 <div class='vbox'> 62 <div class='node'>but they</div> 63 <div class='node'>can be</div> 64 </div> 65 <div class='node'>(as nested)</div> 66 <div class='vbox'> 67 <div class='node'>as you</div> 68 <div class='node'>want them</div> 69 </div> 70 </div> 71 </div> 72 </div> 73 </div> 74 </div> 75 Hate HAML? That's OK, just check out the <a target="_blank" href="view-source:http://thoppe.github.io/artisanal-boxes.js/">source</a> of this page to see how it's done with pure HTML. 76 <h1>How does it work?</h1> 77 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. 78 <h1>Is it new?</h1> 79 Some libraries like <a href="http://fittextjs.com">FitText</a> 80 resize the font to match a specific width. Others, like 81 <a href="https://github.com/zachleat/BigText">BigText</a>, 82 will play with variations of line-height and font-size to get a 83 reasonable fit. The spiritual successor to artisanal boxes, 84 <a href="http://thoppe.github.io/make-it-work">make-it-work.js</a>, 85 used text-transforms, but only for a single vertical column. 86 Once we realized that <em>any</em> arbitrarily nested structure had a unique solution, it was time to learn javascript. So yes, it's new. 87 <h1>Is it fast?</h1> 88 In time you'll realize that good things are worth the wait. 89 The calculations to fit the boxes requires solving a linear system whose 90 size is proportional to each box <em>and</em> parent box. The calculation 91 is all done client-side and must be redone for any window resize. In practice, 92 this may add tenths of microseconds onto load times. 93 <h1>Is it beautiful?</h1> 94 Yes. 95</div> 96</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.