calc() lets you do some real CSS magic

Key Takeaways

in today's video we're gonna be looking at the CSS calc function which is a really awesome function that we can use in CSS but it's often awesome sort of a sneaky kind of way hello there if you're new here my name is Kevin and here at my channel we learned how to make the web and how to make it look good with weekly tips tricks and tutorials and as I said we're gonna be looking at the calc function which is a native way to do maths with CSS but you think math it sounds boring but calc opens up lots of really cool doors and fun stuff that you can do with it and often it's a solution that it's not always the most obvious thing that you want to do but you can come up with some really cool stuff that you can just do with it so we're gonna be exploring some of those in this video and some fun you know we're gonna look at how it works but also some fun and cool things you can do with it so here we are in using a vs code as my editor so here we are I have a really basic site going on there's not too much fancy stuff going on here it's all just some text I have an image and this at the top and I have a container here that's holding all of my content just to talk again about pre-processors they first introduced the ability to do calculations so I am using sass right now and what I have sauce on so it's going to compile but it's not something that I normally we're not gonna be diving into sass in this video or anything but just to show you if I used a called 7 and then you know if we're doing a 12 column grid system it was always kind of annoying but because you had to do math but with sass I could do 100% divided by 12 so that gives me splits my 100% into 12 for my columns and then my call 7 I could do a times 7 on there and if we go and check out the compiled CSS for that you can see it's done the math for us and we don't have to worry about it so that's super handy but it has its limitations and the main limitation for it is that we can't do any we can't mix units so there are times when it's really really handy to mix units and one of those examples can be with a container so on my container here I have put a width of 70 but maybe we want to do something a little bit different so say a lot of time you'll have a max width on a container so I'm gonna put mine at a pretty small number right now just because I'm on a limited screen size but normally that you know a thousand or 1200 or whatever you needed to and on the whip here I can actually do a calc so I'm gonna say that my width is 100 viewport width so it's gonna look at the whole screen or the whole not the whole screen the whole browser window I should say and then - let's say 2 m and I'm gonna hit save on that and and what that's gonna do is I don't need to worry about like padding or anything like that or exactly how big it's gonna be I know it's always 2 m smaller than my screen so it's giving me a 1 M on each side of space until my screen gets too big and eventually I'll hit a max width and then it sort of locks in I don't have to worry about the math I don't have to worry about how things are doing and the reason this works whereas this I cannot do this with a preprocessor tool XS or sass or less because sass unless they're taking the math and they're outputting they're doing the calculation and then outputting like a percentage like we saw or they're putting us a single unit whereas the browser can calculate this on the fly as things are changing it sees the viewport width this is normal CSS my browser's looking directly at this calculation it's figuring it for us and this is just super useful but it's most of the uses for calculon are super useful but in a really sneaky kind of way so another one that's really cool I love this trick so much is this awesome braking order the grid trick I saw first posted by Tyler stick over on cloud for the link for it is in the description below where say you have an image like this and let's just let's make this quite a bit smaller - like 6 just so we can exaggerate the effect that we're gonna have here so we have a bigger space let's say you have like a blog or something like that that has text running down but you want the image to spill out the sides of that so what we could use that for is on my image I do have a class I put a class it's hiding the way over there but it doesn't matter my class is big image so what I could do is and again I am working SCSS file but everything I'm writing now is normal CSS so it doesn't make any this is all normal CSS that we're looking at so if I came in here and I did big image and instead of a max width of a hundred like this what I'm going to do is give it a max width of 100 viewport width which is obviously going to make it shoot out the side but then what I can also do then is give it a margin and the margin I'm going to 0 top and bottom but on the left and the right we're gonna try something a little weird and so we're gonna do now is we're gonna come and give this a margin where near zero for the top put them for the top and bottom and then for the left and right we're gonna do something and I'm actually gonna do a negative 50 viewport width to start with just and we'll hit save and see what happens and it's pulling it that way and it's also pulling it on that side but my image doesn't you know it's not gonna pull that way but so might it's going okay from this distance I'm negatively pulling it that way and then what I can do is add 50% back into here and look at that I have an image that's filling up exactly the whole thing and it's lived this image is living inside of this container which is really really awesome and actually I just realized I put this is a max width but that's a bit of a mistake I'd want that as a width and I'm actually actually will keep max width and we're gonna put width of 100 viewport width just because if not this is gonna get in the way and you probably want to have something like that for your normal images so this would just be 4 big images that are spilling out because if you don't have that it's possible it doesn't actually fit your screen so now you can see that no matter what's going on and that image is spilling at the sides like that and we can take this one little step further and what I can do is actually give this a max height max height of say I don't know 30 viewport height and that can cause my image than to get squished or smooshed so then I could also do an object object fit cover which is the same as like a background image cover type of thing so you can see it's it will crop the image just a little bit if we're playing around with that but that's cool it depends what you're doing you might not want to do something like that but it works fantastically and it's really cool and you don't have to limit it to big images like this you can also come down I mean see I did a CTA so one of my paragraphs here is CTA so I'm gonna save that there we go and I can do the exact same thing I'm gonna give it a width of 100 of you port width first so now it's gonna be too long and then I'm gonna give it the same margin we did before so I can do mark not in origin we need a margin of zero calc negative 50 viewport width so again that sucks it negative that way and then we're adding a 50% back in and this is 50% of its own width which is 50 viewport width pretty much but anyway it works out super well and it's right there and then we can add in some padding I love like 3m on the top and so that's what the 3m looks like that so it's not terrible but depending on your screen size it still might sort of cause or once we get to bigger it's gonna you know if you don't want that to happen you'll have to play around with stuff and again you could probably use a calc to get something a little more magical to happen there but we'll leave it just like that for the moment but just to show it doesn't necessarily have to be a text the only problem with this because we're using viewport units is it does give us a little side scrolling if you don't have a vertical scroll then you won't get this but the problem with viewport units is they actually count this space underneath here so when we're setting this to 100 viewport width it's actually counting underneath that so what you can do is on my body which is actually hidden away here somewhere where is it there it is I've moved it down to so it wasn't there but on your body you want to do an overflow X of hidden and then your little scroll bar goes away so nice and handy there it's kind of annoying that you have to do that but c'est la vie and these are you know again we looked at a few different things here but another one that can be really useful is with font sizes but do not use this for little font sizes but it's for large font sizes it can be useful and I'd probably build in a media query that would prevent something from getting too small but I have my title here and again I'm using a lot of you poor twits but for the font size I have three room right now so I could actually do instead of three room I can do a calc of like five viewport width plus one REM and you can see it almost didn't change at all but now as I get bigger that font size is going to increase or as they get smaller that font size is going to decrease there's the video I just recorded before so it sort of makes this responsive text going on back and forth a little bit which is handy and it's nice that you can add in this one room because it sort of gives it a minimum point so this is the the smallest that I could possibly get if your viewport was zero it's still going to have a font size whereas if you take that out it just it can make it a lot more extreme and if you want you can make this bigger and this a little bit smaller and then you know it's I mean maybe this could even be down to one and it makes the whole thing a bit less drastic but it's still now we're based on like a larger font it's going to shrink or grow but not as much so you can sort of balance out a bit of a balancing act there but again be really careful with this because if it's on small font sizes they can become illegible at small fonts at small screen sizes so just be very very careful with that so I hope you like that I hope you learned something new I hope you got some ideas I really love that breaking out of the container thing I was so happy when I found that originally don't use it terribly often but it's one of those things that could be really cool or really useful if you don't even have to go full width with it if you could play with the numbers a bit and you know use it in other ways as well but it's nice not to have to a closed container or open container and stuff like that just to get something that's full width it can be really really handy in the right place if you have any cool count tricks please leave them down below let everybody else know about them so that way you can build up a nice little database here or come and join us at the community and let us know over the community is a discord channel it's free to join so just go down there's a link there you click you make a username and you're in it's easy as that over there there's people that are brand new to web development as well as some seasoned veterans and everything in between so you will not feel out of place you can ask questions get help help others come over and join us I look forward to seeing you there if this is your first time watch one of my videos and you liked it please consider subscribing for more videos like this one I make one every single week and massive thank you to my patrons for helping support everything I do here with an even bigger shadow to Lauren who is my supporter of awesome just thank you so much for that if you're watching this right around when it came out were really really close to my next goal and with my next goal I'm going to start closed captioning my videos so I'm really looking forward to being able to do that something that I've wanted to do almost since I started this channel and when I hit my next goal I'll be able to afford to do that so you can check the link down in the description below to see my patreon page and everything that goes on over there I do believe that's it so until next time don't forget to make you recording the Internet just a little bit more awesome