Diamond Images Tablet & Desktop Layout

[00:00:00]
>> So, now let's go on to making our diamonds. So I'm gonna set up a media query, and we're gonna say our min-width is 324 pixels. And now, I can just read re-declare all of the variables that I declared earlier and just change their values. So I'm gonna put in my diamond-container.

[00:00:33]
My square variable, I'm going to set to 150 pixels. My square gap to three pixels, and my max width to 325 pixels. Okay, so you notice that all of those variable changes had an immediate impact on my design. And that's because this is one of the wonderful things about CSS variables, you can re-declare them per media query.

[00:01:06]
That is actually something you can't do with SAS variables, if you're wondering about one of the big differences between SAS variables and CSS variables. SAS variables do not change between media queries, whereas CSS variables are very flexible and can do that. So now that we've got that in place, let's turn off our image rotation and we can say diamonds li:nth-child.

[00:01:35]
And you could do this with just n by itself in other words for all of them, transform, rotate 0degrees. So we've turned off that little bit of rotation there. And then we're ready to change the way all of our images look. Right now they are set up to be square, we want to turn them into diamonds and we're gonna do that with the clip path property.

[00:02:08]
So .diamonds li. We'll set this up with clip-path which is gonna trim these up for us and we're gonna call it a polygon. And we're gonna say 50% 0, 100% 50%, 50% 100%, and 0% 50%. So that changes all of our images into a diamond by using this clip path.

[00:02:52]
Obviously, I just did this with squares, you could do this width and turn your images into any other kind of shape. There's all kinds of possibilities with clip path. If you Google for it, you'll find other various recipes for this kind of thing. The next thing to do is to turn on Flexbox.

[00:03:11]
So right now, these are just stacked on top of each other just as any other unordered list would be. So let's turn this into Flexbox and start setting these up for an alignment. And we'll do that by selecting our parent which is diamonds. And we're gonna say display flex.

[00:03:34]
Which immediately puts them all together just like that, kinda awesome. And then flex-flow: row wrap. We do want them to wrap onto other rows. Justify-content: center, and our gap will be var(--sq-gap). So not a lot of change there because we have our images are of a size, our max width is of a size, they haven't showed up next to each other.

[00:04:12]
So they're wrapping onto other rows at the moment. So we need to encourage these diamonds to overlap a little bit. So let's put in .diamonds li and we're gonna play around with some margin here. So we'll say our margin on the left will be calc(-0.5 times our square variable).

[00:04:46]
So basically half of our square value and remember our square value was 150 pixels. So half of that would be 75 pixels, we do it here with math because this now becomes flexible as we change the value of sq, square, across our media queries, then that logic will carry through.

[00:05:09]
We just have to change its value. And we can also say our margin on the bottom is 0 because earlier we had some margin on the bottom with our previous layouts. So there we go, if you like that layout, you can totally keep it. I mean, that's kind of fun looking too just like that.

[00:05:29]
So, just by changing your clip path on these images, changing with overlapping images, you wind up making some very interesting art for your websites. But now what I wanna do, if you think about it, if we look at our diamonds here, we can kind of think of these as rows.

[00:05:49]
So these top three images here in our layout, that is kind of a row. The next three images here, kind of a row, and in our current layout, we have our three images here, just like this. What I wanna do now is take this second image, right? This one in the middle, and I wanna pull it up.

[00:06:14]
The other two go down, and that will form our layout. So this is the coolest part of the whole thing because we can in fact do this. So what I wanna do is, .diamonds li:nth-child and what I wanna do is I wanna pick every third diamond starting with the second one.

[00:06:42]
So the math for that looks like (3n + 2) always looks like algebra but it's not. And then we're going to say our margin on the the top will be calc (-0.5 * var square variable) and then we're gonna subtract. So there we go, see how we pulled that on up really nicely, might take that out again.

[00:07:14]
See how that diamond gets pulled up really, really nicely there? Awesome. Then from that we'll subtract. 0.5 times var square gap. Because when we pull it up that way, it looked great, but the gap was a little bit inconsistent. We need half the gap in addition to half the width of these diamonds.

[00:07:51]
So there it is, we've pulled that on up and we wind up with that awesome layout there. Notice that our last diamond is kinda hanging out in space, what's going on there? Well, remember that we don't have the other diamonds that are there with it, and so, that last diamond that you see there with the two women on it, it's effectively at the first one of the next row.

[00:08:13]
But it happens to be displaying in the middle, because it's the only one in that row. So we may have to do a separate treatment for that specific item. Let's bring our diamonds back onto the page again because, of course, now they're hanging out of their box up there.

[00:08:34]
We wanna push it all back down into the page. So to my diamonds style here, I'm going to add some padding on the left. And we can say, once again, calc(0.5 times var variable sq). So half that distance, that'll push them nicely there in the box and then boom, everything broke because sometimes that happens along the way here.

[00:09:04]
And then we wanna push it down from the top, so padding-top calc(0.5) times var sq. So now we've pushed everything back down in the box, it's centered there very, very nicely. Okay, so now let's deal with that last diamond down there in the bottom that's hanging out in space.

[00:09:33]
And we can select that one, it is our 10th diamond, so .diamonds li:nth-child(10) that specific one. We want the margin on the top to calc(-0.5 times var sq). Minus (0.5 times var sq-gap). There we go. So that'll pull that last diamond on up into place, and we wind up with this awesome layout.

[00:10:30]
It has a consistent gap throughout because we had to take that into account, Flexbox, of course, is running in horizontal. Absolutely parallel for all of these. When we turn things like this and we put a little bit of an angle to stuff, we have to do a little bit of extra work to make sure that our gap is even and to make sure that our diamonds show up correctly in the right spots.

[00:10:54]
So that is how we go about setting up that initial diamond layout. Now, that's pretty much all of our heavy lifting. So now all we have to do is change the values of our variables as we go, because all of the logic is contained here in this initial media query here, for our min-width of 324 pixels.

[00:11:16]
So now you can add as many additional media queries as you want and just change the value of those initial values. So I'm going to say at media, min-width 440 pixels, let's say our diamond container. Sq is now 200 pixels. Notice that that breaks here, don't panic. Sq-gap is 4 pixels and our max width will be 440 pixels.

[00:12:06]
So see how that reformed once I had all those variables typed in? If we make it smaller, then it will go to our smaller format. And when we make it even smaller, it'll go back to our series of kind of polaroid kind of treatment here that we have here on the page, all right?

[00:12:27]
And we can continue to add media queries, I'm just gonna copy this whole media query here. Paste it in and we could say something like 800 pixels. So at least 800 pixels, we want to have values of 250. A gap of six, and a max width of 550.

[00:12:56]
So now when I make the page even bigger, then we come up with a really large diamond layout here. Then we go to our medium, sort of our medium size, or smaller size, and the final layout there. Okay, so this is really super fun stuff that we have going on here, right?

[00:13:20]
The concept of being able to take a bunch of images and lay them out in this diamond layout like this is totally awesome. And I hope this is something that sparked some ideas for you. Maybe experimenting with other clip paths, maybe thinking about using nth-child and its various permutations.

[00:13:40]
How could you move things around on the page in order to make them line up exactly the way that you want? And we could wind up with image galleries that are more interesting than just tiled images over and over again. We could wind up with more interesting art like this.