-
Notifications
You must be signed in to change notification settings - Fork 1
/
index-5.htm
754 lines (648 loc) · 42.8 KB
/
index-5.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
<!doctype html>
<html class="" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Filter & sort magical layouts">
<title>Isotope · Filter & sort magical layouts</title>
<!-- Isotope does not require any CSS files -->
<link rel="stylesheet" href="css/isotope-docs.css?6" media="screen">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@metafizzyco">
<meta name="twitter:url" content="https://isotope.metafizzy.co/index.html">
<meta name="twitter:title" content="Isotope">
<meta name="twitter:description" content="Filter & sort magical layouts">
</head>
<body class="page--index">
<div class="nav">
<h1 class="nav__title"><a href=".">Isotope</a></h1>
<ol class="site-nav">
<li class="site-nav__item site-nav__item--filtering">
<a class="site-nav__item__link" href="filtering.html">Filtering</a></li>
<li class="site-nav__item site-nav__item--sorting">
<a class="site-nav__item__link" href="sorting.html">Sorting</a></li>
<li class="site-nav__item site-nav__item--layout ">
<a class="site-nav__item__link" href="layout.html">Layout</a>
</li>
<li class="site-nav__item site-nav__item--layout-modes sub-nav-parent">
<a class="site-nav__item__link" href="layout-modes.html">Layout modes</a>
<ul class="sub-nav">
<li class="sub-nav__item sub-nav__item--masonry">
<a class="sub-nav__item__link" href="layout-modes/masonry.html">masonry</a></li>
<li class="sub-nav__item sub-nav__item--fitrows">
<a class="sub-nav__item__link" href="layout-modes/fitrows.html">fitRows</a></li>
<li class="sub-nav__item sub-nav__item--vertical">
<a class="sub-nav__item__link" href="layout-modes/vertical.html">vertical</a></li>
<li class="sub-nav__item sub-nav__item--packery">
<a class="sub-nav__item__link" href="layout-modes/packery.html">packery</a></li>
<li class="sub-nav__item sub-nav__item--cellsbyrow">
<a class="sub-nav__item__link" href="layout-modes/cellsbyrow.html">cellsByRow</a></li>
<li class="sub-nav__item sub-nav__item--masonryhorizontal">
<a class="sub-nav__item__link" href="layout-modes/masonryhorizontal.html">masonryHorizontal</a></li>
<li class="sub-nav__item sub-nav__item--fitcolumns">
<a class="sub-nav__item__link" href="layout-modes/fitcolumns.html">fitColumns</a></li>
<li class="sub-nav__item sub-nav__item--cellsbycolumn">
<a class="sub-nav__item__link" href="layout-modes/cellsbycolumn.html">cellsByColumn</a></li>
<li class="sub-nav__item sub-nav__item--horiz">
<a class="sub-nav__item__link" href="layout-modes/horiz.html">horiz</a></li>
</ul>
</li>
<li class="site-nav__item site-nav__item--options">
<a class="site-nav__item__link" href="options.html">Options</a></li>
<li class="site-nav__item site-nav__item--methods">
<a class="site-nav__item__link" href="methods.html">Methods</a></li>
<li class="site-nav__item site-nav__item--events">
<a class="site-nav__item__link" href="events.html">Events</a></li>
<li class="site-nav__item site-nav__item--extras">
<a class="site-nav__item__link" href="extras.html">Extras</a></li>
<li class="site-nav__item site-nav__item--license">
<a class="site-nav__item__link" href="license.html">License</a></li>
<li class="site-nav__item site-nav__item--faq">
<a class="site-nav__item__link" href="faq.html">FAQ</a></li>
</ol>
<ul class="page-nav" data-js="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#install">Install</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#download">Download</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#cdn">CDN</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#package-managers">Package managers</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#license">License</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#commercial-license">Commercial license</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#open-source-license">Open source license</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#getting-started">Getting started</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#html">HTML</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#css">CSS</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-with-jquery">Initialize with jQuery</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-with-vanilla-javascript">Initialize with Vanilla JavaScript</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-in-html">Initialize in HTML</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#next">Next</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#isotope-in-use">Isotope in use</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#people-like-isotope">People like Isotope</a></li>
</ul>
</div>
<div class="hero">
<div class="container">
<h1 class="hero__title">Isotope</h1>
<p class="hero__tagline">Filter & sort magical layouts</p>
<p class="hero__gh-button">
<a class="gh-button" href="https://github.com/metafizzy/isotope" data-js="gh-button">
<span class="gh-button__title">
<svg class="gh-button__icon gh-button__icon--github-logo" viewbox="0 0 512 512">
<path d="M256 0C115 0 0 115 0 256c0 113 73 209 175 243 13 2 18-5 18-12v-48c-64 12-81-16-86-30-3-7-15-30-26-36-9-5-22-17 0-17 20 0 35 19 39 26 23 39 60 28 75 21 2-17 9-28 16-34-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-33 3-68 0 0 21-7 70 26 20-6 42-9 64-9s43 3 64 9c49-33 70-26 70-26 14 35 5 61 3 68 16 18 26 41 26 69 0 98-60 120-117 126 9 8 17 23 17 47v70c0 7 5 15 18 12 100-33 173-129 173-242C512 115 397 0 256 0z"/>
</svg>
<span class="gh-button__title__text">Isotope on GitHub</span>
</span>
<span class="gh-button__stat">
<svg class="gh-button__icon gh-button__icon--star" viewbox="0 0 896 1024">
<path d="M896 384l-313-41L448 64 313 343 0 384l230 208L171 895l277-149 277 148L665 593 896 384z"/>
</svg>
<span class="gh-button__stat__text">6,931</span>
</span>
</a>
</p>
<div class="duo" style="margin-bottom: 2.0rem;">
<div class="duo__cell">
<a class="chunky-button chunky-button--fill" href="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js">
<i class="chunky-button__icon">
<svg class="js-file" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewbox="0 0 500 500">
<path d="M218 230V332c0 30-12 42-35 42c-2 0-10-1-11-1l2-20c1 0 6 1 7 1c15 0 13-18 13-20
V230H218z M299 256c-2-3-10-10-21-10c-10 0-15 4-15 10c0 9 10 10 21 13c19 4 31 13 31 29
c0 17-10 32-40 32c-18 0-32-8-39-16l16-15c3 4 11 12 25 12c14 0 15-9 15-11
c0-8-6-10-22-14c-16-4-28-11-28-27c0-21 18-31 38-31c21 0 32 10 36 15L299 256z
M206 183c-9 0-15 6-15 14s7 14 15 14s15-6 15-14S214 183 206 183z M445 149
c0-0 0-1 0-1c-0-1-0-2-0-2c0 0 0-0 0-0c-0-1-0-2-1-3c-0-0-0-0-0-1
c-0-1-1-2-1-2c0-0-0-0-0-0c-0-1-1-2-1-2c-0-0-0-0-0-1c-1-1-1-1-2-2
c0 0 0 0 0 0l-125-125c0 0 0 0 0 0c-1-1-1-1-2-2c-0-0-0-0-1-0c-1-1-1-1-2-1c-0 0-0-0-0-0
c-1-0-2-1-2-1c-0-0-0-0-1-0c-1-0-2-1-3-1c0 0-0 0-0 0c-1-0-2-0-2-0
c-0 0-1 0-1 0c-0 0-0 0-1 0H100C75 5 55 25 55 50v400c0 25 20 45 45 45h300c25 0 45-20 45-45V150
C445 150 445 150 445 149z M320 73l57 57H320V73z M400 455H100c-3 0-5-2-5-5V50c0-3 2-5 5-5h180v105
c0 11 9 20 20 20h105v280C405 453 403 455 400 455z"/>
</svg>
</i>
<span class="chunky-button__text">
<span class="chunky-button__text__plain">Download</span>
<b class="chunky-button__text__strong">isotope.pkgd.min.js</b>
</span>
</a>
</div>
<div class="duo__cell">
<a class="chunky-button chunky-button--fill" href="isotope-docs.zip">
<i class="chunky-button__icon">
<svg class="zip-file" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewbox="0 0 500 500">
<path d="M119 305l52-56h-49v-19h78v21l-52 55h54v20h-83V305z M223 230h24v96h-24V230z M299 230v13
h1c5-8 17-16 33-16c30 0 47 25 47 50c0 35-24 51-47 51c-11 0-25-5-32-16h-0v61h-24
v-144H299z M355 278c0-15-8-31-28-31c-17 0-28 17-28 31c0 14 10 31 28 31
C349 309 355 290 355 278z M235 183c-9 0-15 6-15 14s7 14 15 14s15-6 15-14
S243 183 235 183z M450 105H245V75c0-25-20-45-45-45H50C25 30 5 50 5 75v75v275c0 25 20 45 45 45h400
c25 0 45-20 45-45V150C495 125 475 105 450 105z M50 70h150c3 0 5 2 5 5v30H50c-2 0-3 0-5 0V75
C45 72 47 70 50 70z M455 425c0 3-2 5-5 5H50c-3 0-5-2-5-5V150c0-3 2-5 5-5h400c3 0 5 2 5 5V425z"/>
</svg>
</i>
<span class="chunky-button__text">
<span class="chunky-button__text__plain">Download</span>
<b class="chunky-button__text__strong">these docs</b>
</span>
</a>
</div>
</div>
<div class="big-demo" data-js="hero-demo">
<div class="ui-group">
<h3 class="ui-group__title">Filter</h3>
<div class="filters button-group js-radio-button-group">
<button class="button is-checked" data-filter="*">show all</button>
<button class="button" data-filter=".metal">metal</button>
<button class="button" data-filter=".transition">transition</button>
<button class="button" data-filter="ium">–ium</button>
</div>
</div>
<div class="ui-group">
<h3 class="ui-group__title">Sort</h3>
<div class="sort-by button-group js-radio-button-group">
<button class="button is-checked" data-sort-by="original-order">original order</button>
<button class="button" data-sort-by="name">name</button>
<button class="button" data-sort-by="symbol">symbol</button>
<button class="button" data-sort-by="number">number</button>
</div>
</div>
<pre class="code-display"><code>$grid.isotope({
itemSelector: <span class="string">'.element-item'</span>,
layoutMode: <span class="string">'fitRows'</span>,
...
})</code></pre>
<div class="grid">
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Mercury</h5>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">200.59</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h5 class="name">Tellurium</h5>
<p class="symbol">Te</p>
<p class="number">52</p>
<p class="weight">127.6</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Bismuth</h5>
<p class="symbol">Bi</p>
<p class="number">83</p>
<p class="weight">208.980</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Lead</h5>
<p class="symbol">Pb</p>
<p class="number">82</p>
<p class="weight">207.2</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Gold</h5>
<p class="symbol">Au</p>
<p class="number">79</p>
<p class="weight">196.967</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h5 class="name">Potassium</h5>
<p class="symbol">K</p>
<p class="number">19</p>
<p class="weight">39.0983</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h5 class="name">Sodium</h5>
<p class="symbol">Na</p>
<p class="number">11</p>
<p class="weight">22.99</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Cadmium</h5>
<p class="symbol">Cd</p>
<p class="number">48</p>
<p class="weight">112.411</p>
</div>
<div class="element-item alkaline-earth metal " data-category="alkaline-earth">
<h5 class="name">Calcium</h5>
<p class="symbol">Ca</p>
<p class="number">20</p>
<p class="weight">40.078</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Rhenium</h5>
<p class="symbol">Re</p>
<p class="number">75</p>
<p class="weight">186.207</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Thallium</h5>
<p class="symbol">Tl</p>
<p class="number">81</p>
<p class="weight">204.383</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h5 class="name">Antimony</h5>
<p class="symbol">Sb</p>
<p class="number">51</p>
<p class="weight">121.76</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Cobalt</h5>
<p class="symbol">Co</p>
<p class="number">27</p>
<p class="weight">58.933</p>
</div>
<div class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">
<h5 class="name">Ytterbium</h5>
<p class="symbol">Yb</p>
<p class="number">70</p>
<p class="weight">173.054</p>
</div>
<div class="element-item noble-gas nonmetal " data-category="noble-gas">
<h5 class="name">Argon</h5>
<p class="symbol">Ar</p>
<p class="number">18</p>
<p class="weight">39.948</p>
</div>
<div class="element-item diatomic nonmetal " data-category="diatomic">
<h5 class="name">Nitrogen</h5>
<p class="symbol">N</p>
<p class="number">7</p>
<p class="weight">14.007</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h5 class="name">Uranium</h5>
<p class="symbol">U</p>
<p class="number">92</p>
<p class="weight">238.029</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h5 class="name">Plutonium</h5>
<p class="symbol">Pu</p>
<p class="number">94</p>
<p class="weight">(244)</p>
</div>
</div>
<p class="edit-demo">
<a href="https://codepen.io/desandro/pen/nFrte">Edit this demo on CodePen</a>
</p>
</div>
</div>
</div>
<div id="content" class="main">
<div class="container">
<h2 id="install">Install</h2>
<h3 id="download">Download</h3>
<ul>
<li><a href="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js">isotope.pkgd.js</a> un-minified, or</li>
<li><a href="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js">isotope.pkgd.min.js</a> minified</li>
</ul>
<h3 id="cdn">CDN</h3>
<p>Link directly to <a href="https://unpkg.com">unpkg</a>.</p>
<pre><code class="html"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span>
<span class="comment"><!-- or --></span>
<span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span>
</code></pre>
<h3 id="package-managers">Package managers</h3>
<p><a href="https://www.npmjs.com/package/isotope-layout">Install with npm</a>: <code>npm install isotope-layout</code></p>
<p>Install with Bower: <code>bower install isotope-layout --save</code></p>
<h2 id="license">License</h2>
<h3 id="commercial-license">Commercial license</h3>
<p>If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. <a href="license.html">Read more about Isotope commercial licensing</a>.</p>
<p>Once purchased, you’ll receive a commercial license PDF and be all set to use Isotope in your commercial applications.</p>
<div class="buy-button-trio">
<a class="buy-button" href="https://gum.co/isotope-dev">
<span class="buy-button__project">Isotope Commercial</span>
<span class="buy-button__title">Developer</span>
<span class="buy-button__license">License</span>
<span class="buy-button__for">for 1 developer</span>
<span class="buy-button__price">
<span class="buy-button__price__dollar">$</span><span class="buy-button__price__value">25</span>
</span>
</a>
<a class="buy-button" href="https://gum.co/isotope-team">
<span class="buy-button__project">Isotope Commercial</span>
<span class="buy-button__title">Team</span>
<span class="buy-button__license">License</span>
<span class="buy-button__for">for up to 8 developers</span>
<span class="buy-button__price">
<span class="buy-button__price__dollar">$</span><span class="buy-button__price__value">110</span>
</span>
</a>
<a class="buy-button" href="https://gum.co/isotope-org">
<span class="buy-button__project">Isotope Commercial</span>
<span class="buy-button__title">Organization</span>
<span class="buy-button__license">License</span>
<span class="buy-button__for">for Unlimited developers</span>
<span class="buy-button__price">
<span class="buy-button__price__dollar">$</span><span class="buy-button__price__value">320</span>
</span>
</a>
</div>
<h3 id="open-source-license">Open source license</h3>
<p>If you are creating an open source application under a license compatible with the <a href="https://www.gnu.org/licenses/gpl-3.0.html">GNU GPL license v3</a>, you may use Isotope under the terms of the GPLv3. <a href="license.html">Read more about Isotope open source licensing</a>.</p>
<h2 id="getting-started">Getting started</h2>
<h3 id="html">HTML</h3>
<p>Include the Isotope <code>.js</code> file in your site.</p>
<pre><code class="html"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/path/to/isotope.pkgd.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span>
</code></pre>
<p>Isotope works on a container element with a group of similar child items.</p>
<pre><code class="html"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"grid"</span>></span>
<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"grid-item"</span>></span>...<span class="tag"></<span class="name">div</span>></span>
<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"grid-item grid-item--width2"</span>></span>...<span class="tag"></<span class="name">div</span>></span>
<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"grid-item"</span>></span>...<span class="tag"></<span class="name">div</span>></span>
...
<span class="tag"></<span class="name">div</span>></span>
</code></pre>
<h3 id="css">CSS</h3>
<p>All sizing of items is handled by your CSS.</p>
<pre><code class="css"><span class="selector-class">.grid-item</span> { <span class="attribute">width</span>: <span class="number">25%</span>; }
<span class="selector-class">.grid-item--width2</span> { <span class="attribute">width</span>: <span class="number">50%</span>; }
</code></pre>
<h3 id="initialize-with-jquery">Initialize with jQuery</h3>
<p>You can use Isotope as a jQuery plugin:
<code>$(<span class="string">'selector'</span>).isotope()</code>.</p>
<pre><code class="js">$(<span class="string">'.grid'</span>).isotope({
<span class="comment">// options</span>
itemSelector: <span class="string">'.grid-item'</span>,
<span class="attr">layoutMode</span>: <span class="string">'fitRows'</span>
});
</code></pre>
<h3 id="initialize-with-vanilla-javascript">Initialize with Vanilla JavaScript</h3>
<p>You can use Isotope with vanilla JS:
<code><span class="keyword">new</span> <span class="isotope_keyword">Isotope</span>( elem, options )</code>.
The <code><span class="isotope_keyword">Isotope</span>()</code> constructor accepts two arguments: the container element and an options object.</p>
<pre><code class="js"><span class="keyword">var</span> elem = <span class="built_in">document</span>.querySelector(<span class="string">'.grid'</span>);
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="keyword">new</span> <span class="isotope_keyword">Isotope</span>( elem, {
<span class="comment">// options</span>
itemSelector: <span class="string">'.grid-item'</span>,
<span class="attr">layoutMode</span>: <span class="string">'fitRows'</span>
});
<span class="comment">// element argument can be a selector string</span>
<span class="comment">// for an individual element</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="keyword">new</span> <span class="isotope_keyword">Isotope</span>( <span class="string">'.grid'</span>, {
<span class="comment">// options</span>
});
</code></pre>
<h3 id="initialize-in-html">Initialize in HTML</h3>
<p>You can initialize Isotope in HTML, without writing any JavaScript. Add <code>data-isotope</code> attribute to the container element. <a href="options.html">Options</a> can be set in its value.</p>
<pre><code class="html"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"grid"</span> <span class="attr">data-isotope</span>=<span class="string">'{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'</span>></span>
</code></pre>
<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 HTML attribute <code>data-isotope</code> is set with single quotes <code>'</code>, but JSON entities use double-quotes <code>"</code>.</p>
</div>
<h2 id="next">Next</h2>
<p>Learn more about how to use Isotope:</p>
<ul>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="sorting.html">Sorting</a></li>
<li><a href="layout.html">Layout</a></li>
</ul>
<h2 id="isotope-in-use">Isotope in use</h2>
<p>Justin Bieber, <a href="http://www.tylerperry.com/entertainment/">Tyler Perry</a>, <a href="http://colonelsanders.com">Colonel Sanders</a>: they all have used Isotope.</p>
<p>Are you using Isotope? Tweet <a href="https://twitter.com/metafizzyco">@metafizzyco</a> or email <a href="mailto:yo@metafizzy.co">yo@metafizzy.co</a> to share your work and possibly get it featured here.</p>
<div class="in-use-grid go-wide" data-js="in-use-grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<a class="in-use-grid__item" href="http://malikafavre.com/">
<p class="in-use-grid__item__title">Malika Favre</p>
<img class="in-use-grid__item__image" src="https://i.imgur.com/0HvLvih.png">
</a>
<a class="in-use-grid__item" href="http://www.cc.com/shows/broad-city">
<p class="in-use-grid__item__title">Comedy Central</p>
<img class="in-use-grid__item__image" src="img/comedy-central.jpg">
</a>
<a class="in-use-grid__item" href="http://www.nytimes.com/interactive/2012/12/24/sports/basketball/pick-your-all-time-new-york-city-nba-team.html">
<p class="in-use-grid__item__title">New York Times</p>
<img class="in-use-grid__item__image" src="https://i.imgur.com/a8DsGOg.jpg">
</a>
<a class="in-use-grid__item" href="http://www.kia.ca/all-vehicles">
<p class="in-use-grid__item__title">Kia</p>
<img class="in-use-grid__item__image" src="https://i.imgur.com/f86QG9u.jpg">
</a>
<a class="in-use-grid__item" href="http://www.bbc.com/future/bespoke/20140724-flight-risk/">
<p class="in-use-grid__item__title">BBC - Flight Risk</p>
<img class="in-use-grid__item__image" src="https://i.imgur.com/zDc6cDu.jpg">
</a>
<a class="in-use-grid__item" href="https://www.usa.rugby/mens-eagles/players/">
<p class="in-use-grid__item__title">USA Rugby</p>
<img class="in-use-grid__item__image" src="https://i.imgur.com/82EXhDI.jpg">
</a>
<a class="in-use-grid__item" href="http://www.wholefoodsmarket.com/">
<p class="in-use-grid__item__title">Whole Foods Market</p>
<img class="in-use-grid__item__image" src="https://i.imgur.com/z6T2zcO.jpg">
</a>
<a class="in-use-grid__item" href="https://www.ml.com/financial-goals-and-priorities/home.html">
<p class="in-use-grid__item__title">Merrill Lynch</p>
<img class="in-use-grid__item__image" src="https://i.imgur.com/FRkY3M0.jpg">
</a>
<a class="in-use-grid__item" href="http://patchwork.stylehatch.co/">
<p class="in-use-grid__item__title">Patchwork</p>
<img class="in-use-grid__item__image" src="https://i.imgur.com/d4c5KdG.jpg">
</a>
<a class="in-use-grid__item" href="http://bench.li/">
<p class="in-use-grid__item__title">Design Inspiration / Bench.li</p>
<img class="in-use-grid__item__image" src="https://i.imgur.com/Jr3XuHp.jpg">
</a>
</div>
<h2 id="people-like-isotope">People like Isotope</h2>
<p><a class="twitter-timeline" data-width="420" data-height="500" data-dnt="true" data-theme="dark" href="https://twitter.com/metafizzyco/timelines/719923562660917248?ref_src=twsrc%5Etfw">People like Isotope - Curated tweets by metafizzyco</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
</div>
</div>
<footer class="site-footer">
<div class="container">
<p class="site-footer__copy">Metafizzy makes delightful web plugins & logos</p>
<div class="showcase">
<ul class="showcase-item-list">
<li class="showcase-item">
<a class="showcase-item__link" href="https://infinite-scroll.com">
<div class="showcase-item__image">
<svg class="infinite-scroll-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 520 520" width="200" height="200">
<path class="infinite-scroll-illo__page infinite-scroll-illo__page--back" d="M90,110H10V90c0-22,18-40,40-40h40V110z"/>
<path class="infinite-scroll-illo__page infinite-scroll-illo__page--front1" d="M270,90L270,90c0-22-18-40-40-40h0H50h0c22,0,40,18,40,40v0v0v160h180V90z"/>
<path class="infinite-scroll-illo__page infinite-scroll-illo__page--front2" d="M170,330v-20H90v20v0c0,22,18,40,40,40h0h40V330z"/>
<path class="infinite-scroll-illo__page infinite-scroll-illo__page--back" d="M350,150H210c-22,0-40,18-40,40v140v0c0,22-18,40-40,40h0h220V150z"/>
<path class="infinite-scroll-illo__page infinite-scroll-illo__page--front3" d="M430,470V270H250v160c0,22,18,40,40,40H430z"/>
<path class="infinite-scroll-illo__page infinite-scroll-illo__page--front2" d="M250,190v20h180v-20c0-22-18-40-40-40H210h0C232,150,250,168,250,190L250,190z"/>
<path class="infinite-scroll-illo__page infinite-scroll-illo__page--back" d="M330,410v20v0c0,22-18,40-40,40h0h180c22,0,40-18,40-40v-20H330z"/>
</svg>
</div>
<div class="showcase-item__text">
<h3 class="showcase-item__title">Infinite Scroll</h3>
<p class="showcase-item__description">Automatically add next page</p>
</div>
</a>
</li>
<li class="showcase-item">
<a class="showcase-item__link" href="https://flickity.metafizzy.co">
<div class="showcase-item__image">
<svg class="flickity-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 360 360" width="100" height="100">
<path class="flickity-illo__color1" fill="#19F" d="M300 220L300 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
<path class="flickity-illo__color1" fill="#19F" d="M340 220L340 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
<path class="flickity-illo__color2" fill="#333" d="M320 290V180c0-18-10-35-27-43L240 110v180H320z"/>
<path class="flickity-illo__color3" fill="white" d="M240 300H120c-11 0-20-9-20-20V40c0-11 9-20 20-20h120c11 0 20 9 20 20v240C260 291 251 300 240 300z"/>
<path class="flickity-illo__color4" fill="#ED0" d="M230 260H130c-6 0-10-5-10-10V70c0-6 5-10 10-10h100c6 0 10 5 10 10v180 C240 256 236 260 230 260z"/>
<path class="flickity-illo__color2" fill="#333" d="M260 200h60v81c0 32-26 59-59 59h0c-34 0-61-27-61-61V240h20 C242 240 260 222 260 200L260 200z"/>
<path class="flickity-illo__color5" fill="#C25" d="M180 220h-60V100h60c6 0 10 5 10 10v100C190 216 186 220 180 220z"/>
<path class="flickity-illo__color1" fill="#19F" d="M240 220h-20c-6 0-10-5-10-10V110c0-6 5-10 10-10h20V220z"/>
<rect class="flickity-illo__color2" fill="#333" x="230" y="280" width="90" height="80"/>
<circle class="flickity-illo__color4" fill="#ED0" cx="180" cy="280" r="10"/>
<line class="flickity-illo__thumb" stroke="#333" stroke-width="60" stroke-linecap="round" x1="262" y1="290" x2="152" y2="240"/>
<path class="flickity-illo__color4" fill="#ED0" d="M190 50h-20c-6 0-10-5-10-10v0c0-6 5-10 10-10h20c6 0 10 5 10 10v0C200 46 196 50 190 50z"/>
<path class="flickity-illo__color5" fill="#C25" d="M80 220L80 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
<path class="flickity-illo__color5" fill="#C25" d="M40 220L40 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
</svg>
</div>
<div class="showcase-item__text">
<h3 class="showcase-item__title">Flickity</h3>
<p class="showcase-item__description">Touch, responsive, flickable carousels</p>
</div>
</a>
</li>
<li class="showcase-item">
<a class="showcase-item__link" href="https://packery.metafizzy.co">
<div class="showcase-item__image">
<svg class="packery-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 700" width="100" height="100">
<path class="packery-illo__item" fill="#C09" d="M172 180H48c-4 0-8-4-8-8V48c0-4 4-8 8-8h124c4 0 8 4 8 8v124C180 176 176 180 172 180z"/>
<path class="packery-illo__item" fill="#C09" d="M172 340H48c-4 0-8-4-8-8V208c0-4 4-8 8-8h124c4 0 8 4 8 8v124C180 336 176 340 172 340z"/>
<path class="packery-illo__item" fill="#C09" d="M492 660H368c-4 0-8-4-8-8V528c0-4 4-8 8-8h124c4 0 8 4 8 8v124C500 656 496 660 492 660z"/>
<path class="packery-illo__item" fill="#C09" d="M652 660H528c-4 0-8-4-8-8V528c0-4 4-8 8-8h124c4 0 8 4 8 8v124C660 656 656 660 652 660z"/>
<path class="packery-illo__item" fill="#C09" d="M652 500H368c-4 0-8-4-8-8V368c0-4 4-8 8-8h284c4 0 8 4 8 8v124C660 496 656 500 652 500z"/>
<path class="packery-illo__item" fill="#C09" d="M332 660H48c-4 0-8-4-8-8V368c0-4 4-8 8-8h284c4 0 8 4 8 8v284C340 656 336 660 332 660z"/>
<path class="packery-illo__item" fill="#C09" d="M652 340H528c-4 0-8-4-8-8V48c0-4 4-8 8-8h124c4 0 8 4 8 8v284C660 336 656 340 652 340z"/>
<path class="packery-illo__draggie" fill="#EA0" d="M572 440H288c-4 0-8-4-8-8V148c0-4 4-8 8-8h284c4 0 8 4 8 8v284C580 436 576 440 572 440z"/>
<g>
<path class="packery-illo__hand" fill="white" d="M530 250c-11 0-20 9-20 20v-10c0-11-9-20-20-20s-20 9-20 20c0-11-9-20-20-20s-20 9-20 20c0-11-9-20-20-20
s-20 9-20 20v20c-17 0-30 13-30 30c0 11 6 20 14 25l19 35c10 18 30 30 51 30h28
c43 0 78-35 78-78V270C550 259 541 250 530 250z"/>
<line class="packery-illo__hand-line" stroke="#EA0" fill="none" stroke-width="16" stroke-linecap="round" x1="430" y1="300" x2="430" y2="340"/>
<line class="packery-illo__hand-line" stroke="#EA0" fill="none" stroke-width="16" stroke-linecap="round" x1="470" y1="300" x2="470" y2="340"/>
<line class="packery-illo__hand-line" stroke="#EA0" fill="none" stroke-width="16" stroke-linecap="round" x1="510" y1="300" x2="510" y2="340"/>
</g>
</svg>
</div>
<div class="showcase-item__text">
<h3 class="showcase-item__title">Packery</h3>
<p class="showcase-item__description">Gapless, draggable grid layouts</p>
</div>
</a>
</li>
<li class="showcase-item">
<a class="showcase-item__link" href="http://logo.pizza">
<div class="showcase-item__image">
<svg class="logo-pizza-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 700" width="100" height="100">
<path class="logo-pizza-illo__outline" fill="#C25" d="M513 91c-9-0-17 5-21 12l-80 160c-3 5-6 10-11 15l-47 47
c-5 5-12-1-9-7l32-64c5-11-2-23-14-23h-0c-121 0-268 70-327 180
C-9 497 35 609 196 609c138 0 279-85 327-180v0c5-11-2-23-14-23h-77c-13 0-19-15-10-24
l81-81c5-5 11-8 18-8l0 0c13 0 19 15 10 24L494 354c-6 6-6 14 0 20c3 3 6 4 10 4
c4 0 7-1 10-4l80-80h53c9 0 17-5 21-13C707 190 656 97 513 91z M334 281l-59 117
c-2 5-7 8-13 8H97c-4 0-6-4-3-7c49-64 143-114 236-124C333 275 335 278 334 281z
M70 441c2-4 6-7 10-7h168c4 0 7 4 5 8l-59 118c-2 4-6 6-11 6
C106 565 38 521 70 441z M466 441c-49 64-143 114-236 124c-3 0-6-3-4-6l59-117
c2-5 7-8 13-8h166C466 434 468 438 466 441z M446 318l-81 81c-5 5-11 8-18 8l0 0
c-13 0-19-15-10-24l81-81c5-5 11-8 18-8l0 0C449 294 455 309 446 318z M447 258L506 139
c2-4 6-7 11-6c101 7 140 60 114 126c-2 4-6 7-10 7H452C448 266 445 262 447 258z"/>
<path class="logo-pizza-illo__slice" fill="#ED0" d="M334 281l-59 117c-2 5-7 8-13 8H97c-4 0-6-4-3-7
c49-64 143-114 236-124C333 275 335 278 334 281z"/>
<path class="logo-pizza-illo__slice" fill="#ED0" d="M70 441c2-4 6-7 10-7h168c4 0 7 4 5 8l-59 118c-2 4-6 6-11 6
C106 565 38 521 70 441z"/>
<path class="logo-pizza-illo__slice" fill="#ED0" d="M466 441c-49 64-143 114-236 124c-3 0-6-3-4-6l59-117
c2-5 7-8 13-8h166C466 434 468 438 466 441z"/>
<path class="logo-pizza-illo__slice" fill="#ED0" d="M447 258L506 139c2-4 6-7 11-6c101 7 140 60 114 126c-2 4-6 7-10 7H452
C448 266 445 262 447 258z"/>
</svg>
</div>
<div class="showcase-item__text">
<h3 class="showcase-item__title">Logo Pizza</h3>
<p class="showcase-item__description">Hot & ready logos for sale</p>
</div>
</a>
</li>
<li class="showcase-item">
<a class="showcase-item__link" href="http://fizzy.school">
<div class="showcase-item__image">
<svg class="witchie-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 1000" width="200" height="200">
<circle class="witchie-logo__moon" fill="white" cx="500" cy="500" r="500"/>
<path class="witchie-logo__broom" fill="#EA0" d="M582 675a35 35 0 0 0 8-20 3 3 0 0 1 3-2h71a3 3 0 0 1 3 3 59 59 0 0 0 0 20 3 3 0 0 1-3 3h-79A3 3 0 0 1 582 675Zm219 4a13 13 0 0 0 13-14c-1-7-7-12-14-12h-44a3 3 0 0 0-3 3v21a3 3 0 0 0 3 3ZM299 660a203 203 0 0 1-27-36 8 8 0 0 0-4-3L178 582a13 13 0 0 0-18 12v77a8 8 0 0 0 8 8h22a5 5 0 0 1 2 10L164 703a8 8 0 0 0-4 7v28a13 13 0 0 0 18 12l146-63a3 3 0 0 0 1-5A197 197 0 0 1 299 660Z"/>
<path class="witchie-logo__dress" fill="#333" d="M326 705h4a13 13 0 0 1 13 13v8a13 13 0 0 0 4 9l13 13a13 13 0 0 1 0 19l-56 56c-10 10-26-0-22-13L314 714A13 13 0 0 1 326 705Zm397-79c-27 0-47 26-37 54 3 7 11 16 17 19a42 42 0 0 0 19 5 38 38 0 0 0 7-1 8 8 0 0 0 6-8v-62a8 8 0 0 0-6-8 38 38 0 0 0-7-1M840 397c-3-15-33-23-77-23a521 521 0 0 0-59 4 5 5 0 0 1-5-2L567 177a8 8 0 0 0-7-4 8 8 0 0 0-8 8l1 227a5 5 0 0 1-4 5c-74 24-123 55-119 76 2 8 11 14 26 18a3 3 0 0 1 1 4l-11 11c-20 20-56 30-92 30-31 0-63-8-84-23a5 5 0 0 0-3-1 5 5 0 0 0-5 5c0 78 68 173 183 173h75a10 10 0 0 0 7-3l38-38a16 16 0 0 0 0-23l-34-34a10 10 0 0 1 0-14l15-15a3 3 0 0 1 5 2v15a5 5 0 0 0 5 5H674a4 4 0 0 0 3-7l-90-90a3 3 0 0 1 1-4c34-19 59-49 67-84a3 3 0 0 1 2-2c6-1 12-1 17-1 22 0 37 5 39 14 1 6 3 11 2 17-5 17 1 31 8 31a6 6 0 0 0 2-0C797 448 845 419 840 397Z"/>
</svg>
</div>
<div class="showcase-item__text">
<h3 class="showcase-item__title">Fizzy School</h3>
<p class="showcase-item__description">Lessons in JavaScript for jQuery newbies</p>
</div>
</a>
</li>
</ul>
</div>
<p class="site-footer__copy">
<a href="https://twitter.com/metafizzyco">
<svg class="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" width="30" height="30">
<path d="M512 97c-19 8-39 14-60 16 22-13 38-34 46-58-20 12-43 21-67 25-19-19-46-32-77-32-58 0-117 52-102 129-87-4-165-46-216-110-24 40-19 107 32 140-17 0-33-5-48-13v1c0 51 36 93 84 103-15 4-34 5-47 2 13 42 52 72 98 73-47 36-96 49-155 44 46 30 102 47 161 47 197 0 306-168 299-312 20-15 38-34 52-55z"/>
</svg>
Follow @metafizzyco on Twitter for Isotope updates
</a>
</p>
<div class="mfzy-brand">
<a class="mfzy-brand__link" href="https://metafizzy.co">
<svg class="mfzy-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 144 144" width="36" height="36">
<title>Metafizzy logo</title>
<defs>
<path id="mfzy-logo__body" d="M 120 24 a 12 12 0 0 0-24 0 a 72 72 0 0 1 -1 11
a 40 40 0 0 0 -13 -8.5 A 12 12 0 1 0 61.1 25.1 c -8 2 -14 6 -19.6 11.6
A 12 12 0 1 0 35.3 55.5 L 45.8 72.1 l -16 9.6 A 12 12 0 0 0 42.2 102.3
L 58 92.8 a 20 20 0 0 1 -0.2 11.9 l -5.2 15.5 a 12 12 0 0 0 22.8 7.6
l 1.1 -3.3 l 23.7 -14.2 a 12 12 0 0 0 5.2 -6.5 l 4 -12 A 50 50 0 0 0 111.9 76
a 52 52 0 0 0 -1.6 -12.8 C 115 57 120 44 120 24Z"/>
<path id="mfzy-logo__eye" d="M 0 6.5 a 6.5 6.5 0 0 1 13 0 c 0 3.5 -3 0.5 -6.5 0.5 s -6.5 3 -6.5 -0.5 Z"/>
<clippath id="mfzy-logo__body-clip">
<use xlink:href="#mfzy-logo__body"/>
</clippath>
</defs>
<use class="mfzy-logo__body-outline" xlink:href="#mfzy-logo__body" fill="#333" stroke="#333" stroke-width="16"/>
<use class="mfzy-logo__body-fill" xlink:href="#mfzy-logo__body"/>
<g class="mfzy-logo__stripes" clip-path="url(#mfzy-logo__body-clip)">
<rect fill="#E62" x="16" width="120" height="138"/>
<path fill="#C25" d="M96 24L16 72V0h80v24z"/>
<path fill="#EA0" d="M116 70L16 130v-26l95-57 5 23z"/>
<path fill="#19F" d="M136 138H16v-8l120-72v80z"/>
</g>
<path class="mfzy-logo__cut-ins" stroke="#333" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" d="M 72 20.4 c 23 0 44 29 44 56
M 54 103.4 a 16 16 0 0 0 0 -10
M 96 98 c -2 2 -8 6 -8.5,6 l -8.4 25.1"/>
<g transform="translate(53 57) rotate(-31)">
<ellipse class="mfzy-logo__snout" cx="25" cy="21" rx="14" ry="9" fill="#FFF"/>
<use class="mfzy-logo__feature" xlink:href="#mfzy-logo__eye" fill="#333"/>
<use class="mfzy-logo__feature" xlink:href="#mfzy-logo__eye" fill="#333" transform="translate(29 0)"/>
<path class="mfzy-logo__feature" d="M 28.6 14 a 3 3 0 0 1 1.3 5.6 l -2.6 1.2 a 3 3 0 0 1 -2.6 0
l -2.6 -1.2 a 3 3 0 0 1 1.3 -5.6 Z" fill="#333"/>
</g>
</svg>
<svg class="mfzy-wordmark" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 280 80" fill="none" stroke="#333" width="140" height="40">
<g transform="skewX(-18)">
<path stroke-width="8" d="M38 20h6c4 0 7 2 9 6l9 18l12-24h2v22
a20 22 0 0 0 20 22M48 22v28a12 15 0 0 1-24 0M98 44a6 6 0 0 0 0-12h-2
a8 10 0 0 0 0 20h14a8 10 0 0 0 8-10M118 12v30a8 10 0 0 0 16 0M150 36
q-4-4-8-4a8 10 0 1 0 8 10m0-14v14a8 10 0 0 0 8 10M184 20a9 9 0 0 0-18 0
v34a8 10 0 0 1-8 10M158 32h24v24M190 32h18l-12 20h18M216 32h18l-12 20h18
a8 10 0 0 0 8-10m0-14v14a8 10 0 0 0 16 0m0-14v38a6 6 0 0 1-12 0
c0-12 32-8 32-32c0-10-6-16-15-16M108 24h24a6 6 0 0 0 6-6M102 38h-4"/>
<g stroke-width="6">
<circle cx="38" cy="22" r="3"/>
<circle cx="182" cy="20" r="3"/>
<circle cx="269" cy="20" r="3"/>
</g>
</g>
</svg>
</a>
</div>
</div>
</footer>
<!-- Looking for isotope.js? Use https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js -->
<!-- Isotope does NOT require jQuery. But it does make things easier -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/isotope-docs.min.js?6"></script>
<!-- Google Analytics - Remove this if you copy/pasted this page -->
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-58739927-3','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>