Good evening everyone. Tonight I will be briefly discussing responsive design -- responsive HTML design -- and I will run through an example with a plugin -- a JQuery plugin -- that is called Masonry. It is a plugin that I know now, but I'm sure there are other plugins with other libraries and so forth. So what I intend to do with this example is to start with a blank file and start writing the code from scratch so you can see how I can accomplish this responsive design. But before I do so, I would like to define what responsive design is. Responsive HTML design is basically that which entails designing your elements in such a way that once the viewport or the screen -- the viewport of your screen, of the device view -- is changed, then the elements will reorder themselves in a fashion that suits that device or that viewport. And you will see, through this example, how this appears visually. So I will begin by writing some code. I will start with a blank file. Before I do this, though, here is the website for the Masonry plugin. You can find this at masonry.desandro.com/index.html. As you can see, you can click on this link, which will download the library -- the Masonry library. In addition to this, you will need to all ready have loaded the main JQuery library. You can do this from a local installation or a local copy that you might have, or through the reference to a CDN, content delivery network. A very popular one is Google. Google hosts JQuery on one of their servers. And on the left side you can see that there are plenty of demos and there is documentation on the options for this as well as the methods involved. Okay, I have all ready gone through some of this so I know a little bit more than you do at this point. I will start by writing some code and then we'll see what that does. Okay, I will start with a blank file called index.php. And I want this to be an HTML 5 file. Oops -- sorry. Okay. And then, next, I'll define the head and title. Now, this is not indented, but in your projects, you will need to indent your markup. I can go ahead and do this anyway. Okay, so I have a basic HTML file now. Can someone recommend or suggest what I should do next? Think about including libraries and where would I include them? Okay, let's go back to the JQuery Masonry page and look at the -- click on the introduction link. And they make it pretty easy for us to do this ourselves. And the way it works is that you define a container, a div container, whereby you insert other sub divs and those divs will host your content. And in order to make this work -- in order to actually have the library available, we need to reference the -- First of all, we need to reference the JQuery library from a CDN. If I can copy this. Okay. I'll copy this and paste it in my head script -- in my head text. Okay. So this first -- this first script is the main JQuery script that will be loaded here. And the second script is the actual Masonry library. I have, conveniently, all ready downloaded this library. It's just a file. And I have renamed it to masonry.js. So the way I would refer to it here is just simply delete all of this text and call this masonry -- lower case masonry -- .js. So at this point, if I were to load this page, I really should have nothing, but the libraries should be loaded. Okay, the next step here is to -- per the documentation -- is to create a div container with a bunch of divs inside it. And this is what I will do next. And I will give it an ID of container, and this is arbitrary. It's just -- you can call it whatever you like. And let's suppose that I want to display -- well, before I put in any content, let's see what else we need to do here based on the documentation. So it seems like there are some CSS rules that I need to apply as well. Making the width of the item 220 px, which is roughly a fifth of a common desktop viewport and width, and margin is to have 10 px, to have some space on the left and on the right and on top and bottom, of course. And float is to have the item floated. I'm going to copy this and paste it under -- well, I don't have any style tags here, so let's go ahead and start off with a style tag. Sorry. Text. CSS. And this is where I put my rules. Now, notice that the actual class that this is referring to is called item and this is what I will need to label or stamp my sub divs with. So, suppose I create an item here. It will need to have a class of item. Okay, let's see what else the documentation calls for. Okay, it calls for a function to be run and a built-in masonry method to be called. 

Is it possible for you to zoom in on that page? 

I'm not sure I know how to do, ma'am. 

Oh. [Inaudible] 

But I am going to copy this code so you will be able to see it. Okay, so I've done -- so the first script tag calls for the main JQuery library to be loaded. The second one calls for the masonry library to be loaded. And the third script tag will have our own custom codes -- everything we need to put here. I'm going to make this law visually more appealing. Oops. Okay, so we are basically ready to go with this page, except that we don't have any items here to show. And I would like to show some images. I grabbed some earlier on. Before class I grabbed some image URLs off the internet. And I plan on displaying those images here. So I will open an image tag. Image and SRC equals to And this should -- so the image URL should be contained here between those two, between these two quotes. And I have pasted some image URLs in a separate file. I'm going to copy this one. Paste it here. And then I will do the same Let me grab the other image URL. Copy. Oops. And we will paste it in here. So now I should have, if I paste it here, I should have two images appearing on this page if all works correctly. And I do have two images. Now, I need to resize these images to fit the grid layout that will be applied by the masonry plugin. And I think the best way to do this is to just resize the image to fit the column, because this will be divided essentially into five 220 pixel pieces or columns. Now, I can do this simply by going to the style rules and adding a new style rule for the images. And I will make sure that my images are with 220 px. Okay, now I have two images next to one another. Let's see if we can replicate this code to have more images and then maybe you can appreciate the usefulness of responsive layouts. I'm going to copy these same two images over and over -- just enough to span across the page and down a little bit. Perhaps one more time should do it. Okay, let's see what happens now. Okay, so I have a bunch of images. Okay, I'm trying not to show you the prefab code because then it will be maybe harder to see what I'm doing. Okay, what should happen here if I did this correctly is that when I squeeze this over, the images will align with respective to the new viewport. So, as you can see, the closer I squeeze this in, the more the divs align correctly or they squeeze together. There is an option that I can include in this in the Masonry call, which is called "is animated" and which makes it much more appealing. And I can set that to true. And let's see what this does on our end. I'm going to refresh. I'm not sure why these are overlapping. So let's see if this works. As you can see, there is a little -- they are animating now. Okay, now I can copy and paste some existing code I created for this, which is essentially the same code, but I have added some new features -- one very simple feature, which is -- let me refresh this. So, I have added here two links. Each one will call a separate method that will create, grab a random image and append it or prepend it to this document -- to this thumb. And then it will call the Masonry reload function, which rearranges the items based on their new viewport. Let me just quickly show you what I'm doing here. So there is a function called get random image, and what it does is it creates a new image array. And here, I am storing three different images and then I am generating a random image each time. I first generate a number from zero to two randomly, and then I assign that. I pull out that image based on its position in the array. And there is another function I created called append image, and what this does is first calls the get random image, which shuffles the -- which pulls a new image -- and then it appends this following HTML markup to the container div. And, lastly, it applies the calls the Masonry -- dot Masonry reload -- dot Masonry method with the parameter reload, which makes the page reload -- not really reload, but it just adjusts the elements to the new viewport. Prepend does the same thing except that it inserts the object or the div, the image div, first into the dump. So let me show you what this looks like in action. If I click on append image over and over, it's getting a random image. It so happened that the first three times were the same one. And if I click on prepend image, it will start inserting it at the very beginning. And this, the resizing of the window, still applies. Each time I squeeze it, it adjusts. So, basically, this is what I wanted to demonstrate tonight in today's section. This is a shorter section, but it's been slated for TA's choice. And this is just a small part of -- I'm sure there is lots you can do with responsive design. This is just a small example of it. Feel free to Google around the internet and search for other libraries and other things that you can do with it. And this concludes our semester as well. And, Chris, would you like to say a bit for a while as well with me? So, Chris Gerber will be holding on-campus office hours now. And since he is here, I'm taking this opportunity to -- would you like to say something? 

Thank you. Well, I would just like to thank everyone for their attention this year and for coming out. It has been a lot of fun working with all of you, especially for those of you we haven't met in person, just the discussions on the discussion board -- it's really been great. I hope that you have all taken away a lot from the class and that you have enjoyed it as much as we have. Thank you. 

Yeah. Thank you. [ Applause ]