Responsive card UI with flexbox and hover effects | HTML/CSS

hey everyone in this video we'll be building a card ui using flexbox the cards are going to be responsive and we'll jazz it up a little bit by adding some cool hover effects sound good let's get into it [Music] all right so we have our code editor vs code open and let me walk you through the files that we'll be working with so first things first index.html it's blank we haven't really gotten to this yet then we have an app folder that is going to contain all our styles in the style.scss folder we have a disk folder that will have our compiled css file then we have an image folder which has images that wheezing in our website and the other folders and files that we have are related to our workflow so i use gulp and browser sync to compile my sas files to css and also to run a local server if you want to learn more about how to set all that up you can check out my previous video on gulp and browser sync you can obviously use whatever method you prefer to compile your sas to css files but that's just what i use here so let's get started with that so i'm going to type in gulp to run gulp this is going to compile sas files and also open a local server using browser sync so it's blank because there isn't really anything there yet but we'll get to that as we continue building our website you can also get all the source code for this project at my github repo and it's linked down in the description below so let's get started on this project in our index.html file we'll start off by using the emmett shortcut to add some boilerplate then we'll just add title flexbox cards and we want to load our css file so this is going to be coming from the dist style.css file so when we have a grid of cards i want to sort of enclose all the cards in a parent element so i'm just going to use section give it a class of cards and then in the section tag i'm going to just add one card for now and then we'll sort of copy and paste it to get the other ones once we think it's pretty much right now with these card grids a lot of times they're used for you know blog posts or other um links to pages on your website so we want really the whole card to be clickable this means we're going to make the card itself a anchor tag to be a link so i'll say a link we'll just have a little hashtag there and oh yeah we want to give it a class of card so in the card we're going to add different elements so i first want to do the image so it's going to be card underscore underscore oops card underscore underscore image for the image and i'm going to do card title because the title is next card um snippet for the little the little blurb and then at the bottom it's going to be the read more so i'm just going to say card read more and that doesn't have to be a link because the whole card's already a link and you you don't really want to nest multiple links in one another okay so this is the basic markup for a card so now let's go in and add the image and then the the text in the card so in the image what i'm going to do is i'm not going to use an image tag i'm going to use a background image i'm loading it in inline styles which i know you may have heard is not good practice which is true but if we're thinking about this card you know let's say from for a website you are using a cms like wordpress or whatever to load the data you need to have the image itself in the markup so the cms knows where to load it because you're assuming that these cards may change and you know if your website's pulling the most recent 10 posts it's not always going to be the same so you can't really set that stuff in the styles itself so this is why i'm using an inline style tag and then the background image is just so it will be a little more responsive that's going to come from the image folder and in the image folder they're all called landscape so we'll start with landscape one jpeg okay so in the title um so if we check out that first image it's like a fall woods kind of thing so we'll make up a title best place to travel in the fall and then for the snippet that's just going to be you know a little blurb from the beginning of your blog post usually so i'm going to use some lorem ipsum so lorem times 1 for one sentence and i don't know if i really need all of that so let's wrap that using the alt z shortcut um so maybe just here i'll cut it off end it with an ellipsis and then the read more i'll just say read more okay so here is the markup so let's start adding our styles now the first thing we had was we had that cards section to contain all the cards and then each card will have a class of card and then we have in that card underscore underscore title and the ampersand is a sas thing so the ampersand just means it'll inherit the card class so this is how this will be card underscore underscore title actually underscore underscore image comes first so i'll add that first so we've title and then we have snippet lastly we have read more so here's our styles just kind of stubbed out here so let's start adding some basic styles to our card so the card we want it to have a white background and then i guess we'll make the color black and i also want some rounded corners so we'll say border radius and we'll just set five pixels doesn't have to be super round um i'm also going to add a box shadow i think so box shadow let's see three pixels i'll show you what this means in just one second this is what i worked out beforehand so in the box shadow the first parameter is going to be horizontally where the shadow is positioned in relation to the element itself so setting it to three pixels will make it a little bit to the right then the two pixels is the vertical positioning so it's gonna be two pixels down and the third parameter of 14 pixels is the i think it's called like the range or the spread of the shadow so the the lower the number the it'll just be a very solid line so the higher the number it's gonna be more sort of gradually progressively um changing into the shadow color and the last parameter is the color of the shadow so we're having a sort of dark gray color and we're setting the opacity to 40 so we are using flexbox for these cards so what i'm going to do is we have in the card we have the image title snippet read more so i'm going to make it a flex parent now since everything is vertical we need to set the flex direction to column otherwise it'll be horizontal which isn't really what we're looking for okay so let's see what we got so far we need to get rid of that underline since it's a link you don't want the underline to be there so we want the image to show up and what i need to do is actually set um the image height now since it is a flex element we are not going to use height but rather we're going to use the flex property and since it's a column direction the flex property is going to control the height of each of the elements as well as their positioning so image flex we want the image to be let's see maybe 250 pixels or so tall and we don't really want it to grow and we don't want to shrink in height so i'm going to say flex grow is going to be zero flex shrink is also going to be zero and flex basis is going to be 250 pixels and the flex properties the shorthand for flex grow flex rank and flex bases okay so let's see what we got now oh yeah because now we have our image it's actually a little taller than i think it needs to be 250 i guess 250 is a little bit too tall let's try 150. that's maybe 120. i think 120 seems pretty good 120 pixels and just for the sake of not having the card going all the way across let's set a max width on it so max with maybe 450 pixels there we go all right so that's a little more card like right now this image i think needs to yeah we want the image to cover um the area so we'll say background size cover and background repeat no repeat background position we'll just do center okay let's see why is that not oh i'm sorry i added it to the card property itself that's not what we want there we go okay so now we can see a little bit more of the fuller picture which i think is better so let's add some of the textiles so the title wants to be a little bigger than the rest of the text so let's say 1.75 rounds and also font weight of bold which is 700 and for the snippet we'll just say actually let's set a default font size on the card itself and then it'll be inherited by the snippet and the read more let's just say one ram 16 pixels there we go that looks pretty getting there right for the read more i think i'm going to make it uppercase so text transform uppercase all right there we go okay let's add a little bit of spacing here too so i'm going to add some space under the title and maybe also under the snippet let's do that with a margin bottom um i'll just say 1.5 rounds so i think that's 45 pixels then under the snippet margin bottom maybe the same 1.5 grams okay maybe a little bit too much spacing okay 0.5 rims i'll do that for both there we go okay we're getting there so i think this is okay um there are a couple things i want to do i want to add padding in here and i also want to make the read more be on the right side so i can't add padding to the card itself because if i do that it's going to be it's going to add space around the image which i obviously don't want and the padding needs to be for the text for title snippet and read more so i think one thing i can do is in our markup i'm going to put the title snippet and read more in another parent element so div sorry class card we'll just say content and in the card content we'll move the title snippet and read more that way they'll be able to all take the same padding so let's add another style set set of style rules for card content do it under image i try to just make my style rules sort of follow the order in the markup it makes it a little bit easier to find styles later on if you have to change stuff so let's just say padding of one room to start off there we go much better spacing i'm i think i'm going to add some maybe padding to the body just so we have a little space around the cards or actually maybe i'll add that to the cards parent there we go all right looks like the border radius is not taking on the top so i can fix that with a overflow overflow hidden so this means content will be clipped so this will make the border radius apply to the image as well all right that looks pretty good let's now copy this card that we have and i'm going to duplicate it one two three four times so we have five cards so let's update the image so let's see this is the first one so we'll make this landscape two landscape three landscape four landscape five [Music] okay here we go so the copy's all the same we'll experiment with some different copy in a little bit but let's just make the cards um have that grid layout that we wanted so we're gonna use flexbox for this as well so what i'm gonna do is in the cards element i'm gonna say display flex okay so by default what happens when you set something to display flex is it will put all the child elements in that element in one row by default unless you sort of specify otherwise so this is a little tight right and also if you keep getting narrower and narrower obviously this doesn't look very good so we can fix that by saying flex wrap this will allow the flex children to wrap onto multiple rows if need be um and also i'm going to use a new property here gap 1.5 grams this is going to add spacing there we go looks like we have an error here but i think it's okay i think there's just some weird weirdness when i'm using this gap property because it's still kind of new but it seems to be working in the website itself so i think we're okay okay so now it is wrapping and this is just kind of an intelligent wrapping thing it's not really responsive because ideally you'd want the cards to sort of change with the width i think i need to set a flex property on the card itself too so instead of a max width of 450 um or i'll add a flex of let's say the minimum i want these cards to be about 300 pixels so i'll allow it to grow i really don't want to shrink less than 300 pixels and the flex basis or the default will be 300 pixels and then the width will be capped at 450 pixels so let's try that again all right there we go so now this is happening because of this so to fix this sort of gap here i'm going to center the cards so i can do that in the cards parent i will say justify content center okay so now it's centered so you can see as i change it looks looks pretty good and this the cool thing about this is that we didn't have to use any media queries to make this um responsive layout we're letting flexbox decide how wide the cards are going to be and where they're going to fit so they'll keep getting wider and wider until either they hit 450 or there's enough space to add another card column so here it starts at 450. as you get more and more space you can finally fit two cards at about 300 pixels wide and as you keep getting more and more width it'll keep growing until you can fit three cards so that's kind of how this will go so if you have a really wide screen you could probably fit all five cards in one row let's make the copy a little bit different just to test what the cards will look like and how they'll behave when the copy is different and i think that's one thing that's really important when you're working in a real world setting because a lot of times you'll get a design and it'll just have sort of the ideal the ideal text meaning all the titles will be you know just one line or all two lines snippets could all be the same number of lines as well so you won't encounter any problems that you might otherwise when the copy does eventually change when we use this for real so let's make some of the descriptions shorter and some of them longer so let's make this one longer so i'll say lorem times one this is gonna be more lines i think and then let's make this one shorter and you know again it's just good things to test just so you have fewer changes later on you know after your website's launched and stuff and we'll just kind of like randomly do some stuff here it'll make one even longer maybe not that long but let's try that maybe we should test some titles as well so okay we can see now the cards look different um this one is a mountain picture so let's see how about mountains and then let's make this next card card three a bit longer as well and what's that it's like a lake with flowers [Music] the most breathtaking view you will ever see so we're trying to force this title into two lines um there we go oh i changed four instead but you know it doesn't matter too much so now now that we can see how these cards look with different size of content we can immediately see that there's some things that maybe don't look great so for example this read more link it's just kind of following you know wherever the snippet ends i might actually make the read more bold just because font wait 700 there we go so let's just see a little bit more easily the problem is what we want i think is to make the read more be at the bottom no matter what so let's check out this one specifically if we hover over the card content you can see that card content is go all the way down to the bottom so to make read more at the bottom we need the card content to go all the way down to the bottom as well so i think what we can do is set the height of the content 200 there we go so now at least the parent is going to be go all the way down to the bottom and the reason it's taller is because this card has more copy so in flexbox it makes all the child elements the same height by default and i think you can change that if you want but by default they will be the same height which i think is a good thing okay let's set this height to 100 okay yeah now how do we make this read more go all the way down to the bottom well we can actually use flexbox for that as well so one cool trick with flexbox is if you set the margin so we want the margin above the readmore to be you know variable width however long it needs to be to put remote at the bottom and say margin top of auto and uh oh it didn't work oh i need to set the card content to be flex as well okay so let's do that so card content display flex it's also going to be flex direction column there we go so now this margin top auto thing should work there we go okay so we have our basic flex layout working pretty well it's responsive and everything let's add a little uh hover stator active state to the cards so what i want to happen is when we hover over one of the cards it'll sort of bump up just a little bit and maybe the box shadow will increase um i think i need to actually make the box shadow a little bit of a lighter color i think it's blending into the background a little bit too much so let's add this hover state and it's going to be on the card element itself so ampersand hover and for hover to move it up we'll say transform translate y and let's see we'll just move it up like negative one ram so about 16 pixels and then we also need to add the transition to the regular non-hover state so transition um we'll transform the transform property and we'll say 200 milliseconds and ease in out i tend to just default to ease and out for my easing that's kind of the speed at which the animation will happen all right check that out yeah let's now adjust that the shadow so i think we'll say 255 255 255 that's white and let's just make it a 20 opacity so maybe when we hover the box shadow will also increase so let's take this so also i think we'll just make this transition to be on all properties so that'll include transform and box shadow so if we want the glow to sort of increase a little bit we will increase the opacity to four and we can increase the um the range of it or the i can't remember what it's called um how far out it's gonna go so let's try that and see how that looks okay so you can see there's a little bit of a it'll make the glow a little bit more on the bottom so make this three and we'll move this down to two yeah so we can see it increasing you know it's just a little subtle effect we don't need to go overboard but i think we can pretty much consider this project done we have the responsive stuff this looks good no matter what size you're on has this you know fun little hover states um and we have the read more always at the bottom which is generally a good thing all right and that's it for building a card ui using flexbox do you want to see me build a similar card ui using css grid let me know down in the comments if that's something you'd like to see in a future video and as always thanks for watching and keep on coding