Diamond Images Mobile Layout

[00:00:00]
>> Next up comes one of my favorite parts of this entire course, and that is a diamond-based layout for images here inside of this webpage. We have ten separate images that we are going to use and splay them in this diamond format, and we're gonna do this with Flexbox.

[00:00:22]
So to get started with this, I have given you some very important parts to the starting state. So, let's take a look at that right now. As you can see here, this was inspired by a blog post that I read earlier this year, and I encourage you to take a look at this blog post.

[00:00:43]
What I'm doing is not exactly like it, but it's definitely inspired by it. So first of all in this little bit of HTML we have our wrapper wrapped around everything, just like we have had for the rest of the website. We have a div with a class called diamond-container.

[00:01:01]
And then inside of that we're going to have an unordered list, because this is a list of pictures. And the unordered list here has a class of diamonds. And then you see just a bunch of list items, and they actually have nothing inside of them. So that's our HTML, that's it, that's all we've got.

[00:01:19]
Then here in our CSS, I have to streamline things and make this a little easier. I have given you a starting layer called diamonds. And for each one of those bullets and for fun we've used nth child to select all of these. I've given you a background image, that's the image that should appear here on the page.

[00:01:44]
And we set the background size to contain. So we have our first child, our nth child two, nth child three, so on and so forth all the way down the list to our 10th child which is the very last one that we have. And they all have set to background size of contain.

[00:02:03]
What contained does for a background size is it means that no matter how big this background image is, we want it to be contained within whatever we have. And so right now, this is just a list. So we have the entire image. These are images that have been cropped into squares.

[00:02:23]
They are very, very small, [COUGH] and they tile very nicely here across this particular window. Obviously, it will not look like this for long, but that is our starting point here for what we are going to build. So all of these initial styles here that are calling for our background images, those are going to be true and we'll hold through no matter what the screen size happens to be.

[00:02:47]
So we'll leave those outside of the media queries. I'm gonna scroll all the way down to the end of that list. And this is where we can start to add new styles to this page. I'm going to start on the diamond-container. So that's the dib that goes all the way around everything.

[00:03:07]
And I'm going to establish some variables here that we'll use inside of this diamond environment. Because we are doing wild and wacky things with this layout, it really isn't very flexible or responsive within the layout itself. So instead, we'll wind up putting together a diamond structure that starts at a fixed width, jumps to the next fixed width, jumps to the next fixed width.

[00:03:31]
Because anything in between those fixed widths, the pictures will wind up being all out of place and it won't look right. So this is not necessarily a flexible layout. But you can write a series of media queries, and if you leverage your variables, it's actually really very straightforward to do.

[00:03:49]
So here in this diamond container, I'll set up some variables we'll call one square, and I'm going to set that to be 200 pixels. Ultimately SQ here will be our variable that's used for the width and the height of these images. And again, we're working with square images because we took our square and we turned it on its side to make a diamond.

[00:04:11]
We can set up a variable called square gap of one rem. And of course, that's the gap in between our various pictures. And we'll set up another variable called max width. In this case we're gonna start with 325 pixels. So in other words this is for very small mobile sizes.

[00:04:36]
Then we can start declaring these, so our max width will be our var max width, Now our margin will be 2rem, auto, give us a little space on the top and the bottom, center it on the screen, and our border will be 2 pixels, solid, var, cyan. So there's our border going around it.

[00:05:09]
Now remember, these variables that I've declared here inside of diamond container are so-called scoped. It's kind of how we scope inside of CSS, so these variables are not available anywhere inside of our document. They are available to the items with the class of diamond container and their children.

[00:05:29]
That is the only place we can access these particular variables. We could in fact put these variables inside of root if we want it. Your route declaration can get really, really long that way. So if you have variables that are specific to certain parts of your web page, like these, you may want to scope them by putting them where you are actually going to use them.

[00:05:53]
Things like colors and fonts that we've been using in our document, obviously, those are used everywhere. So it makes sense to put them in that root declaration. All right, so now we can work on our list items here. So we'll say .diamonds li. And that is, of course, here in our HTML, diamonds is on our ul.

[00:06:20]
So for all of these specific list items, we wanna do the following. List Style of none, and then we'll, of course, that makes everything disappear. Then we'll say our width is a var of sq, our square, and our height is var sq. So there we go. There's all of our images, they show up immediately.

[00:06:50]
They're all the same size. And we can set a margin on the bottom of var sq hyphen gap. So that'll give us a little bit of space in between those pictures. On screens that are this small 325 pixels and smaller is what we're current kind of currently de designing for.

[00:07:17]
My diamond layout actually doesn't work at all, so we're gonna give everybody a default layout here for extremely small devices. And this is fine, it's okay but it might be better if we did something fun with this and so I am going to write an additional style here.

[00:07:39]
So this is just gonna give us a list of photos here for a very small device. There they are all in a list, not especially fun, especially compared to that diamond layout that we'll get to here in a moment. So one of the things that we could do to make this a little bit more fun would be to tilt these.

[00:07:57]
We can just give them a little bit of a rotation, sort of like you took some photos and threw them on a table, some physical photos. So we can do that really easily because we have just a series of list items. We'll say dot diamonds li:nthchildodd. So for odd number images, let's do a transform, rotate four degrees.

[00:08:29]
So there's all my odd pictures, now they've just rotated a little bit, not a lot. Just a little bit and we could do the same thing for our even ones. Diamonds li and child even. Transform, rotate. -6 degrees. Why did I pick those? I don't know, looks kind of fun.

[00:08:59]
Isn't that better? That looks great. So on a really, really small screen, you'll be able to see the pictures, they don't look completely boring. And here I've just used even and odd in my display here. You could amp this up and make it even more fun. You could do something like every third or every fourth, and you could set different transforms for all of those and make it look even more random than I have here.

[00:09:23]
But that's the general idea for styling at these small dimensions.