Isotope.js is available from the website and various other locations. Learn how to get the right option for you in this video tutorial.
- [Instructor] It goes without saying that to use Isotope, we first have to add it into our project, and you get get Isotope and all the information about Isotope from isotope.metafizzy.co. You'll notice I'll keep returning to this site throughout the rest of the course to reference documentation about different functions and features we'll be using. You can either download Isotope directly from this site, or get it from GitHub, or if you are using a package manager, you can install it directly from the command line. And all that information is available directly from the front page if you go to the install link down here in the left-hand corner.
Here you see Isotope comes in two flavors directly from the website. You get an un-minified version and a minified version. I'm going to use the minified version because it's minifed and I'm not going to change Isotope itself. If you don't want to download a copy of Isotope for yourself, but instead want to use a CDN, there are CDNs available for both the un-minified and minified versions. And like I said, if you use a package manager, you have commands for both npm and Bower as examples right here on the page. Now before you download Isotope, this is really important.
Scroll a little further down, and read the License information. You see, Isotope is released under an MIT license, meaning it's open source, but if you're using it for commercial purposes, you have to pay a licensing fee. So if you or anyone else is earning money from the site that's built using Isotope, you need to buy a license. And the license you buy depends on the type of team you're working in, and how many people are going to be working with Isotope. So if you're just one person, you can buy the Developer license. If you are a team up to eight developers, you buy a Team license, and if you have an unlimited number of developers or a lot of people working on the project, get an Organization license.
By doing this, you are funding the project and furthering the development of Isotope and all the other things that work with Isotope. That said, if you're just following this course to learn how to use Isotope, you don't have to buy a license. Buy the license when you're actually working on a project that's earning money for you, or for someone else. Alright, time to download Isotope and get it into my project. I want to place the file in my project, so I have it, even if I don't have access through the internet, so I'll download isotope.pkgd.min.js by right-clicking, Save Link As, and placing it in my projects.
So I'll go to Desktop, exercise files, 02_02, and here I'll create a new folder called JS. And because this is a library that I'm not going to touch, I'll create another folder inside the JS folder called libs. Save the file, and while I'm at it, because I'll be using jQuery in my examples, I'm also going to grab jQuery. So I'll go to jquery.com, download jQuery. Again here we have the option of compressed or uncompressed, so I'm going to right-click on compressed, Save Link As, and just place it inside the same JS libs folder.
And once both libraries are downloaded and placed into my project, I need to call them into the page itself. So if we continue scrolling down a bit on the Isotope front page, you'll see here under Getting started, there's a code example to get you started. So I'll just grab this here, which is a script tag that calls in Isotope, then open Atom to the current folder, 02_02. Here you see we have the JS folder with libs and both Isotope and jQuery. From here I'll go to index.html, scroll all the way to the bottom, find the end body tag, and place the example code right above it, and then I just need to change the path so that it matches with the path inside my project.
So I'll make this a relative path, JS/libs, and I also need to call in jQuery, so I'll do it manually this time, script src = js/libs/jquery-3.1.1.min.js, and an end script tag. Once this is saved, I have to make sure that the files actually get called into the browser. So I'll open index.html in any browser, right-click to inspect, then go to Network and reload the page, so that I can see what's actually being downloaded by the browser.
And here on the bottom you'll see jquery-3.1.1.min, and isotope.pkgd.min.js. That means that both files are currently running in my browser, and I can start using the functionality in Isotope via jQuery.
- What is Isotope.js?
- Installing Isotope and jQuery
- Configuring layout modes
- Setting parameters
- Making layouts responsive
- Filtering and sorting
- Creating URL hashes
- Filtering and sorting with hashes
- Filtering and sorting in WordPress