>> 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 ]