 Post-CSS is an amazing tool that lets us do really incredible things and make our life a lot easier, like being able to type in right instead of right. Or there's even a plugin that will, if you have like five selectors, it will mix and match the properties that are within the selectors and jumble them all up. So that way things get applied in all the wrong places, letting you troll your teammates. So yes, today we're looking at some fun things you can do with Post-CSS, rather than some very serious things. But there are actually a few little gems in here that you might want to use. Hello, my friend and friends. Thank you so much for coming to watch yet another video. And if you're new here, my name is Kevin and here at my channel, it's all about falling in love with CSS. And one way I think we can do that is actually by using Post-CSS, which can solve a lot of our problems or just sometimes let us get onto the looser side and have some fun with things or maybe some of these will actually solve some of the problems or gripes that you do have with CSS. So let's dive right in. And we'll start with a bit more of a fun one, I guess. You can see I have a CSS file right here. And I also have a Post-CSS config. I'm using Veet to put together my project and run everything. We don't have to worry about too much on that side. And actually, I just want to let you know that before we actually add anything here, I've already installed the ones we're going to be doing in my configuration like npm install save dev and all of that. So they're all ready to go. If you want a more in depth tutorial on Post-CSS and actually getting it up and running and all of that, let me know in the comments. Let's dive in. The very first plugin we're going to look at is going to be Post-CSS Imperial, which lets us use Imperial units within your CSS. And this is more than just being able to use inches like we can do right now. So let's take a look at some of the fun we can have here. So here I do have a container setup, which all my content is in. So, you know, we could do it the old way. And pixels are probably, they are based on inches, I think. So they're sort of Imperial, I guess. But let's just say 100 pixels so we can see this is actually working. Of course I need to do this. Let's do an npm run dev. We're going to be running this a lot because whenever I make a change to my config file, we're going to have to update here. But there we go. We can see that's working. But what if instead of doing a width of pixels, you wanted to set your width in, let's say 50 barley corn. What is a barley corn? I don't know. Now we have a different width, maybe a bit too big. We'll go with like 25, something like that. It's still not working. Or even, you know, what if we wanted to set our font size? We'll go with like 250 twiP. This is, we're getting, that's a bit small. So we can't see the difference. Let's go with 500. It should get bigger. These are those archaic Imperial units, obviously. But if you don't want to go so far back in time, maybe instead of doing this, we also get width, we have yards. So I don't know, 0.25 yard. I think we can write it like that. That did change. Let's do a 1.5 so we can see it shrink down. And I think the yard, you can even just do a YD. You can see that's still working right there. So again, we'll change it just for fun. And there's all sorts of different crazy units that you can get in here. If you wanted to, for some strange reason, let's jump over to the other side of the pond and help out my British listeners. And actually, this applies to Canadians too, since we mostly use British English. We have this weird mix of the two. But let's come into my post CSS config here. And we're going to add another one, which is post CSS spiffing. And post CSS spiffing lets us use British spellings of stuff, which is pretty cool. There's actually, this is one of those ones where people might actually get some value out of this, because one of the biggest complaints I actually hear about CSS is not being able to write color properly. So let's run this again. Now that we have spiffing that is up and running. And I could actually come in here and write color the proper way. Let's just do a color of blue so we can see that it changes. And it works with the OU. And if you don't know about post CSS, what it's actually doing is taking what we're putting here and transforming it after the fact into something the browser can understand. So this isn't like my final CSS file, basically. But yeah, we can do color like that. I could even come in and say, or you know what, I made some classes for this. Let's make this a little bit better. I'll do like a three, three, three. And here I have a BG dark, so I can do a background color of black and a BG light, you know, background color OU of yep, yep, yep, or something like that. I haven't set these up anywhere. But just to show you, both of them do work. Taking that a step further, we can also spell center with the RE way, which is apparently the Canadian way to do it, but I never spell things that way. But you could do a text align of center, and it would work. Another thing, and I'm not actually using that anywhere. Let's apply that somewhere here. We'll just do it right on my title, text center. There we go. So you can see it is actually working. And maybe my favorite change here is if you want to apply something and you really want it to work in my HTML, one of my files has an accent color or files, one of my paragraphs has an accent class on it. And so we can come on here and say color and let's just do red. And instead of saying important, we can be more polite about things and say please. And you can see that's worked right there. So this gets transformed over to an important when you use a please, or let's come on to just my body here for a second. And we can also do a font weight. And instead of saying bold, we can come in with a plump. And there you go. We get a nice bold font coming from that. But well, I think a lot of these you might not want to bother with. I think for some people writing color within OU in there like this would could be something that they actually really appreciate. So that is one way we can get that to actually work. Now we're going to jump through through a few of the very sort of strange ones that you might want to use. First, what we're going to do is get lolcats running. So let's end this process right here. Jump back going over to my JSON file and not my package might post CSS config. And in here, it's going to be post CSS lolcat style sheets. And what's this is one of those ones where you're just sort of mucking around a little bit. So as I'd sort of mentioned off the top of the video, this would let me do a text align. Let's get this running again before I do it, a text align of right. And you can see that switches it over to the right side there. There's other weird stuff you can do in here, like you can do a, you know, our position position can be written as fixed like that with no e at the end. Maybe my favorite one instead of font family is font peoples like that. And let's just do cursive, so it switches cursive, which why on Windows is cursive go to Comic Sans? I'm not sure as the default. But yeah, this one's more just silly misspellings of stuff, but a fun one to look at and you can sort of dive in and muck around with. If ever you want to author some really strange CSS. And the next one is a little bit more fun in that we can do. So let's cancel this in that it allows us to troll our teammates and don't let anybody know I showed you this. If ever you use it, please, you could really muck around with people with this one. So let's go back over to here. And this one's called CSS. Let's put it in post CSS trolling. Now with the trolling one, if you just enable it by default, we can run it now and you're going to see a lot of stuff actually goes on. So it's not just going to be doing one thing. It's switch things and colors have changed. Things are moving around things are getting blurry. You can see the font sizes are changing as time goes on. And there's actually a lot of default settings on it, which I think takes away from the fun of it a little bit. So let's turn the live this off for a second. I'll refresh just so we don't have to watch that doing anything. It should not work. And off screen, I do have the options for this here. So you can actually, they have it on their repo and I've linked to all the repos in the description down below. So you can actually disable everything because all most of them, I think are enabled by default. And this is where you can sort of get interesting. So one of them is you can actually turn comic songs on as the default play with heights hide cursor. Let's just do true for fun. And one of my favorite ones is the blur, but we'll see that in a second. But just here just to show you everything loads in, but if I move my cursor on top, it disappears. My cursor is here, but we just have no cursor. And there's also another cursor one that will actually hide or it gives you like the waiting cursor instead of a hitting cursor. So it looks like things are like spinning and waiting to finish to load. So that one's kind of could be interesting as well. Yeah, let's go slowly grow text. We saw that one on to me, the default setting of this one's a little bit fast. So if you wanted to do that one or the blank, let's set both of those up. So under the blur, we have some options to put in there. So we're just going to open and close that. We want to put a time, maybe did 10 seconds, it's going to be really fast and super obvious. Whereas if you do like 120 seconds, it would be a little bit harder to tell that it's happening at the beginning. And then you can choose what like the final blur is going to be. So I'm going to make it like pretty obvious at two pixels. Hopefully it becomes pretty obvious. And at the same time, well, that one's doing will also do the grow text. So that one's right here. And this one also you need to give it a time. So let's just do the, I'll do it a little faster just so we can see without having to wait for it. But I would do this as a pretty long time as well. So we'll do 20 seconds on that. And then you also want to do a max font size. So here, you know, you could say 40 pixels or something just to stop it from getting too big eventually. And it's just one of those things anyway, if you're doing this, you're being mean. But it could be kind of funny. Don't do this. You can see the text is growing. It's going really fast because I have that set to 20 seconds. Maybe I should have done that a little bit longer. But if we come and look, I also can't see my cursor, which doesn't help. But if I bring this in, you'll also see we shouldn't be able to find that there's a blur being applied. Oh, I don't have my blur going. Oh, the blur is probably to the entire page. Oh, look, it reset at the end. Oh, but you can definitely tell it's starting to get blurrier even though I can't find it because that's on the whole page. I thought that I didn't realize. So this one you probably, I do over a really long time then. And yeah, my blur is getting really blurry now. But just something stretched out over a really long time adding a little blur. Be very mean of you to do that to anybody. But it's an option if ever you want to do it. And so yeah, there we have it. A few fun ones. There are some other fun ones listed on their page as well that you can find linked down below. Just be careful because some of them haven't been updated a long time and you might run into a few errors with stuff along the way because there was a few that I wanted to look at that just didn't work. But I really hope you enjoyed this. Don't have too much fun with your teammates with this one, but it could be good for a laugh on a non serious project where maybe you're doing it with friends at school or something like that. And with that, I want to say a very big thank you to my supporters of awesome over on Patreon, Jan, Johnny, Stuart and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.