index.hbs

---
isHomepage: true
---

<h2>Install</h2>

{{! --------------------------------------------------- }}

<h3>Download</h3>

<ul>
  <li><a href="{{sourceUrlPath}}packery.pkgd.js">packery.pkgd.js</a> un-minified, or</li>
  <li><a href="{{sourceUrlPath}}packery.pkgd.min.js">packery.pkgd.min.js</a> minified</li>
</ul>

{{! --------------------------------------------------- }}

<h3>CDN</h3>

<p>Link directly to Packery files on <a href="https://unpkg.com">unpkg</a>.</p>


``` html
<script src="https://unpkg.com/packery@3/dist/packery.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/packery@3/dist/packery.pkgd.min.js"></script>
```

{{! --------------------------------------------------- }}

<h3>Package managers</h3>

<p><a href="https://www.npmjs.com/package/packery">Install with npm</a>: <code>npm install packery</code></p>

<p>Install with <a href="https://bower.io">Bower</a>: <code>bower install packery --save</code></p>

{{! --------------------------------------------------- }}

<h2>License</h2>

{{! --------------------------------------------------- }}

<p>Packery v3 is licensed under the MIT License.</p>

<p>Whereas earlier versions of Packery were previously dual licensed for commercial license, Packery v3 licensing no longer has this distinction. You are free to use Packery v3 in commercial and closed-source applications.

{{! --------------------------------------------------- }}

<h2>Getting started</h2>

{{! --------------------------------------------------- }}

<h3>HTML</h3>

<p>Include the Packery <code>.js</code> file in your site.</p>

``` html
<script src="/path/to/packery.pkgd.min.js"></script>
```

<p>Packery works on a container element with a group of similar child items.</p>

``` html
<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>
```

{{! --------------------------------------------------- }}

<h3>CSS</h3>

<p>All sizing of items is handled by your CSS.</p>

``` css
.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }
```

{{! --------------------------------------------------- }}

<h3>Initialize with jQuery</h3>

<p>You can use Packery as a jQuery plugin:
  <code>$(<span class="string">'selector'</span>).packery()</code>.</p>

``` js
$('.grid').packery({
  // options
  itemSelector: '.grid-item',
  gutter: 10
});
```

{{! --------------------------------------------------- }}

<h3>Initialize with Vanilla JavaScript</h3>

<p>You can use Packery with vanilla JS:
  <code><span class="keyword">new</span> <span class="packery_keyword">Packery</span>( elem, options )</code>.
  The <code><span class="packery_keyword">Packery</span>()</code> constructor accepts two arguments: the container element and an options object.</p>

``` js
var elem = document.querySelector('.grid');
var pckry = new Packery( elem, {
  // options
  itemSelector: '.grid-item',
  gutter: 10
});

// element argument can be a selector string
//   for an individual element
var pckry = new Packery( '.grid', {
  // options
});
```

{{! --------------------------------------------------- }}

<h3>Initialize in HTML</h3>

<p>You can initialize Packery in HTML, without writing any JavaScript. Add <code>data-packery</code> attribute to the container element. <a href="options.html">Options</a> can be set in its value.</p>

``` html
<div class="grid" data-packery='{ "itemSelector": ".grid-item", "gutter": 10 }'>
```

<div class="call-out">
  <p>Options set in HTML must be valid JSON. Keys need to be quoted, for example <code><span class="string">"itemSelector"</span>:</code>. Note the value of <code>data-packery</code> is set with single quotes <code>'</code>, but JSON entities use double-quotes <code>"</code>.</p>
</div>

{{! --------------------------------------------------- }}

<h2>Packery in use</h2>

{{> in-use-gallery }}