Boxify.js

Boxify.js is a jQuery plugin which lets you easily add Pinterest-like boxes to your website.

Adding Boxify.js to your website

Simply copy over Boxify.min.js into your website folder. You'll also need to include jQuery if you aren't already using that:

<script type="text/javascript" src="/path/to/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/path/to/boxify.min.js"></script> 

Using Boxify

In order to get Boxify to work you'll need to wrap your content in markup similar to the following:

<section id="boxy">   <figure>     <img src="..." />     <figcaption>       ...     </figcaption>   </figure> </section> 

You can then call Boxify.js using:

<script type="text/javascript"> 	$(window).load(function() { 		$('#boxy').boxify(); 	}); </script> 

Custom Styling

There are two methods of styling Boxify boxes:

Global Styling

The constructor accepts an object with optional properties:

• background controls the background of each box;
• border-color controls the border color;
• color controls the text color;
• margin controls the margin;
• padding controls the padding;
• width controls the width.

For example:

// This sets our boxes to have a red background and a width of 300px $('#boxy').boxify({ 	background: "#f00", 	width: "300px" }); 

Individual Box Styling

Each individual box accepts a data-* attribute to style it individually:

• data-background sets the background color;
• data-border-color sets the border color;
• data-color sets the text color.

For example:

<figure data-background="#f00" data-color="white"> 	... </figure>