Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:19Length:2.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Installing and Initializing Isotope

Installing Isotope is really simple. There are three ways of doing it. First, you can download the plugin files directly from the Isotope website. Second, if you want to offload some of the files to reduce the load on your own server, then you can link directly to the Isotope files on CDNJS. These are the file paths you need for the normal and minified version. Third, if you're using package managers, then it's really easy to get these either via Bower or npm. The package names are isotope on bower and isotope-layout on npm. I'll be using Bower for this course. So if you take a look in the source files in each lesson folder, you'll see a folder called bower_components. That's where all the files will be at. Now, in some lessons, I will be linking to some files directly, but I will be showing you that in that particular lesson. Now, if you wanna code this from scratch, then there is a bit more work involved. And you can choose whatever method you want for installing Isotope. But if you're going to be working off of the source files I've provided with this course, then everything is set for you. You don't have to do anything, you don't even need to install Bower, yeah? You have two folders for each lesson, a start and an end. And the idea is you begin with the start folder. Those are your initial files. And you can work on those as you watch the video. And in the end, you can compare what you did with the stuff that is in the end folder. That's one way of doing it and that's actually what I recommend. So this is how you install Isotope, but how do you initialize it? Well, first, let's take a look at the source files I provided. This web page is a demo for a notes app. It's not a real product, I just made it for this course. And we'll be using this page to demonstrate all the features in Isotope. Now you don't have to worry about the CSS because Isotope doesn't come with any kind of CSS. Instead, it works with what you have. So either you're working off the source files I provided, or you have your own CSS. It's gonna work either way. Also I don't want you to worry about the CSS I wrote for the notes demo. It's just demo page. It really has nothing to do with with Isotope. And if there is something important that you should know, then I will point it out in CSS. But mainly we'll just focus on the JavaScript part if you want. Now let's take a look at the HTML. The parent of the entire note collection is a div with a class of notes. Then each note has a class of note and note-color. Initially we'll be using these classes to filter notes based on their color. Additionally, you will find classes like note-double and note-third for extra large notes. Now at the bottom of the page, you will find these references, one for loading jQuery, one for loading Isotope and one for loading our own scripts file called scripts.js. And this is where it will initialize Isotope. Now, just like the installation, initializing Isotope can be done in three ways. The first one is through jQuery. We reference the parent element, we call Isotope, and we pass in some options. In this case, the item selector where we enter the class of each note and then the layout mode, which tells Isotope how to arrange the items. The second method is through vanilla JavaScript and that means you don't need jQuery. The code looks like this. Now, feel free to use whatever method you prefer. However, in this course, I will be using jQuery. And the third method is initializing Isotope through HTML. With HTML, you add the class of js-isotope to the parent element, in this case, notes. Then you set the options in a JSON format using the data-isotope-options attribute. Now, initializing through HTML works just fine. But I really think JavaScript stuff should be kept in a JavaScript file instead of an HTML file. Of course, referencing an JavaScript file is one thing, but writing JavaScript script inside the HTML, especially like this, inline as a data attribute or something, I think I prefer the method where we initialize this kind of plugin in its own separate file. And there you go, that's how you can install and initialize Isotope. Now, let's move on to licensing and also to the initial setup options of Isotope. That's coming up next.

Back to the top