Put home page demo items inside aspect boxes.

_config.yml

@@ -91,20 +91,20 @@ items:
     title: Baseball
     img: baseball.png
     original: baseball.jpg
-    cols: 3
+    cols: [ 3, 4, 3 ]
   - groups: [ wallpaper, 3d ]
     date: 2011-08-14
     title: Tennis
     img: tennis-ball.png
     original: tennis-ball.jpg
-    description: longDescription
+    extras: [ overlay ]
-    cols: 6
+    cols: [3, 8, 6]
   - groups: [ wallpaper, 3d ]
     date: 2009-05-27
     title: iMac
     img: imac.png
     original: imac.jpg
-    cols: 3
+    cols: [ 3, 4, 3 ]
   - groups: [ graphics ]
     date: 2012-05-14
     title: Master Chief
@@ -112,27 +112,27 @@ items:
     original: Master_Chief_Portrait_by_Eightfold_Studios.jpg
     description: longDescription
     extras: [ h2 ]
-    cols: 3
+    cols: [ 6, 4, 3 ]
   - groups: [ wallpaper, 3d ]
     date: 2009-09-14
     title: Eightfold
     img: es-blue.png
     original: es-blue.jpg
-    cols: 3
+    cols: [ 3, 4, 3 ]
   - groups: [ photography ]
     date: 2012-03-14
     title: Pumpkin
     img: pumpkin.png
     original: pumpkin.jpg
-    description: longDescription
+    extras: [ overlay ]
-    cols: 6
+    cols: [3, 8, 6]
   - groups: [ wallpaper, 3d ]
     date: 2013-05-19
     title: Vestride
     img: vestride-red.png
     original: vestride-red.jpg
     extras: [ h2 ]
-    cols: 6
+    cols: [3, 8, 6]
   - groups: [ graphics ]
     date: 2013-02-01
     title: Newegg
@@ -140,29 +140,29 @@ items:
     original: newegg.jpg
     description: longDescription
     extras: [ h2 ]
-    cols: 3
+    cols: [ 6, 4, 3 ]
   - groups: [ wallpaper ]
     date: 2000-01-01
     title: Arc
     img: eightfoldarc.png
     original: eightfoldarc.jpg
-    cols: 3
+    cols: [ 3, 4, 3 ]
   - groups: [ photography ]
     date: 2012-07-04
     title: Ground
     img: ground.png
     original: ground!.jpg
-    cols: 3
+    cols: [ 3, 4, 3 ]
   - groups: [ wallpaper ]
     date: 2011-08-12
     title: Grass
     img: grassy-hills.png
     original: grassy-hills.tif
-    description: longDescription
+    extras: [ overlay ]
-    cols: 6
+    cols: [3, 8, 6]
   - groups: [ wallpaper, 3d ]
     date: 2013-05-19
     title: Vestride
     img: vestride-classy.png
     original: vestride-classy.jpg
-    cols: 3
+    cols: [ 3, 4, 3 ]

_includes/picture-item.html

@@ -5,15 +5,18 @@
 {% else %}
   {% assign extras = "" %}
 {% endif %}
-{% if item.cols %}{% assign cols = item.cols %}{% else %}{% assign cols = 3 %}{% endif %}
 {% assign description = item.description %}
-<figure class="col-{{ cols }}@sm col-3@xs picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
+<figure class="col-{{ item.cols[0] }}@xs col-{{ item.cols[1] }}@sm col-{{ item.cols[2] }}@md picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
   <div class="picture-item__inner">
-    <img src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
+    <div class="aspect aspect--16x9">
+      <div class="aspect__inner">
+        <img src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
+        <img class="picture-item__blur" src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
+      </div>
+    </div>
     <div class="picture-item__details clearfix">
-      <img class="picture-item__blur" src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
       <figcaption class="picture-item__title pull-left"><a href="{{ site.baseurl }}/img/originals/{{ item.original }}" target="_blank">{{ item.title }}</a></figcaption>
-      <p class="picture-item__tags pull-right">{{ item.groups | join: ', ' }}</p>
+      <p class="picture-item__tags pull-right hidden@xs">{{ item.groups | join: ', ' }}</p>
     </div>
     {% if description %}{% if description == 'longDescription' %}{% assign description = site.longDescription %}{% endif %}<p class="picture-item__description">{{ description }}</p>{% endif %}
   </div>

_posts/2013-05-01-basic.html

@@ -19,7 +19,7 @@ extraJS: [ "demos/homepage.js" ]
         {% assign item = item %}
         {% include picture-item.html %}
     {% endfor %}
-    <div class="col-3@sm col-3@xs shuffle__sizer"></div>
+    <div class="col-1@sm col-1@xs shuffle__sizer"></div>
   </div>
 </div>
 

_posts/2013-06-29-image-problems.html

@@ -41,12 +41,4 @@ extraJS: [ "demos/images.js"]
   </div>
 </div>
 
-<section>
-  <div class="container">
-    <h2>Shuffle.js</h2>
-    <p>{{ site.longDescription }}</p>
-  </div>
-</section>
-
-
 {% include credit-jake.html %}

_posts/2013-08-25-animated.html

@@ -27,7 +27,7 @@ extraJS: [ "viewport.js", "demos/animate-in.js" ]
         {% assign item = item %}
         {% include picture-item.html %}
     {% endfor %}
-    <div class="col-3@sm col-3@xs shuffle__sizer"></div>
+    <div class="col-1@sm col-1@xs shuffle__sizer"></div>
   </div>
 </div>
 

_scss/_grid.scss

@@ -64,6 +64,11 @@
   }
 }
 
+@include breakpoint(md) {
+
+  @include make-grid(md);
+}
+
 @media screen and (min-width: $viewport-at-max-grid-width) {
 
   .#{$grid-container} {

_scss/_helpers.scss

@@ -4,6 +4,10 @@
   display: inline-block;
 }
 
+@include breakpoint(sm, true) {
+  .hidden\@xs { display: none; }
+}
+
 // Hide from both screenreaders and browsers.
 .hidden {
   display: none !important;

_scss/shuffle-styles.scss

@@ -10,24 +10,61 @@ $itemHeight: 220px;
 .picture-item {
   height: 220px;
   margin-top: $pictureGutter;
+  margin-left: 0; /* shuffle items shouldn't have a left margin*/
 
-  &.shuffle-item {
+  img {
-    margin-left: 0; /* shuffle items shouldn't have a left margin*/
+    display: block;
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    object-fit: cover;
   }
 
-  &.picture-item--h2 {
+  .no-objectfit & img {
-    height: ($itemHeight * 2) + $pictureGutter; /* 2x the height + 1 gutter */
+    height: auto;
+    max-width: 100%;
   }
+}
 
-  // Ehh, i should really use something other than col-6@sm to target this...
+.picture-item--h2 {
-  &.col-6\@sm:not(.picture-item--h2) {
+  height: ($itemHeight * 2) + $pictureGutter; /* 2x the height + 1 gutter */
+}
+
+.picture-item__inner {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: $clouds;
+}
+
+.picture-item__blur {
+  display: none;
+}
+
+.picture-item__details,
+.picture-item__description {
+  padding: 1em;
+  width: 100%;
+}
+.picture-item__description {
+  margin: 0;
+  padding-top: 0;
+  padding-right: 2em;
+}
+
+.picture-item__tags {
+  margin: 0;
+}
+
+@include breakpoint(sm) {
+
+  .picture-item--overlay {
 
     .picture-item__details {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
-      background-color: #333;
       background-color: rgba(black, .6);
       color: white;
       overflow: hidden;
@@ -38,60 +75,29 @@ $itemHeight: 220px;
     }
   }
 
-  .picture-item__inner {
+  @supports (filter: blur(1px)) {
-    position: relative;
+
-    height: 100%;
+    .picture-item--overlay {
-    overflow: hidden;
+
-    background: $clouds;
+      .picture-item__blur {
-  }
+        position: absolute;
-
+        z-index: 1;
-  img {
+        top: 0;
-    display: block;
+        left: 0;
-    width: 100%;
+        display: block;
-    height: auto;
+        filter: blur(7px);
-  }
+        clip-path: inset(#{$itemHeight - 50px} 0 0 0);
-
+      }
-  .picture-item__blur {
+
-    display: none;
+      .picture-item__details {
-  }
+        background: none;
-
+      }
-  .picture-item__details,
+
-  .picture-item__description {
+      .picture-item__tags,
-    padding: 1em;
+      .picture-item__title {
-  }
+        position: relative;
-  .picture-item__description {
+        z-index: 2;
-    margin: 0;
+      }
-    padding-top: 0;
-    padding-right: 2em;
-  }
-
-  .picture-item__tags {
-    margin: 0;
-  }
-}
-
-// Autoprefixer misses a parenthesis.
-@supports (filter: blur(1px)) {
-
-  .picture-item.col-6\@sm:not(.picture-item--h2) {
-
-    .picture-item__blur {
-      position: absolute;
-      z-index: 1;
-      top: calc(50px - #{$itemHeight}); // Caption is 50px tall.
-      left: 0;
-      display: block;
-      filter: blur(7px);
-    }
-
-    .picture-item__details {
-      background: none;
-    }
-
-    .picture-item__tags,
-    .picture-item__title {
-      position: relative;
-      z-index: 2;
     }
   }
 }

css/shuffle-styles.css

@@ -2,60 +2,74 @@
 \*=============================================*/
 .picture-item {
   height: 220px;
-  margin-top: 24px; }
+  margin-top: 24px;
-  .picture-item.shuffle-item {
+  margin-left: 0;
-    margin-left: 0;
+  /* shuffle items shouldn't have a left margin*/ }
-    /* shuffle items shouldn't have a left margin*/ }
+  .picture-item img {
-  .picture-item.picture-item--h2 {
+    display: block;
-    height: 464px;
+    width: 100%;
-    /* 2x the height + 1 gutter */ }
+    max-width: none;
-  .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__details {
+    height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover; }
+  .no-objectfit .picture-item img {
+    height: auto;
+    max-width: 100%; }
+
+.picture-item--h2 {
+  height: 464px;
+  /* 2x the height + 1 gutter */ }
+
+.picture-item__inner {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: #ECF0F1; }
+
+.picture-item__blur {
+  display: none; }
+
+.picture-item__details,
+.picture-item__description {
+  padding: 1em;
+  width: 100%; }
+
+.picture-item__description {
+  margin: 0;
+  padding-top: 0;
+  padding-right: 2em; }
+
+.picture-item__tags {
+  margin: 0; }
+
+@media screen and (min-width: 768px) {
+  .picture-item--overlay .picture-item__details {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
-    background-color: #333;
     background-color: rgba(0, 0, 0, 0.6);
     color: white;
     overflow: hidden; }
-  .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__description {
+  .picture-item--overlay .picture-item__description {
     display: none; }
-  .picture-item .picture-item__inner {
+  @supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) {
-    position: relative;
+    .picture-item--overlay .picture-item__blur {
-    height: 100%;
+      position: absolute;
-    overflow: hidden;
+      z-index: 1;
-    background: #ECF0F1; }
+      top: 0;
-  .picture-item img {
+      left: 0;
-    display: block;
+      display: block;
-    width: 100%;
+      -webkit-filter: blur(7px);
-    height: auto; }
+              filter: blur(7px);
-  .picture-item .picture-item__blur {
+      -webkit-clip-path: inset(170px 0 0 0);
-    display: none; }
+              clip-path: inset(170px 0 0 0); }
-  .picture-item .picture-item__details,
+    .picture-item--overlay .picture-item__details {
-  .picture-item .picture-item__description {
+      background: none; }
-    padding: 1em; }
+    .picture-item--overlay .picture-item__tags,
-  .picture-item .picture-item__description {
+    .picture-item--overlay .picture-item__title {
-    margin: 0;
+      position: relative;
-    padding-top: 0;
+      z-index: 2; } } }
-    padding-right: 2em; }
-  .picture-item .picture-item__tags {
-    margin: 0; }
-
-@supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) {
-  .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__blur {
-    position: absolute;
-    z-index: 1;
-    top: calc(50px - 220px);
-    left: 0;
-    display: block;
-    -webkit-filter: blur(7px);
-            filter: blur(7px); }
-  .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__details {
-    background: none; }
-  .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__tags,
-  .picture-item.col-6\@sm:not(.picture-item--h2) .picture-item__title {
-    position: relative;
-    z-index: 2; } }
 
 /*
   Shuffle needs either relative or absolute positioning on the container

css/style.css

@@ -855,6 +855,138 @@ h3:hover > a {
   .row {
     max-width: 1200px; } }
 
+@media screen and (min-width: 1024px) {
+  .col-1\@md, .col-2\@md, .col-3\@md, .col-4\@md, .col-5\@md, .col-6\@md, .col-7\@md, .col-8\@md, .col-9\@md, .col-10\@md, .col-11\@md, .col-12\@md {
+    float: left; }
+  .aspect--16x9\@md {
+    padding-bottom: 56.25%; }
+  .aspect--9x16\@md {
+    padding-bottom: 177.77778%; }
+  .aspect--4x3\@md {
+    padding-bottom: 75%; }
+  .aspect--3x4\@md {
+    padding-bottom: 133.33333%; }
+  .aspect--3x2\@md {
+    padding-bottom: 66.66667%; }
+  .aspect--3x1\@md {
+    padding-bottom: 33.33333%; }
+  .aspect--2x3\@md {
+    padding-bottom: 150%; }
+  .aspect--2x1\@md {
+    padding-bottom: 50%; }
+  .aspect--1x2\@md {
+    padding-bottom: 200%; }
+  .aspect--1x1\@md {
+    padding-bottom: 100%; }
+  .aspect--none\@md {
+    height: auto;
+    padding-bottom: 0;
+    overflow: visible; }
+    .aspect--none\@md > .aspect__inner {
+      position: static; }
+  .col-1\@md {
+    width: 8.33333%; }
+  .col-2\@md {
+    width: 16.66667%; }
+  .col-3\@md {
+    width: 25%; }
+  .col-4\@md {
+    width: 33.33333%; }
+  .col-5\@md {
+    width: 41.66667%; }
+  .col-6\@md {
+    width: 50%; }
+  .col-7\@md {
+    width: 58.33333%; }
+  .col-8\@md {
+    width: 66.66667%; }
+  .col-9\@md {
+    width: 75%; }
+  .col-10\@md {
+    width: 83.33333%; }
+  .col-11\@md {
+    width: 91.66667%; }
+  .col-12\@md {
+    width: 100%; }
+  .col-pull-0\@md {
+    right: auto; }
+  .col-pull-1\@md {
+    right: 8.33333%; }
+  .col-pull-2\@md {
+    right: 16.66667%; }
+  .col-pull-3\@md {
+    right: 25%; }
+  .col-pull-4\@md {
+    right: 33.33333%; }
+  .col-pull-5\@md {
+    right: 41.66667%; }
+  .col-pull-6\@md {
+    right: 50%; }
+  .col-pull-7\@md {
+    right: 58.33333%; }
+  .col-pull-8\@md {
+    right: 66.66667%; }
+  .col-pull-9\@md {
+    right: 75%; }
+  .col-pull-10\@md {
+    right: 83.33333%; }
+  .col-pull-11\@md {
+    right: 91.66667%; }
+  .col-pull-12\@md {
+    right: 100%; }
+  .col-push-0\@md {
+    left: auto; }
+  .col-push-1\@md {
+    left: 8.33333%; }
+  .col-push-2\@md {
+    left: 16.66667%; }
+  .col-push-3\@md {
+    left: 25%; }
+  .col-push-4\@md {
+    left: 33.33333%; }
+  .col-push-5\@md {
+    left: 41.66667%; }
+  .col-push-6\@md {
+    left: 50%; }
+  .col-push-7\@md {
+    left: 58.33333%; }
+  .col-push-8\@md {
+    left: 66.66667%; }
+  .col-push-9\@md {
+    left: 75%; }
+  .col-push-10\@md {
+    left: 83.33333%; }
+  .col-push-11\@md {
+    left: 91.66667%; }
+  .col-push-12\@md {
+    left: 100%; }
+  .col-offset-0\@md {
+    margin-left: 0%; }
+  .col-offset-1\@md {
+    margin-left: 8.33333%; }
+  .col-offset-2\@md {
+    margin-left: 16.66667%; }
+  .col-offset-3\@md {
+    margin-left: 25%; }
+  .col-offset-4\@md {
+    margin-left: 33.33333%; }
+  .col-offset-5\@md {
+    margin-left: 41.66667%; }
+  .col-offset-6\@md {
+    margin-left: 50%; }
+  .col-offset-7\@md {
+    margin-left: 58.33333%; }
+  .col-offset-8\@md {
+    margin-left: 66.66667%; }
+  .col-offset-9\@md {
+    margin-left: 75%; }
+  .col-offset-10\@md {
+    margin-left: 83.33333%; }
+  .col-offset-11\@md {
+    margin-left: 91.66667%; }
+  .col-offset-12\@md {
+    margin-left: 100%; } }
+
 .code-block {
   position: relative;
   overflow: visible;
@@ -1178,6 +1310,10 @@ button {
 .ib {
   display: inline-block; }
 
+@media screen and (max-width: 767px) {
+  .hidden\@xs {
+    display: none; } }
+
 .hidden {
   display: none !important;
   visibility: hidden; }

dist/shuffle.js

@@ -1831,13 +1831,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	});
 	exports.default = getNumber;
 	function getNumber(value) {
-	  var str = value && value.toString();
+	  return parseFloat(value) || 0;
-	  var val = parseFloat(str);
-	  if (val + 1 >= 0) {
-	    return val;
-	  }
-	
-	  return 0;
 	}
 
 /***/ },

index.html

@@ -75,7 +75,7 @@ prism: true
           {% assign item = item %}
           {% include picture-item.html %}
       {% endfor %}
-      <div class="col-3@sm col-3@xs shuffle__sizer"></div>
+      <div class="col-1@sm col-1@xs shuffle__sizer"></div>
     </div>
   </div>
 </section>

js/demos/animate-in.js

@@ -53,24 +53,6 @@ Demo.prototype.addTransitionToItems = function () {
   }
 };
 
-/**
- * Re-layout shuffle when images load. This is only needed below 768 pixels
- * because the .picture-item height is auto and therefore the height of the
- * picture-item is dependent on the image. I recommend using imagesloaded by
- * desandro to determine when all your images have loaded.
- */
-Demo.prototype.listenForImageLoads = function () {
-  var imgs = this.element.querySelectorAll('img');
-  var handler = function () {
-    this.shuffle.update();
-    Viewport.refresh();
-  }.bind(this);
-
-  for (var i = imgs.length - 1; i >= 0; i--) {
-    imgs[i].addEventListener('load', handler, false);
-  }
-};
-
 document.addEventListener('DOMContentLoaded', function () {
   window.demo = new Demo();
 });

js/demos/homepage.js

@@ -18,7 +18,6 @@ var Demo = function (element) {
   this.addFilterButtons();
   this.addSorting();
   this.addSearchFilter();
-  this.listenForImageLoads();
 
   this.mode = 'exclusive';
 };
@@ -179,23 +178,6 @@ Demo.prototype._handleSearchKeyup = function (evt) {
   });
 };
 
-/**
- * Re-layout shuffle when images load. This is only needed below 768 pixels
- * because the .picture-item height is auto and therefore the height of the
- * picture-item is dependent on the image. I recommend using imagesloaded by
- * desandro to determine when all your images have loaded.
- */
-Demo.prototype.listenForImageLoads = function () {
-  var imgs = this.element.querySelectorAll('img');
-  var handler = function () {
-    this.shuffle.update();
-  }.bind(this);
-
-  for (var i = imgs.length - 1; i >= 0; i--) {
-    imgs[i].addEventListener('load', handler, false);
-  }
-};
-
 document.addEventListener('DOMContentLoaded', function () {
   window.demo = new Demo(document.getElementById('grid'));
 });

js/demos/images-broken.js

@@ -1,22 +0,0 @@
-
-var ImageDemo = (function( $ ) {
-
-  var $shuffle = $('.shuffle--images'),
-      sizer = document.getElementById('js-sizer'),
-
-  init = function() {
-
-    $shuffle.shuffle({
-      sizer: sizer,
-      itemSelector: '.js-item'
-    });
-  };
-
-  return {
-    init: init
-  };
-}( jQuery ));
-
-$(document).ready(function() {
-  ImageDemo.init();
-});

js/page.js

@@ -85,6 +85,18 @@ Modules.NavTray = (function () {
   return NavTray;
 }());
 
+Modules.Support = (function () {
+  var objectFit = document.createElement('div').style.objectFit === '';
+
+  if (!objectFit) {
+    document.documentElement.classList.add('no-objectfit');
+  }
+
+  return {
+    objectFit: objectFit,
+  };
+});
+
 Modules.Sprite = (function () {
   var Sprite = function (context, img, size) {
     this.ctx = context;

package.json

@@ -17,6 +17,9 @@
   ],
   "main": "dist/shuffle.js",
   "scripts": {
+    "compile": "gulp scripts",
+    "css": "gulp css",
+    "watch": "gulp watch",
     "test": "jest"
   },
   "jest": {

src/get-number.js

@@ -6,11 +6,5 @@
  * @return {number} `value` or zero if `value` isn't numeric.
  */
 export default function getNumber(value) {
-  let str = value && value.toString();
+  return parseFloat(value) || 0;
-  let val = parseFloat(str);
-  if (val + 1 >= 0) {
-    return val;
-  }
-
-  return 0;
 }