Working with Isotope was a joy.

For the newly-designed Portfolio page I used Isotope and the layout mode Masonry to achieve the beautiful and usable animated sorting tiles. Masonry also has a “centered” function that you can use to make sure your columns and their container stay centered.

portfolio-tiles

The new Clique site is built on a customized implementation of WordPress. Our portfolio items are set up as a custom post type. From there I used a custom taxonomy to create checkboxes for each of our portfolio items. These checkboxes will act as classes for each portfolio item and as the filtering links or “tags”.

As you may know if you are familiar with Isotope, clicking a filter link will filter up only the items that have that class and remove others that do not. What it doesn’t do out of the box is let you filter by multiple filter links. Every time you click a filter link it will replace the filter class to the new one selected.


$container.isotope({ filter: ‘.your-class’ });

 

Filtering by the filter link selected.

We wanted the ability to filter by multiple filter links so we wrote our code to accept a string that either has a class added or removed depending on whether you are turning it on or off.

 

First we need to set our variables.


var added;

var tagClass = jQuery(this).prop('class');

var pushTag = ('.'+tagClass);

 

Here we ask whether it is already added or not.


if (jQuery.inArray(pushTag, filterTags) == -1) {

  added = false;

} else {

  added = true;

}

 

If it is not added then we go ahead and turn on the filter link, push the new tag to the array and finally convert that to a string.


if(!added) {

  jQuery(pushTag).parent().addClass('active');

  filterTags.push(pushTag);

  filterString = filterTags.join(',');

}

 

If it is already added we turn off that filter link, remove that tag from the array and convert to string.


if(added) {

  jQuery(pushTag).parent().removeClass('active');

  filterTags = jQuery.grep(filterTags, function(value) {

    return value != pushTag;

  });

  filterString = filterTags.join(',');

}

 

Finally we filter by the string filterString.


$container.isotope({ filter: filterString });

filtering-tiles

The tiles are resorting themselves to show only tiles that are tagged with “case study”.

 

The problem we ran into with filtering by “all”

We also changed the “all” filtering, which every item would have, to a refresh link, that would essentially clear the sorting array and send everything back to its starting position. The reason for this is since we changed the filtering to accept multiple filter tags, clicking on “all” would essentially just add the filter tag “all” to the already filled up list of filter tags in our array. That obviously was not going to give us the result we were looking for, so the work around was to change “all” to “refresh” and clear out that array.

 

Refreshing the filter array and setting all filter links back to off.


if ( jQuery(this).hasClass('refresh') ) {

  jQuery('.portfolio-tags li').removeClass('active');

  $container.isotope({ filter: '*' });

} else {

 

Below is the full block of code used by our portfolio page for filtering.


var filterTags = [];

var filterString = '';

var $container = jQuery('#container').isotope();

jQuery('.portfolio-tags li:first').addClass('on');

jQuery('.portfolio-tags li a').on('click', function(){

  if ( jQuery(this).hasClass('refresh') ) {

    jQuery('.portfolio-tags li').removeClass('active');

    $container.isotope({ filter: '*' });

  } else {

    var added;

    var tagClass = jQuery(this).prop('class');

    var pushTag = ('.'+tagClass);

    if (jQuery.inArray(pushTag, filterTags) == -1) {

      added = false;

    } else {

      added = true;

    }

    if(!added) {

      jQuery(pushTag).parent().addClass('active');

      filterTags.push(pushTag);

      filterString = filterTags.join(',');

    }

    if(added) {

      jQuery(pushTag).parent().removeClass('active');

      filterTags = jQuery.grep(filterTags, function(value) {

        return value != pushTag;

      });

      filterString = filterTags.join(',');

    }

    $container.isotope({ filter: filterString });

  }

  return false;

});

 

CSS vs. javascript Sliders

Mobile devices prefer CSS transitions to javascript animations. In fact, javascript animations will stop running when a user is touching the screen. Scrolling through a parallax site or scrolling down a page when that area has a javascript carousel taking up a 100% of the width will usually give you very poor results and may even freeze the site, rendering the user unable to scroll up or down. Usability fail.

The solution is to start using less and less javascript to achieve what we can now do with CSS.

Swiper is a pure css solution to sliders. Vertical, horizontal, nested, vertical inside of horizontal, tabbed, partial display, different widths, active centered, swiper has it all covered right out of the box. It’s very easy to customize to fit your needs. Swiper has a great demo page and documentation to refer to.

That’s the main reason we choose to use Swiper on our site. Not only does it give us the mobile friendly usability, but it takes advantage of hardware accelerated transitions. This is being implemented at the top of our new portfolio page, as well as around the rest of the site.

clique-portfolio

 

 

Hardware Accelerated

Swiper uses the CSS translate3d rule to take advantage of the GPU, whereas translate2d does not, but would achieve the same goal of animating our slides left and right. By taking advantage of the GPU you will notice how much smoother the scrolling will be, sort of like on an iPhone or iPad native app.

 

The CSS rule to achieve hardware accelerated transitions.


-webkit-transform:translate3d(0px,0,0);

Make sure when you are building carousels, or any type of slider these days, you should be taking advantage of hardware accelerated transitions. Ever wonder why your parallax site doesn’t animate as well on a mobile device as it does on a desktop? Most likely because it is not using the CSS transform property and instead using javascript. Reduce your load time and get better, smoother transitions with CSS.

The only negatives I could find were that taking advantage of the GPU could render that part of the site unusable due to the type of GPU you have and its compatibility to the browser. It looks like that is a rare case these days and it of course will work on all modern devices. The other draw back from an end user standpoint is that using the GPU will drain battery life faster. I think it’s worth the trade off for a smooth, usable experience scrolling and swiping through your site.