You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>Metafizzy's libraries have hundreds of CodePen demos. One for every feature, option, and behavior. But these demos are simplified examples. They don't do a good job of showing off what they're capable of. So I reached out to the true code artists of CodePen to see how they could make Isotope, Flickity, and Packery shine in the spotlight. Give 'em the old razzle-dazzle.</p>
45
-
<p>I'll be collecting these in the <ahref="http://codepen.io/collection/AVjkpG/">Metafizzy showcase CodePen collection</a>, as well as individual collections for each library.</p>
45
+
<p>I'll be collecting these in the <ahref="https://codepen.io/collection/AVjkpG/">Metafizzy showcase CodePen collection</a>, as well as individual collections for each library.</p>
<p><ahref="http://codepen.io/Kseso">Kseso</a> makes the most of Flickity and CSS, using <code>is-selected</code> classes to trigger transitions for each slide. Within each slide is a great mix of imagery and typography at that!</p>
52
-
<pdata-height="400" data-theme-id="dark" data-slug-hash="oLyqGg" data-default-tab="result" data-user="Kseso" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="http://codepen.io/Kseso/pen/oLyqGg/">Playing with Flickity</a> by Kseso (<ahref="http://codepen.io/Kseso">@Kseso</a>) on <ahref="http://codepen.io">CodePen</a>.</p>
51
+
<p><ahref="https://codepen.io/Kseso">Kseso</a> makes the most of Flickity and CSS, using <code>is-selected</code> classes to trigger transitions for each slide. Within each slide is a great mix of imagery and typography at that!</p>
52
+
<pdata-height="400" data-theme-id="dark" data-slug-hash="oLyqGg" data-default-tab="result" data-user="Kseso" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="https://codepen.io/Kseso/pen/oLyqGg/">Playing with Flickity</a> by Kseso (<ahref="https://codepen.io/Kseso">@Kseso</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
53
53
54
-
<p><ahref="http://codepen.io/jshawl">Jesse Shawl</a> made a slide puzzle with Packery. I can't believe this actually works!</p>
55
-
<pdata-height="400" data-theme-id="dark" data-slug-hash="ZORWxv" data-default-tab="result" data-user="jshawl" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="http://codepen.io/jshawl/pen/ZORWxv/">Order the tiles</a> by Jesse Shawl (<ahref="http://codepen.io/jshawl">@jshawl</a>) on <ahref="http://codepen.io">CodePen</a>.</p>
54
+
<p><ahref="https://codepen.io/jshawl">Jesse Shawl</a> made a slide puzzle with Packery. I can't believe this actually works!</p>
55
+
<pdata-height="400" data-theme-id="dark" data-slug-hash="ZORWxv" data-default-tab="result" data-user="jshawl" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="https://codepen.io/jshawl/pen/ZORWxv/">Order the tiles</a> by Jesse Shawl (<ahref="https://codepen.io/jshawl">@jshawl</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
56
56
57
-
<p><ahref="http://codepen.io/pixelass">Gregor Adams</a> took the Packery concept composed this 3D cube ballet. I love how the cubes align even with staggered animation.</p>
58
-
<pdata-height="400" data-theme-id="dark" data-slug-hash="wWxPqg" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="http://codepen.io/pixelass/pen/wWxPqg/">Pack(ev)ery thing</a> by Gregor Adams (<ahref="http://codepen.io/pixelass">@pixelass</a>) on <ahref="http://codepen.io">CodePen</a>.</p>
57
+
<p><ahref="https://codepen.io/pixelass">Gregor Adams</a> took the Packery concept composed this 3D cube ballet. I love how the cubes align even with staggered animation.</p>
58
+
<pdata-height="400" data-theme-id="dark" data-slug-hash="wWxPqg" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="https://codepen.io/pixelass/pen/wWxPqg/">Pack(ev)ery thing</a> by Gregor Adams (<ahref="https://codepen.io/pixelass">@pixelass</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
59
59
60
60
<p>But he didn't stop there. Gregor made another Packery demo, this time using simpler rectangles. Check out how it works when you resize it.</p>
61
-
<pdata-height="400" data-theme-id="dark" data-slug-hash="zBLrRr" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="http://codepen.io/pixelass/pen/zBLrRr/">Packery hackery</a> by Gregor Adams (<ahref="http://codepen.io/pixelass">@pixelass</a>) on <ahref="http://codepen.io">CodePen</a>.</p>
61
+
<pdata-height="400" data-theme-id="dark" data-slug-hash="zBLrRr" data-default-tab="result" data-user="pixelass" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="https://codepen.io/pixelass/pen/zBLrRr/">Packery hackery</a> by Gregor Adams (<ahref="https://codepen.io/pixelass">@pixelass</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
62
62
63
-
<p>Perhaps the best use of Isotope ever, <ahref="http://codepen.io/acjdesigns">Antoinette Janus</a> makes sense of many characters and fusions in Steven Universe. I have a hard time remembering the difference between Sugilite and Sardonyx ;)</p>
64
-
<pdata-height="400" data-theme-id="dark" data-slug-hash="GqXgAE" data-default-tab="result" data-user="acjdesigns" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="http://codepen.io/acjdesigns/pen/GqXgAE/">Steven Universe x Isotope [Sponsored]</a> by Antoinette Janus (<ahref="http://codepen.io/acjdesigns">@acjdesigns</a>) on <ahref="http://codepen.io">CodePen</a>.</p>
63
+
<p>Perhaps the best use of Isotope ever, <ahref="https://codepen.io/acjdesigns">Antoinette Janus</a> makes sense of many characters and fusions in Steven Universe. I have a hard time remembering the difference between Sugilite and Sardonyx ;)</p>
64
+
<pdata-height="400" data-theme-id="dark" data-slug-hash="GqXgAE" data-default-tab="result" data-user="acjdesigns" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="https://codepen.io/acjdesigns/pen/GqXgAE/">Steven Universe x Isotope [Sponsored]</a> by Antoinette Janus (<ahref="https://codepen.io/acjdesigns">@acjdesigns</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
65
65
66
-
<p><ahref="http://codepen.io/bennettfeely">Bennett Feely</a> makes a 3D, hovering Packery layout. It's melting my mind how this works.</p>
67
-
<pdata-height="400" data-theme-id="dark" data-slug-hash="JKBJbx" data-default-tab="result" data-user="bennettfeely" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="http://codepen.io/bennettfeely/pen/JKBJbx/">Packery layout with 3D blocks</a> by Bennett Feely (<ahref="http://codepen.io/bennettfeely">@bennettfeely</a>) on <ahref="http://codepen.io">CodePen</a>.</p>
66
+
<p><ahref="https://codepen.io/bennettfeely">Bennett Feely</a> makes a 3D, hovering Packery layout. It's melting my mind how this works.</p>
67
+
<pdata-height="400" data-theme-id="dark" data-slug-hash="JKBJbx" data-default-tab="result" data-user="bennettfeely" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="https://codepen.io/bennettfeely/pen/JKBJbx/">Packery layout with 3D blocks</a> by Bennett Feely (<ahref="https://codepen.io/bennettfeely">@bennettfeely</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
68
68
69
-
<p><ahref="http://codepen.io/katydecorah">Katy DeCorah</a> brings her ever-impressive style to make this captivating grid animation using Packery. This one is fun to resize.</p>
70
-
<pdata-height="400" data-theme-id="dark" data-slug-hash="qNygjp" data-default-tab="result" data-user="katydecorah" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="http://codepen.io/katydecorah/pen/qNygjp/">Geo scope</a> by Katy DeCorah (<ahref="http://codepen.io/katydecorah">@katydecorah</a>) on <ahref="http://codepen.io">CodePen</a>.</p>
69
+
<p><ahref="https://codepen.io/katydecorah">Katy DeCorah</a> brings her ever-impressive style to make this captivating grid animation using Packery. This one is fun to resize.</p>
70
+
<pdata-height="400" data-theme-id="dark" data-slug-hash="qNygjp" data-default-tab="result" data-user="katydecorah" data-embed-version="2" data-preview="true" class="codepen">See the Pen <ahref="https://codepen.io/katydecorah/pen/qNygjp/">Geo scope</a> by Katy DeCorah (<ahref="https://codepen.io/katydecorah">@katydecorah</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
71
71
72
72
<p>It's a delight to see what creative coders can come up with.</p>
73
73
<p>We have some more artists lined up so stay tuned for Round 2!</p>
Copy file name to clipboardExpand all lines: sandbox/page/5.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -28,7 +28,7 @@ <h1 class="post-header__title">Flickity takes The Field</h1>
28
28
</a>
29
29
<divclass="post__content">
30
30
<p><ahref="http://www.thefieldmag.com/"><em>The Field</em></a> is a new outdoor lifestyle publication, or as founder Chris Stillitano puts it, "<em>The Field</em> is a place for good design and the great outdoors." It's also a great place to see Flickity in use.</p>
31
-
<p><em>The Field</em>'s beautiful photo galleries are made with <ahref="http://flickity.metafizzy.co/">Flickity</a>. It's great to see how they've taken advantage of Flickity's <ahref="http://flickity.metafizzy.co/style.html#previous-next-buttons">customizable previous & buttons</a> to minimally style and position them. The slide counters change <ahref="http://flickity.metafizzy.co/api.html#cellselect">on <code>cellSelect</code></a>.</p>
31
+
<p><em>The Field</em>'s beautiful photo galleries are made with <ahref="https://flickity.metafizzy.co/">Flickity</a>. It's great to see how they've taken advantage of Flickity's <ahref="https://flickity.metafizzy.co/style.html#previous-next-buttons">customizable previous & buttons</a> to minimally style and position them. The slide counters change <ahref="https://flickity.metafizzy.co/api.html#cellselect">on <code>cellSelect</code></a>.</p>
<p>You can now bind to jQuery events in <ahref="http://isotope.metafizzy.co/">Isotope</a>, <ahref="http://packery.metafizzy.co/">Packery</a>, and <ahref="http://desandro.masonry.com">Masonry</a>. The recent upgrades allow you to use standard jQuery event methods <code>.on()</code>, <code>.off</code>, and <code>.one()</code>, rather than using ugly plugin method syntax.</p>
31
+
<p>You can now bind to jQuery events in <ahref="https://isotope.metafizzy.co/">Isotope</a>, <ahref="https://packery.metafizzy.co/">Packery</a>, and <ahref="http://desandro.masonry.com">Masonry</a>. The recent upgrades allow you to use standard jQuery event methods <code>.on()</code>, <code>.off</code>, and <code>.one()</code>, rather than using ugly plugin method syntax.</p>
<p><ahref="http://codepen.io/desandro/pen/scajv">View Isotope layoutComplete demo on CodePen</a>.</p>
41
-
<p>This feature is already in <ahref="http://flickity.metafizzy.co/">Flickity</a> and <ahref="http://draggabilly.desandro.com/">Draggabilly</a>. It was prime time to port it over to the layout libraries.</p>
40
+
<p><ahref="https://codepen.io/desandro/pen/scajv">View Isotope layoutComplete demo on CodePen</a>.</p>
41
+
<p>This feature is already in <ahref="https://flickity.metafizzy.co/">Flickity</a> and <ahref="http://draggabilly.desandro.com/">Draggabilly</a>. It was prime time to port it over to the layout libraries.</p>
0 commit comments