Building a Light/Dark Dashboard, Part 4

coming up with class names is a deceptively tricky part of working with css and if you're using sas and following the bem or block element modifier naming convention it can be even more difficult so in today's video i thought i would show you how i come up with class names for this card component in the front-end mentor challenge that we've been building and also how i structure all my styles in my scss files so to start off we have our design in figma open here and i'm going to before we start writing any code make some notes out here in the margins just showing you what i'm going to name each of the items in this card now before we get into that let's talk about what bem actually is so let's make some notes here with the text thing so bem stands for block element modifier let's move this over here so we can see better so block element modifier and what that means is when we look at the design we're not writing styles for every single element in this design you know all in one place what we do especially with our sas files and the sas partials is we kind of break apart each of the design components into their own file so we did this in the previous video creating these styles for the header and the toggle and they each had you know this the styles in the header were in header.scss styles for the toggle were in the toggle.scss file so you can see that sas and bem are a really good combination in terms of writing your styles in an organized and structured way so if we look at the design the block is kind of the name of the component that you're writing styles about it's the sort of parent component or the parent element so in our example here we're writing styles for this card so the block in this instance is going to be card so i'm going to say block will be card in this instance and then the element and usually a block will have more than one element inside it so the card is kind of the apparent and then the inside the card has child elements so for example we have you know the platform the social media platform and the username on the top then we have like a follower account and then we have at the bottom it's like a change in the number of followers for today so we have these sort of three elements here we have the platform then we have the count of followers and the bottom we have the change so those are going to be the three main elements that we're going to write styles for so the elements are going to be platform and then also going to be the count and then the change and this is just to start we're probably going to add some more elements later on as we go and then the modifier is a different style or appearance and that can be attributed to i think either the block or the element so for example if we look at the design the cards have slightly different designs based on the social media platform so you can see the facebook card has this blue stripe up at the top the twitter has a slightly different blue color instagram has this orange looks like it's a gradient as well and then youtube is red so you can assume that the different styles for each platform can be written in a modifier class so for example the modifier could be facebook for the facebook card twitter etc and etc now the other thing to keep in mind is when we're writing our styles we're sort of combining these things together and this is where you may have seen the whole underscore and hyphen thing so when you're writing an element you are going to start with the block name so card the card is going to have a class of card so all right card and then let's say we're writing styles for this top part let's say maybe for the icon so that could be another element so i'll just add this in our notes here icon so the class for this facebook icon could be card underscore underscore icon and then if we look at the design we can see that there's multiple kinds of icons based on the social media platform so in this case we could use a modifier so for example the card icon dash dash facebook would have facebook specific styles and then there might be some more generic styles for example maybe the width of the icon that we could put under card icon and we kind of just go down the line here so i might actually make some more elements as we kind of look in our design so after the icon there's going to be you know the username so maybe that could be another element so card underscore underscore username and then that's it for the sort of top part now the next section is for the follower count so we'll say card underscore underscore maybe count just try to keep things as descriptive as possible and then under there is this followers label so we could say card underscore underscore label now if we're looking down at the bottom it's this sort of change of number of followers either up or down today so we'll say card underscore underscore change and if we look at the design we can see that it's green if it goes up and it's red if it goes down so this could be modifiers since they're different styles of the change so we can say card underscore underscore change dash dash um i guess up and then it will also write some styles for dash dash down so this is starting to make sense how we're kind of breaking things apart and you might be wondering you know why are we even bothering writing these pretty long class names you know card icon facebook like why is that necessary why can't we just say you know facebook or icon without having this card preface one reason is that having these card prefixes for each of these class names it kind of helps to ensure that all the class names are going to be unique because if we're thinking about the website that has multiple pages and templates and styles there might be another icon element somewhere else in design that's completely different from what we're working with here so this ensures that these styles are writing for this card icon only applies to this element that has this sort of long class name the second reason that we'll see a little bit later when we're starting to set up everything in our scss files is that having this underscore with the prefix of card it works really well with sas and the nesting feature of sas and again we'll see this a little bit later when we start actually writing our styles but for now let's kind of go over and see if there's any more classes we want to make so i'm going to just mainly focus on this big card right now but we can see in the card below it that a lot of the elements are the same so for example the social media icon looks pretty much the same size we have in the big card the number you can see is actually different like it looks like it's the same font and color but it's a much smaller size and then the change looks like it's pretty much the same color and size as we have on top so for the number since we have kind of a bigger number up top and a smaller number on the bottom we can maybe make that also a different modifier for the count so let's see here so card count dash dash small and if we wanted to be really sort of detailed about this we could actually make separate ones for the big modifier and the small modifier and then we would have the styles that are shared by both big and small like the font family and the color and probably the font weight in the card count element selector so i think that's pretty good for now we'll probably be adding more styles to this as we as we get along but for now i'm going to start writing kind of just building out the structure of our sas styles so if we go to our vs code i did make a card.scss file at the beginning in the last video when i set things up this style rule wasn't really anything it was just for us to check and make sure that it worked so again the card is going to be the block so let's start adding styles for the elements so under card we got card icon card icon modifier facebook and then there'll be a different modifier for each of the social media platforms so let's start with that so card underscore underscore icon now in sas we have nesting which is a feature that native css doesn't have but this is what we can use the ampersand for so the ampersand symbol means it'll reference the parent selector which in this case is the card class so the ampersand will be card and then underscore underscore icon and then we can add the modifier class with another ampersand so this ampersand stands for card underscore underscore icon because that's the parent selector then we'll add hyphen hyphen facebook and we can do the same thing for twitter instagram and youtube so we'll just add those out here instead instagram and youtube okay so let's go back to the design so the next thing we want to do is card underscore underscore username so kind of in the same way ampersand underscore underscore username and we're really just kind of making our way down the design here so then the next one is card count with a big and small modifier so count and then in count it'll have a modifier of big and small i think that's it for the count then after count we got the card label which is that followers text so underscore underscore label and then at the bottom is that change number so it's changed with a modifier of up and down underscore underscore change then in change we'll have dash dash up and dash dash down okay so this is pretty much all these styles that we're going all the class names rather that we're going to be using for this card element and again we might be adding some more styles um because you know we can see that the cards are in a grid so we'll probably use either flexbox or grid to make sure that there are four columns on desktop and then of course when we get to mobile it's stacked to one column so we do need some additional styles for that but we might make some more generic class names to control the layout because i think i did add yeah so i have a layout sas file here so this has a container styles right now but we could add some more classes for you know a grid because we know that both of these are four columns on desktop so we can kind of use the same classes for the layouts for these cards but in terms of the cart specific styles i think these should cover most of the things we're looking for so going back to the card sass file and this is kind of the approach that i use when i'm you know building a website for work or whatever i just try to write all the different class names that i think i'm going to be using and all the different selectors and then i kind of fill them in as i build things out so now the next thing is we need to write the html markup for these cards so i'm going to split this to the right side so we can have html on the left and then the styles on the right so let's start adding markup for the cards i'm going to minimize the header here since we don't really need this so the card content is going to go in the main tag and i think yeah i added a section tag so i'm probably going to have each of these card grids in its own section tag so this will be one section tag and then the bottom grid along with this overview today is going to be another section tag but for now we'll just say section and we want to add a class of container and that's again to limit the max width of the content to 1110 pixels wide and center it so basically every section we're going to need to add the class container to that and this is similar to what we did with the header in the last video so in this section you know we might also add the classes for the grid for that four column look but we'll worry about that a little bit later on right now i'm really just focused on writing the markup and getting the styles working for one individual card and then we'll worry about fitting them into the grid layout afterwards so it's another thing i try to do i try to not do everything all at once like try to come up with all the finished markup and styles but i kind of break them down into steps so right now i'm doing the card don't worry about doing the layout later you could of course do this in whatever order you want you could maybe create a multiple card elements and then you know make make the grid layout work from there but when i have a group of multiple items i usually start with just one because if i create multiple divs for the cards and then things change because they probably will change because you know you're never going to get things perfect the the first time around then you're gonna have to go back and change the markup for all the three other card elements that you made so i just start from one i think it's just easier so here's the container now let's make our first div for the card so i'll say dot card this is using the emmet shortcut here it will just generate a div with the class of card now let's go back to our card sas file and let's see so at the beginning i'm going to handle the uh the blue bar at the top probably in the card element itself maybe i'll make a border a top of 10 pixels or whatever so what i might do is start adding the you know i might need to actually add some modifiers for the social media platform in the card element itself so it'll be similar to the icon but this is going to control the color of that bar at the top so for card let's look and check out what these styles are here so in figma we're just going to click in here and keep kind of keep clicking until we see that the element we want is selected okay so um i kind of want i'm trying to get this background color here i'm not sure if i have it selection colors looks like it's this sort of purpley dark blue gray thing is that right two five two before two let's just change it to red just to see if it changes blue okay maybe not oh i'm selecting the mask here so i don't want that um sorry let's see i'm not super experienced with figma so this is kind of weird so it's selecting the mask again i wonder if i accidentally changed something i think it's this color here so 8c98c6 so that's going to be the card background color so let's open the colors sass file here it looks like maybe dark text one does that seem right i think a text the text one might be this actual text color it's probably this dark card color here so we'll copy that variable and then in our card sas file we'll say background var dark card and you might as well say color it's going to be the dark text one okay now i'll start adding some markup to the cards so we can see we can start building things out so the next step is the icon and the username and i think i might need to maybe wrap them in an element so you might have to create another element here so i could just say card top perhaps so go card top i don't know if that's a great way of doing it but yeah we'll just we'll just do that um just seeing what i did here maybe we'll make it a little bit more descriptive because it's like what is this it's the the facebook and the username so like maybe the social media platform or whatever did i not write this in my notes i guess i didn't do that um so we'll add card platform and that's going to be the top element there with the icon the username so platform and then we'll add the markup to match that so card underscore underscore platform then in card platform is going to contain the icon and the username so card icon and then card user name there we go then move on to the next section so it's the follower count so card underscore underscore count so card let's score underscore count and in the count it's going to have the number and then the followers label so i think i need to put the card label inside the card count card label and then after that is the change and i think i can just do card change for everything card change okay so now we kind of have our html elements set so let's move the actual text in there so card platform contains the icon and then the username so username is here and then account is 1987. i think i'll just put it straight up in the card count element and the card label is that followers text and the card change is 12 today so we'll do that okay so this is the markup for our first card now we do need to add um card icon thing so i'm hoping that they've given us either pngs or svgs for this trying to select the icon itself oh yeah it looks like it's this could be an svg um can i export this actually let's see if they included that in the front of mentor images anyway oh that's a design oh here we go images okay icon facebook okay so we can use those so in the card icon i guess i'll add an image tag and we'll say images icon facebook svg and then in the alt text it'll be facebook okay so why don't we check out our website and see what it looks like oh and in this video we're going to use instead of firefox which i haven't using we're going to use this other browser called polypain and this looks different as you might notice um and the really cool thing about polypaint is that you can load multiple devices in the same view so it helps a lot with when you're debugging responsive websites and it's cool because it's like synced so for example if i click on the toggle here on desktop you can see it's also changing on the mobile and vice versa so everything's synced um also you know as we get more content on the page you can scroll down on mobile and then it'll also scroll and match it the position the scroll position on desktop and vice versa so you know i still like using firefox but i think when you're comparing the mobile and desktop views when you're developing a website it can be really helpful to have something like this so you can see both views so let's see where we are reload this okay so you can see the card here so it looks like the background color is correct with what we have in the design obviously we need to style a lot of stuff but the facebook icon is showing up which is great so the next thing i do is i usually try to get the layout fixed first inside the element and then i'll worry about you know the text colors and font sizes and stuff like that so if we look at the design for the card you can see all the content in the card is centered and then it's kind of spaced out it seems pretty evenly like if we click in here it looks like there's 28 pixels of space on top and 25 on the bottom i might make that the same just for you know make things a bit more consistent and make it maybe 25 on both sides let's look at what we got in our browser so obviously this card is going all the way across because it's a block element so if we do this and polypain is written in i believe the chrome uh browser engine so this is the similar dev tools to what chrome has here's card uh oh i made a mistake here color i forgot the var function there we go [Music] okay so because it's going all the way across i think i might just add some temporary styles to limit it so let's say card um width and let's see what we have in the design 255 pixels so ram 255 and this is a temporary style so i'll just add that so i don't forget to remove it later on okay so now we can see it's a little bit better let me zoom in a little bit so you can see that a little bit better okay so we got the card and we want to make things centered and then evenly space it out so let's maybe add a text align of center and see if that does what we want so that's pretty good so let's try that for now so text align center and then yeah so that's we're getting there and maybe we'll add some padding so let's see what the padding inside the card is 32 24 so maybe let's do 25 as the card padding padding rim 25 let's do it all the way around okay so it's getting there now things are centered but obviously this does not look super close to to the design the problem is i want the card platform to have the icon on one side and then the username on the other side and then card count and card change and then we want the same thing with card count where it's um one on the left and one on the right or no i'm sorry with the followers i think it's it's the followers text is under the 1987. so let's do card platform right now so again look at the design the icon is on one side and the usernames on the other side so let's see we could do something where the icon maybe we could say display inline block and then card username is also display inline block so that works to put them next to each other however we want to vertically center it so right now you can see the text is kind of on the bottom so i think i might need to use flexbox instead of inline block let's try that so we'll make card platform display flex that's pretty good and then justify content center and align item center [Music] it's like looks like the text is still a little bit to the bottom i wonder why that is looks like there is card icon is 20 by 24. the image looks like it's not going down all the way so i don't know if that's an svg thing or i don't know the images like that i'm not sure why it's adding that extra space at the bottom i wonder if i could just make the image the card icon maybe i'll try that so let's add the flex styles from card platform we'll try to fix the alignment on that image thing so card platform display flex and we want this to be the same for mobile and desktop so we don't need a media query here okay so now let's go back to our markup and maybe instead of a div class card icon we'll get rid of the div move the class to the image element itself so remove that and then remove that so the image itself and this might look weird i'm not sure if this is gonna work oh it looks good so now things are centered and we'll add a little bit of space i think let's zoom in here space so there is eight pixels of space to the left of the username to the right of the icon so i'm going to say margin right on the icon of 8. okay that looks pretty good now we need to style this text here of course so if we go here let's see looks like this is bold so let's check out the styles for the text oh yeah here we go text it's enter which is the font we're using everywhere i believe bold and 12 pixels [Music] so right now what do we have card username doesn't have any styles explicitly set and it's 16 pixels i think because i set um the default size is like one rem which is 16 pixels so card username needs to be font size 12 pixels converted to rem and then font weight is bold there we go that looks pretty good okay now let's look at the spacing i think we said 25 right oh 28 25 and 28. i guess we'll try to stick to the design so 28 on top so we want to add 28 pixels of margin bottom to card platform margin bottom ram 28 there we go all right now let's do the followers section so if we look at the design here this is obviously much bigger than the default 16 pixels it is enter bold and 56 and the color is white so let's do that and that is the card count there we go so card count oh yeah then we have the big and small version so the color is going to be the same i guess light background is white far light background and then the big modifier is going to be font size ram 56 and then i want to make sure that i did add that modifier in my markup so what i have to here because i have some styles for card count i need to keep that card count class and add to that and say big okay let's see how that looks um okay so obviously followers is too big but we can fix that later and this needs to be bold i'm guessing too font weight balls okay i think that's better i see this is a little bit big i'm zoomed in yeah i guess that does seem right now let's fix this followers text styles enter regular 12 and it's that gray color again card count and then label and then the font size is 12. and it is all caps but i'm going to do that in the css versus the actual text so font size 12 i think i said and then font weight's going to be normal and then i'm going to add a text transform and i like making things uppercase in css versus doing uppercase in the html because if things change later on and they want to not be all uppercase you're gonna have to go back and change all the instances of the uppercase to regular case and i'd rather just be able to remove the text transform if they ever want to not have uppercase okay so we're getting there might be some letter spacing going on too this seems pretty oh yeah here we go five pixels of letter spacing see i gotta say i have used i've used adobe xd most of the time when i'm working with design files just because that's what the designers would give to me this is the first time i'm using figma and i do like a lot of the things they give you it's a little bit more intuitive in terms of getting the styles out like i could be wrong but i don't remember seeing some of these it's not an export panel the ui is just a little bit different and i love how figment gives you the actual css for stuff i don't think i could be wrong i don't think i ever saw that in xd um unless it's just a feature that i never found out about but another kind of pain point with xd when i was using it is the letter spacing thing because they if i can even get into here but like it's telling you here the letter spacing is five pixels i'm not sure what units they were using in adobe xd but it was like i think they're using maybe an illustrator thing which doesn't really help for developers because i would just basically have to eyeball it um and again maybe there's some kind of conversion or whatever but it was a different number different like there was no unit for letter spacing so i'm really liking figma all right enough chatter okay so the number looks good the follower sex looks pretty good let's check the spacing right now so i think line height here maybe should be one that's a bit closer let's see what the what it says here nine pixels oh this is a letter spacing of negative two pixels so let's add that in [Music] count i'm negative two and i'll set the line height to one and then for margin bottom i think it was eight i think i said let's check that nine okay is this working let's see oh i need to add the margin to the top of the label because it's inside the card count so margin top there we go it kind of seems like a lot because there's already space from i guess the the line height i think maybe i'm having issues because i put the label inside the card count because i was trying to make things a bit easier on myself um [Music] but yeah i usually yeah i might need to add another selector here for the the number yeah so let's do this let's make this oops let's move this here so card count is just encapsulating 1987. card labels here and i'll put both of those in a new parent element and we'll call this card underscore underscore followers and we'll move both of those in there okay and then we'll add some of the styles from the account probably followers so followers oops followers and then i personally like using margin bottom versus margin top just because i try to keep things consistent with all my elements and only add space between elements by adding a margin bottom to the first the element before that's just a personal preference okay see how that looks okay not bad i think so yeah we got the margin bottom there i feel like there's still a little space even though i set the line height to one so i think i might just need to maybe reduce this so instead of 9 pixels 4 pixels see how the design looks so things aren't always perfect in terms of what is in the design versus what ends up being in the browser so it's that much space here that seems okay so we'll change margin bottom to four pixels okay seems pretty good is this centered i can't tell seem centered okay i think it's centered and then let's add space under the followers and before the change so followers miss 25 so we'll add that space to the followers selector so margin bottom ram 25 i think is what it was okay looking pretty good and let's add the 12 today styles so in the design it is green and that's going to be for the up modifier but let's add the styles that are shared with both the up and the down styles so they're different colors but everything else is the same so let's check out the font styles for this it's inter bold 12. okay let's do that so for the change font size is 12 and then font weight is bold and then we'll add the colors here as well um what colors is lime green i think yeah that must be it so color far lime green and since we're hearing might as well add it for a bright red too further down oops far bright red um why is this not styles aren't coming through card change oh i didn't add the modifier thing the card underscore underscore card underscore change dash dash up there we go now i know this might seem really like extra to have these two classes here um what you could also do if you don't want to do that is do something like this where you only include the modifier class in your markup but then for both up and down you could say extend a card underscore underscore change styles so let's save that and what extend does it will just copy the styles that are in whatever selector you say so you can see here oh did i save the html no i didn't and if i did things right things will still show up oh there we go so card change up and now we see that it is using the styles the problem with this is that and this is kind of where people just have different opinions on things but a lot of people don't recommend using the extend rule in sas because you end up adding these styles to three different selectors you're adding it to card change then you're adding it to card change up and card change down versus if we went back to what we had before change get rid of this save both of these things then what you have is it looks the same but you can see the styles are sort of separated out so it's like card change up it only has the lime green color and then the other styles that are shared with both the up and down styles are in card change and you're not having multiple selectors for a given set of rules so it just kind of helps to keep your css a little bit more compact obviously you know the trade-off is that now instead of one class you have two classes in your html and some people you know they don't like doing that but i think i i used to use extend a lot because it was handy for this very purpose but i think you seem to be careful when you're using it i'm kind of nowadays just using these multiple classes in my html even though it seems kind of lengthy just because i would rather have my css be a bit more structured and not you know unnecessarily share styles between selectors of course this is my own preference if you want to use extend you know you're more than welcome to um just if you do make sure you're not using it with super super nested selectors and that's one of the guidelines when you're using sas actually is that i think they recommend not going more than like three layers in so card is the first layer and then these elements platform as a second layer and then icon the second layer and then the modifier in the element is the third layer so you don't want to make too many nested things because that just makes your selectors and your final css really long which can make your file bigger and it can make things a little bit more confusing when you have a lot of different styles and a lot of different selectors so we're actually doing pretty good here um i think for this change we do need to add that arrow icon that we see here um so it's obviously an up arrow for the up and then down arrow for the red and let's see if they oh yep they gave us an icon up and an icon down svg which is interesting let's see if the color is included in here oh yeah it is that's probably why they did that down icons there um another approach you could do if you're trying to save on svgs is just have this one icon up and then set the fill based on the css class and then you can use the transform to rotate it 180 degrees for the other class but obviously this works just as well and then that way we don't need to necessarily create additional css styles for the up and down versions so i think we're gonna do is in here it's sort of like what we did with the icon up at the top so we had an image with the icon then we had the username so we might need to do the same thing and add a few more um selectors here so i'm going to say image source let's see if i can get away without having to create a new class for this um images oops images and then icon up shoot there we go no still getting used to this new keyboard that i got um the placement's a bit different from what i was using before alt up arrow okay so i think what's going to happen is i'm going to probably have to create another div to enclose the thing the 12 today similar to what we did with the follower count just to make things align a little bit more neatly vertically so yeah you can see the icons at the bottom and you know i could do something like you know position absolute top and then set like a very specific pixel with enough to set the parent to position at relative so it doesn't fly up the page so you can kind of center it that way but then of course you need to when it's positioned absolutely doesn't take up space on this on the page so we'd have to say something like oh man i don't even know if it's gonna work but display inline block and then set padding left to something i'm just using pixel just for the ease of it and then you would position the icon left zero pixels you know and just kind of eyeball it to center it but i feel like that's kind of a lot i try to avoid using position absolute unless i really have to i feel like you could just as easily fix this by using you know flexbox which is i think what we did here with the the facebook icon and the only difference we'd have to do is create another div here for the 12 today content so we'll create a new selector card underscore underscore number for lack of a better word there we go it's 12 today so now we can set card change to display flex and i usually try to put my flexbox and or css grid properties first but you can do whatever order makes sense for you okay now this is a problem because having an image as a flexbox child will make it stretch automatically unless you explicitly set align items i think so let's see if that works align items center there we go if you don't explicitly set a line item i think it'll say like stretch as it yeah so you can see that so we just hit line items to center and everything's happy let's see if it actually tell us let's look so i uncheck this so this rule won't take place let's check the computed and see oh yeah all in items is normal which i'm assuming is stretch based on what we just saw here so we'll do that justify content center because by default justify content will be at the beginning select start so we don't want that so press enter add those files to card change as well and again we're sort of grouping the flexbox style rules together okay looks pretty good i think we need to add a little space between the arrow and the number yeah so let's double check that four pixels so what i want to do is maybe add a margin right to the number so under card change underscore underscore number and you'll notice that in my style i sort of try to follow the order of the elements in the html markup so because card change comes first it's the parent two card number i'm putting card number after the card change um set of rules so what we're gonna do oh yeah add space so margin right and it was eight i think i can't remember let's see four wow totally off man i'm so glad i added this ram function to convert from pixels to rem rams for me because if any of you watched my previous selling through previous videos i would always have to pull out my calculator every time and it was kind of a pain okay that margin right is not working and i think it's because i have an image tag which is by default display inline i think so i need to set it exposed to display block in order for the margin to happen oh that didn't work at all oh you know why it's because i added it to card change i'll add it to card number yeah i wanted to add it to the image tag here so i could create another class here card you know card underscoring a score arrow or whatever but sometimes i sort of balance out creating you know the need to create new classes and new selectors with using an element selector um especially for images so this image tag is in the card change div so if i add image tag there there we go save that and it's i know this style rule is only going to affect image tags that are inside the card change div so you can see again that using bem really helps to avoid you know conflicts in naming because everything is a very unique a unique name there we go so that space looks a lot better this card's looking pretty good let's see what else we need to do here so we got all the main elements here i got the padding set i think we need to do a little border radius here you can see the corners are slightly rounded then we need to take care of the bar oh hello now let's see where it tells you about the border it's mixed okay that's how do you oh gosh um we'll tell you the border radius rectangle oh it looks like it's five five pixels corner radius that's what they call it corner radius so corner radius of 5 which is border radius in css speak of the card so go all the way back up to the card selector and we'll go border radius oh gosh i can't type at all rem five and it's i think the same all the way around okay so we can it's kind of hard to see this but you can see that it is a little bit rounded now we want to do the stripe so let's see how tall this is maybe this is it here we go four pixels tall so let's just try and see if i can add that through border border top um 5 pixels so round five solid and then we want that facebook color so facebook okay let's see if this works oh wait need to be dash dash facebook oh come on there we go now we can see everything all right let's check our browser okay that didn't do anything really let's try reloading hello did i add it to the right place in card oh card facebook i didn't add the modifier here we go so card facebook all right now it should show up oh there we go it looks pretty good yeah it looks very close to the design i'm pretty happy with that okay so now let's create the other cards and the good thing is now that we know that this is correct we can just copy and paste these selectors here so in container is the card element so i'm going to go like this um is that right yeah so one two three so when i save this and you know i might honestly add some space just to be able to parse it a little bit better myself so now we should have four facebook cards let's remove the space here from the change element just so we know what belongs to what card okay so now we should have four facebook cards on our website okay and we do now of course we didn't add the grid stuff you can see they're trying to sync the scroll it's a little bit buggy anywho let me think about this so yeah let's just let's do the grid layout now so obviously we mentioned before this is going to be four columns i guess we can add the space between them 30 pixels i would usually use maybe grid for this but i think you can also use flexbox i think the main advantage grid is had over flexbox among other things is the gap property but i think flexbox is slowly going to get the gap property let's see let's see if that's available can i use dot com oh so gap actually is used in flexbox unless you're using ie 11 but if you're using i11 you're gonna have way bigger problems than flexbox gap so let's just see how this looks with flexbox just because we did use grid for i think the header stuff so we're going to add the grid stuff in the parent section tag which is the container so i guess i'll have to add another class to make this a flex parent and because we know there's a two sets of grids so the top card is in the bottom cards and they're all using the same four column layout i want to reuse that class so let's add a new class flex dash parent um and then in the layout sas file we'll add another set of rules here for flex parent and it's stacked to one column on mobile so the display flex needs to be in our break point nixon medium display flex now see what we got all right so now they're all on the same line which is good let's kind of focus on the desktop version for now and we want to add space so we'll say gap of ram 30. now we have a nice cap now let's see if it really goes if they only add the gap space to the between the items suite oh it's interesting chrome doesn't have a flexbox inspector i guess we don't really need it since we can obviously see it's working um cool this will add a gap i think um between rows as well now let's see how it looks on mobile oh not great so this needs to be centered i'm assuming yes you can see here so how do i want to center these i could center them by saying card margin auto but then to add space i would have to say like margin 0 auto 30 pixels auto but then that would this would need to be only for um small and then it wouldn't happen on desktop so i'd have to cancel it out on desktop which is a little bit annoying so i wonder if it might be better to use flexbox for mobile also but have it be wrapping and maybe i'll do that okay let's go back to here i need to flex parent because it's a little bit too generic because you know i'm using flexbox in multiple places let's say cards oh gosh um card grid this is one of those things where you know i don't know what the right name for this is um card grid i think what i would sometimes do in the past is because everything's in the card styles here i would do something like card underscore underscore grid and then add some more styles here which works with the bem stuff it works with the bem approach that we've been doing but then kind of goes against my my personal approach of having this the order in the sas file follow the order in the markup so it's kind of weird to have the parent be a child the parent and the html be a child in here i could also just break another rule and instead of having this be the car be the only block i would add cards and then make this class name cards so there's a lot of different approaches i mean honestly you know what is what's the easiest to understand and just kind of maybe pick an approach and try to be consistent with that i might just do cards in the html class in the html yeah class name and then add just another selector here just for cards so that i'm not polluting the layout styles with something that's specific to the card grid so you know you can kind of see it's a little bit of an exact science so we wanted to move the display flex to mobile also and then flex wrap we want to allow it to wrap and then i guess we'll move the gap property up to mobile 2. we'll probably need some more styles in here so i'm just leaving the the break point there um what's the next thing we want to do if we're using cards to use flexbox what we could do is set flex direction to column for mobile and then for medium and up we'll say flex direction is row so that way it'll stack reading flexbox actually stack the items so now you can see it's stacking nicely and we have the four columns on desktop now obviously this needs to be centered i think let's go back to the design uh here we go mobile so it looks like the mobile cards are going all the way across they're wider than what we have on desktop here this is 326 and this is 255. um so i guess what we could do is have the cards be 100 with on mobile and then maybe on tablet have it be two columns and then on desktop be four columns would that work let's see so i think i had this temporary thing here so i think i might need to cap the max width of the cards well let's just see what happens when we remove this i think things might be strangely yeah this is a bit weird i need to i think set the card widths on desktop to 25 oops 25 um so i think what i should do to do that is card um and set the flex property to one so flex of one means each flexbox child which is each card has the same ratio of dividing up the horizontal width with each other so that means since there's four cards they'll each get 25 percent of the total widths and now it's going all the way across which is good so i think maybe that can just fix our problem for us um but we'll have to test on tablet and see how that looks okay let's just see what happens flex of one i'm not sure what it's gonna look like on mobile but we'll find out okay desktop looks pretty good mobile also looks pretty good so let's add a new layout for tablet how do i do this oh it's interesting create three panes from website breakpoints let's see what happens when you click that [Music] whoa [Music] below 640 and then ems of 40 which is sort of tablet and then the desktop that's pretty cool i think it must have read my styles yeah that's pretty interesting okay this is 480 width which i guess would be a very big phone i mean i guess that's okay what you could do is set a max width on the card and then sort of center it but is everything else in the mobile design centered no it is left aligned so it might look weird if the cards are centered but then the text is like aligned to the left this is pretty wide for a phone i think yeah maybe we'll change this manually to the 11 change this to a tablet size um i'm not really familiar with tablets but i guess this one seems okay oh boy oh yeah that's that's different happens with the ipad 810 yeah still doing the stretchy thing and then desktop is fine i think the mobile styles are okay um we'll just have them go all the way across now for tablet i don't know if we would really want the card to go all the way across like this um it's because i turned flex wrap on and actually wonder if i don't want flexbox scrap on if i don't do that then it's too wide to fit so i do want flexbox wrap but what i would like is to have it be maybe two columns on tablet so let's kind of test this out in the browser so flex of one is for mobile and this is a shorthand property that will take up the flex grow flex strength and flex spaces so flex basis is the default width and it's zero percent um when you just set using the flex shorthand property flex grow is the sort of the speed at which the element will grow in width to fit you know the apparent width and the shrink is how much it'll shrink so what i think i want to do is um to limit it to two columns i could set something like a flex basis of 50 i think and then don't let it grow so set flex grow to zero oh gosh don't tell me no 50 i want it to be two columns but i think maybe the gap property is making the 50 percent be too much yeah oh that's annoying that's not cool i think css grid won't do this like i think if you set the gap property and see that's great it'll just sort of nicely fit everything since he says grid if we did that we would set the grid template to one column for mobile we would set it to two columns for tablet and set it to four columns for desktop and that's kind of looking a little bit better than what we have here yeah let's let's switch over to um css grid for this oh boy so displaying grid i think gap still works for css grid grid template columns is i guess one fr for mobile and then for medium we'll say grid template columns is repeat 2 1fr so that means that there will be two columns 1fr is sort of like the flex amount ratio so the space each one will have the same amount of space and then we'll do include breakpoint large grid template columns we'll save four repeat four one fr so they'll be the same width in four columns and we'll delete this flex one thing i think that's all the flexbox styles we added okay oh boy you know as much as i like flexbox i think grid definitely has some advantages so now this is very easy it's four columns on desktop we got two columns on tablet and we got one column on mobile nice so the layout looks good i'm happy with that the next thing i want to do is add these styles for the other social media platforms so let's go into our markup and the first card is facebook and then second card is twitter instagram and youtube so we're going to change the modifier classes to match and then also the image obviously so this is the first card the facebook card and here's the second card so card twitter and then change the image next one is instagram [Music] and then last one is youtube [Music] and i think there's some other copy we need to change too so twitter is 1044.99 today [Music] go back up here 10 44 99 today and we're just hardcoding these values if this was you know an actual app you know using data and stuff then we would use you know the framework or javascript and the api to generate the numbers here but we're just using hard-coded stuff is 11k and then 10.99 today 11k 10.99 and what you might do if you are generating a data from somewhere is in order to be able to target just the number when you're changing it you might do something like wrap it in a span and then you could target the card number span child and then make that the number but we're not really worried about that right now so we'll just kind of leave it like that okay and then youtube is eight two three nine one forty four eight two three nine one forty four oh and it's down so down and down and down and then we'll have to um i think add some styles for the different modifiers too let's just see how this looks right now okay cool so yeah icons are showing up um and you can see we did other styles for the down so it's red and we just need to add the styles for the top bars so because we have nicely organized our styles in our sas file we can just look down our file and you can see card has this modifier here oops so we'll just copy that and paste it here and then replace the colors and i'm assuming the colors have been named you know with the name of the thing okay let's see if that worked oh okay instagram didn't work for some reason instagram let's check our colors um oh instagram start and end oh right it's a linear gradient uh let's go to our design again kind of take a closer look at this it looks like the grain's going from left to right sort of and it's angled up a little bit um here we go oh there's three colors in there oh gosh oh so glad they do this this is amazing it's seriously amazing i'm gonna copy that um [Music] can i put a linear gradient in a border top i guess we'll find out i'm not sure if you can oh boy yeah i don't know if you can oh yeah oh man this might make things a little more complicated than i was sort of hoping well it didn't make an error so let's see yeah it didn't work yep just let's look this up css linear gradient in border i'm pretty sure this doesn't this will not work probably need to fake it somehow let's see yeah they're using pseudo-elements which i think is what i'm gonna have to do i mean it looks really cool okay um i feel like they didn't give us the colors we wanted or like there were three colors when i look at the design so right that's the instagram end color okay and this is the five the middle color is not listed so we'll just have to add that in copy that okay and the angle is 225 degrees so let's think about this i want to add it in a pseudo element so we can't use the border thing so let's comment this out okay so with the card that has okay so with the card with the modifier of instagram we want to add a pseudo element that will look like the border but it's not a border it's a pseudo-element so let's get the pseudo element working first so we'll put it in the before pseudo element now for suit element you have to set the content to something whether it's an empty string or something else otherwise it's not going to show up at all on the web page and i learned that the hard way okay so for suit element content is blank we'll set the height to i believe it was five based on what we have up there width i guess will be a hundred percent and i'm gonna have to set this to i think position actually let's just see what happens if we don't have anything i think i might need to use position absolute for this but i'm not sure i'll set the background to what was it instagram start and we'll just worry about the linear gradient later we're just trying to figure out how to make this element at all for instagram so again we're kind of breaking things down doing things step by step so the first step is just getting this pseudo element working okay so here it is um what is zero why is that maybe position relative we have to set to display block oh there we go that worked oh my gosh and the other problem is because it's relative the padding in the card is limiting the width of this so that's kind of annoying i mean i guess i could do manually add the padding in so it would be calc 100 plus i think it was 30 pixels so times 2 is 60 pixels um but then obviously i'd have to i think i might have to do position absolute and then width is 100 and i think i need to set this to position relative to limit the absolute thing because otherwise if you don't set the parent of an absolutely positioned element to position relative it's going to just sort of keep going up your tree until it hits whatever position has position set um or it'll just go all the way up to the top and the body that's why it was so long earlier so pushing absolute and we'll say left of zero top of zero the problem is we want to it's not taking the border radius so i think i need to set overflow to hidden there we go now the other problem is i'm a little worried that because it's positioned absolute it's not actually taking up any space on the page it's just kind of like floating wherever you stick it so i think that's made the content in the instagram card go up you know five pixels so i guess we could fix that by setting me the padding top of 1.5625 grams plus 5 pixels or we could try doing something like add a margin top to take up that space a margin top of 5 pixels so that seems like it's better it's a little hacky but i think to make this linear ingredient work we kind of have to do that so let's do this so card platform is going to have a margin top of 5 pixels and then i'm not saving because it's going to automatically update my styles and update this website and i want to make sure i copy everything so the card we'll just set all the cards to this relative and overflow hidden because that's not a terrible thing it would be a terrible thing for all of them to have that and then the before element is all this stuff here okay i didn't add any of this to the styles yet so card oh i did here it's everything under background um content height within background it says the position absolute stuff okay save that i like putting the position stuff first after content and that's like putting width first okay i think that is that the same i can't even tell let's add a guide and vertical guided 100 pixels i can't see anything um let's get rid of these other ones here okay guys hover over the rulers to show a guide on the side of the guides and never displaying any pixels it is click anywhere on the ruler to add a permanent guide there okay so hover over let's go to the desktop view power over the ruler oh there we go these aren't perfectly lined i think it's because of the icon height oh man okay so let's fix this my guess is the icon of different heights so it's like slightly misaligning and then of course this one is like really different so first maybe i'll set a height for the platform element yeah this is 20 pixels let's see how tall twitter one is just testing my theory that the icon height is responsible for the weird alignment yeah it's 17. so i think i need to say which one's the tallest one instagram looks pretty tall 20. youtube is youtube is 20. so if we say card platform height is 20 pixels and you can see the twitter one kind of went down a little bit and let's see i'm just doing this to sort of debug make sure everything is centered correctly that seems good so we'll set height of 20 pixels for card platform here we go height round 20. so now you can see that um so everything except instagram looks pretty good so for instagram what happened to that margin top that i set five pixel i think oh i need to be specific to instagram duh so maybe card instagram card platform pay for card instagram i'll add a specific padding top of 0.5625 plus 5 pixels rem there we go cool thing about calc is that you can combine units so i think this is awesome so go back to card and originally the padding was ram 25 so we'll just have to remember that and we'll see oops padding top calc is the ram 25 let's see if this works plus ram five okay there's no error which is good see if this actually happened looks a little bit more centered which is great i think i added it to the here we go the padding oh didn't work oh golly that's really 25 pixels plus 5 pixels which is 30 pixels wait i can just do ram i don't need the calc i'm dumb ram 25 plus 5 is 30. so 30. there we go there we go okay there we go so now we use the guide here this is actually a really cool feature of polypain um making sure things are aligned yes everything is centered now this is a wonderful day okay so we go back here tab looks pretty good mobile looks pretty good so there's padding around everything okay i did notice that i forgot one thing um the instagram card i just put that temporary orange color and it's supposed to be a linear gradient if we look at the design again see it's supposed to be this thing here so let's put that in let's go back into our code so i had set the that color bar on the top of the cards as a order top but for instagram because it's a linear gradient you can't make a border like a linear gradient you have to use this sort of hack you work around and put it in a pseudo element so here's the temporary color the background thing so i think i can just replace that with the linear gradient that i copied from the design file so we'll just copy that and then let's comment that out for now you're the linear gradient stuff and we want to replace these with the uh variables that we made and let's just go back and see what we did okay so it's instagram start instagram middle instagram and so copy that first one um actually it looks like this might be i might have it backwards so i think this is the end middle and then start let's try that oh yeah var and then middle and then end let's make sure we're not throwing an error okay good so there we go and what this is saying is the linear gradient i think if you don't set um some of the parameters like the angle it'll be like a horizontal gradient i believe um right but you can set options so like this is 225 degree angle so you know it's slightly angled up i think um and then we can set as many colors as we want and then the percentages sort of tell you where that color starts so let's load the website again see if um oh nice that was pretty easy right i just had to i think it's one thing i'm really liking about figma how you can just copy these styles from figma itself like it has that export option yeah so cool okay so that was a little small thing that we forgot last time and another thing that i want to sort of update here is in poly pain it's a little bit of a pain for me to have to like try to horizontally scroll between the different things so if you go up here i've set on horizontal layout but i think i'm going to try let's see what vertical does i guess that sort of works if you want all the same page and then there is focus so you can it creates tabs for each of them at the top which maybe i think i might like this better yeah let's stick to this one the vertical one also seemed pretty cool okay let's look back at the design and see what we want to do next and i think we need to work on the other grid of cards down there so if we look at that second grid of cards it has some of the same items as the top row of cards as we mentioned earlier so like the icon and the number for the percentage change um is the same um there's a new thing it has a subtitle for page views so we need to figure out how we want to build this out and each card is divided into four i guess you could say four quadrants it looks like so i might use something like css grid to create a template where it has two columns and then two rows yeah let's do that with css grid so let's take a look at the mark up and figure out how we want to build those that second grade of cards out okay so this section tag is the first row of cards let's kind of minimize each card so we can take a better look at everything so what i'm probably going to do is create another section tag with the same classes because the container class is what sets the max width and centers it on large viewport centers it on large viewport widths and the cards class i believe if i remember right yeah so this one sets a display of the creative cards in a four column layout on desktop two column and tablet one column on mobile so yeah i think we want to create another section tag has the same classes so section dot container dot cards and that generates that for us and then each card will have the markup for each of the items and i think what i'm gonna do is let me think about this do i want to just copy this and then just change it or do i want to start from scratch and i think i might want to start from scratch because the design is pretty different like these top cards everything is just in one column and centered versus this grid down here so i think i can probably reuse this card class let's see so the card class it has the background color which is the same the color of the text the padding border radius and then the text line is center which i don't need but we can take care of that later but i think there's enough properties here that are shared between the top cards and the bottom cards that i'm going to want to use the same class for that then we can differentiate it with you know either a modifier or a helper class so yeah let's do that yeah this stuff is just all pretty different um okay so some space there so with this second set of cards i'm going to do sort of what i did in the previous section and i'm going to start just building one card out and then once i have that set make sure all the styles and everything are correct then i will you know copy and paste to create the other the other cards so let's make our first card so card i'll start at the very beginning um and then we'll move the markup into there so it's page views the facebook thing the number and then the change so i think this is what we want for the first card now here's where i need to figure out how i want to lay out this stuff so what i think i'm going to do is create a grid template for these second cards now where do i want what should the class name be for this and where should i put it in our sas file so if we look in the card sass file we had these modifiers for the top cards to control that um that colored stripe at the top and i think i might do another modifier for the grid inside the individual cards and you know this is again one of those situations where there's not one right answer at least in my opinion you could do this you know multiple different ways so i think my options are either creating another modifier to make that grid layout or i could create a helper class so meaning instead of doing card and then let's say we make a modifier class for card dash dash grid for lack of a better word and then making this be another modifier here we could do a helper class which is doing something like i don't know card desk grid so this will be the second class name and we'll set all those grid styles in this card grid class and it's kind of the same thing i think maybe for readability because we have these modifiers already for the different social platforms i don't know if i want to just add another modifier maybe that would be better in terms of the bem approach but i think yeah i don't know [Music] yeah the name the naming and organizing part of your styles i think is maybe not the most difficult part but it definitely takes a lot more thought than you might think at the beginning trying to figure out what do i want the class name to be and where do i want to put that okay i think i'm going to try to stick with the um bam methodology and just say card dash dash grid and make that another modifier here so that way they're just all like under the card selector here okay so now that we have this selector let's just save that really quick and then i think i'm planning to put each of these things in their own child div of the card grid so that they can be you know laid out in the grid template so let's think about this card grid and then in the card grid will be the children and what i'm sort of thinking through in my mind right now is if i create a separate div with a unique class for each of these things then that's going to create more classes and stuff that i'm going to have to create like would i have to make another element in here i'm not really sure alternatively i could do a completely different approach and put all these grid styles in a new sas file and call it card dash grid and do something like this or it's card dash grid make a new sas file called card dash grid scss and put all the styles for that in that new file and that is actually sort of appealing because then i'm separating out the different styles yeah so it's just one of those things where you just got to kind of choose choose one approach and and just follow it yeah i think i might want to do that just because adding more modifiers and elements along with the existing card element and modifiers i think might make things a little bit too confusing yeah let's do that i don't know if that's the best way but i think i'm going to do that so we'll make a new sas file card dash grid scss and i do want to note that the single hyphen is not something that's really part of them but i just do that with names that are a little bit longer i could say card grid with no hyphen but it makes a little bit more readable so card grid is going to be the block name for this so we'll save that and of course since we made a new sas file we need to forward card dash grid there we go okay yeah this feels a little bit better i think just separating things out will make things less confusing hopefully when uh when if we have to go back and change things so we're gonna do this card grid and then in here so we could say something like uh card dash grid and that's the block underscore underscore for the new element and for the first one we'll say maybe username and then this will go in there and then maybe maybe because the con that's not super long we'll just do it like this oh i guess prettier just automatically modifies it like that okay and then card grid underscore underscore number i think and i'm sort of using i want to use the same element names as we had up here um yeah so let's follow our account and then platform and username and this is just so um actually i don't know if this is going to i don't know if this is a great thing because um i want the styles from the cardboard username to actually be similar the same as card underscore underscore username right because they share a lot of the same styles so i think i need to separate out just the styles for the grid stuff with the card grid thing but for the child elements i think i need to do you know card username and then the number so this is the number here let's make sure it matches up with the selector up here so card username and then card followers card count big so i think i wanted to do card count small for these cards here let me just double check and make sure that's the class i made um card count small yeah so we're going to use that here so i hope that makes sense but i'm trying to put all the styles that are shared between the top cards and the bottom cards in the card sass file because otherwise i would have to if they have a different class name like card grid underscore underscore username or count or whatever i would basically be having to copy and paste the styles over there so i would rather they just have the same classes and keep everything as minimal as possible so this is just this is pretty normal back and forth when you're building something because you don't always get it right the first time so there's a lot of trial and error okay so this is better and to take care of the the grid child items because you know i do need to set some grid styles for these elements here i'm going to put it in card grid and i might do something like just you know nth child one and child two three and four so that i don't have to create additional classes for these in the card grid so i don't know if that's the right thing to do but i don't want to create more classes than i really need okay so attend 44 followers so look at the design oh this is interesting so i think this is going back to some of the accessibility things that i mentioned in the research video because this is just giving you the icon for the platform and this is just giving you the number it's not actually saying you know username here and then this many followers and i'm guessing they included that in the copy because wait a minute is this even the right copy so the second the second card here is supposed to be pageviews87 i might i don't know if i copied the right thing i might have just copied what was in the first card oops 1044 where'd that number come from no this is from twitter 11k 8239. oops yep i copied that wrong so kind of forget everything i just said um oh my gosh all right delete that and then we need to find out where the copy starts for these second cards so it starts with this sub headline overview today and that's here okay so this stuff i don't need okay so the overview today the sub headline i'm probably gonna make that an h2 tag because the social media dashboard that's in an h1 tag and you want to kind of keep the hierarchy going down the page um so because this is a subtitle it's a bit of a smaller font so that sort of tells you that it's a sub headline and you only want one h tag per page so this is going to be an h2 tag and we figure out where we want to put this because in the grid thing in the container cards grid each of these divs each of these child divs is in the grid so i feel like i want to include the h2 tag inside this section but um you know i obviously want it to take the full width of everything not be part of the card grid so let's think about this let's go back to the cards rule here um here we go cards display grid yada yada yeah so all the child elements in cards is going to be part of this card grid so what i could do is move the cards element to its own div here so then in here is where the second row of cards would be and then that way when we add this h2 tag with overview today it won't be part of the grid it'll be full width and its own thing so yeah okay now in this first card we want to add mark up four page views the icon 87 and then the three percent so i don't get confused again we're gonna oh man he keeps doing that um let's just move this in here okay now we want to create a div for each of these things so pageview is going to be the first child and the second child is the facebook icon i believe yeah so let's just copy it from where we had it up here um here we go oh what did i do okay and then 87 will go up here and then three percent will go in the last child okay so now we have our first card obviously i haven't really made many styles here so you can see um hold on i can't see that okay i guess i need to go back to let's go back to the horizontal thing i'm such a vertical also have this horizontal scroll [Music] i guess i could do that and there's space for the screen can't put it on the left side this is annoying so you can't see this i'm going to just quickly add some temporary styles to boilerplate and i'm going to say [Music] min height 150 vh so we'll hopefully add some extra space there we go yay all right here we have the card and everything's showing up it's taking the card styles so now i need to add the css grid styles for the grid part so it's going to be card grid so in card grid we'll say display grid because we're doing the grid for all breakpoints mobile tablet and desktop we'll say grid template columns oops template repeat 4 um i guess 1fr and then grid template rows and we'll do are they the same it's probably the same repeat 2 1 fr i just kind of start with this and then if we need to change it we can okay so now let's see if i change anything here oh something's wrong so that space shouldn't be there okay cool there we go oh wait i want two columns yeah there we go two columns all right so now it's in the layout general layout that we want let's copy over some of the classes that we created for the top cards so that they'll be in the bottom cards now so the first one was the page views i actually don't know if that i think that might be its own style [Music] let's see let's enter bold 14. so i think we might need to create a title for that you think about this [Music] card subtitle let's put it at the top so subtitle font size round 14 font weight 700. and then for the card icon [Music] see where that was your card icon um i don't really need this margin right thing because that was just for the main card so i wonder if i'd just leave it without a class what that would look like [Music] it actually seems okay so let's just leave that um and 87 that's the number so before it was card count card count big so we'll do this and then instead of big it's small because the number is smaller and we already already created this style here small so we just need to add this style for a smaller number let's enter a bold 32. there we go and let me just make sure what it is on mobile 32 okay it's the same [Music] and then the number thing and that was card change i believe yeah card change card change up and then card number it's only two dibs i think actually i need i will need the image too uh where was that here we go and then card number and there's no today thing and then we need to add the class for the card change card change up all right now let's see what we got okay so we can see these styles are taking effect and they pretty much match and this number is smaller here which is good let's see what else we need to do i think we need to align the things on the left to the left and align the things on the right to the right yeah um the pattern looks about the same 24. so it's about the same the top card see i think we're just gonna align things to the right to the left and the right and then the top row looks like it's aligned in the middle vertically and the bottom row looks like it's aligned on the bottom so take care of all those alignment issues here let's go into card grid and um so i'm gonna do is i don't wanna create i mean i guess i could say card subtitle there yeah so let's do that we're going to create rules for card subtitle card count card change within card grid i don't know if it's the best thing to do but at least it will be a little bit more descriptive when you're looking at card grid yeah let's do it now i might be string a little bit away from strict uh beem format here but i think it's okay oops where i do card subtitle card count card change uh subtitle card card change oh yeah and then the image um should i add a class on that i think i didn't want to because this is adding new styles that i don't need so because there's just an image here um actually i think i do need to add a class here so i can identify it um this one was card platform card icon i could reuse it i guess um card platform was a parent div which is the same hierarchy as what we have here so card platform what styles did i write for that platform oh yeah i do not want this because this is a lot of this is the flex stuff that made this centered vertically see i don't want that [Music] i wonder what would happen if i just had an image by itself without having this div the wrapper div what am i doing here there we go let's see if this messes anything up okay i guess that looks okay so let's add some of the alignment issues let's add some of the alignment rules to the card grid so justify content which is the horizontal since our grid is going this way justify content i want this to be do not space between it's a flexbox thing but let's see if that works oh that did not work hmm online items that looked like it worked yeah so oh wait a minute let's turn on the grid uh card grid there we go all right what's going on here um i turn online items centered in the cell oh this is because i did um it's making both rows the same height because they're both 1 fr and they're taking the height from this 87 thing so okay there's a couple problems here one that i think the card may not actually be tall enough it's 122 pixels right now and it's 125. it's actually pretty close so maybe i don't need to worry about the card height but i think i need to align each cell individually if i'm not mistaken okay let's just go to css tricks grid guide css tricks has these very very very helpful resources for flexbox and grid so let's see let's look for justify okay so justify items and justify content so aligns grid items along the inline row this value applies to all grid items inside the container start aligns items to be flushed with the start edge of their cell oh this is what i need to do so i think justify content is the cells themselves justify items will align each cell content within the cell so let's do that let's just see what this how this works um i think it's supposed to be start okay this is gonna line everything to the left if if this works okay yeah looks like that's what's happening so i need to align the other things to the right so this is going to be the image and then the change so i can override that with justify self end for card change let's just make sure that's working okay that is working and i think i might need to do a compound selector here so image comma card change so this will affect the image tag for the icon and then the card change div as well okay good now let's use this handy little guide here and it does look like it's centered vertically which is great and then here it's like sort of i think they're both on the bottom let's see oh i guess it's centered um let's see if we can do this card number um align self and oops oh geez oh it's a not card number card change oops what is going on here okay so i'm going to do card change and then card number i think it was for the 87. let me see if i even got that right card count don't quite look the same i think maybe because this is sort of determining the height of each row and i want to get rid of that for sure margin bottom yeah margin bottom so card count and card change will be aligned self end um [Music] card count i want to get rid of that margin bottom zero and then card count card change align self end okay i think that looks better so yeah so the top row is centered vertically bottom row is aligned to the bottom okay great let's check the height of this card too 114 so i think i need to add some space between the page views and then the number yeah there's a lot more space here you can see this 20 21 so i will add space and i kind of want i don't want the first row to be the same height as the second row so i think maybe i think there's a property called like fit content or something that didn't do anything what if i do auto just the oh that actually kind of worked okay good so now the rows are only taking the height of the content in the row so let's change that so in card grid grid template rows repeat to auto okay good and then now i can add the space with the gap property so gap um i think it was 24. let's double check that 21 and the whole card we want to be 125. so we can adjust that oops um what the gap property's not working oh i think i did something wrong oh it's not using the um it's not taking the function it's also not throwing an error which is weird i think i didn't remember to add this util thing because that's where the ram function is but i'm really surprised that it didn't throw an error in gulp okay now the space is there interesting okay let's check the size of the card 123. maybe we'll add two pixels to that to make it 125 to match the design there we go all right looking pretty good not bad all right let's add the other cards to our markup so there's four times two there's eight cards oh wait i forgot the subtitle let's take the styles here enter bold 24. actually looks pretty close um i guess because i made that in h2 so since it's an h2 tag i'm going to put the styles in the typography sas file there we go h2 font size rem 24 it says 24 on desktop let's see if it's the same on mobile slightly smaller 24 nope it's 24 all the way around okay so that makes that pretty easy and i might need to add a margin bottom to this 24 margin bottom and let's check what it is on mobile 27. usually you have more space on the desktop version let's just say 24 for both i think that's close enough okay all right that's looking pretty good cool cool cool cool okay i think that is good for this card style so let's go close these things out and so here's the card grid sorry card card grid so this is for the facebook card so i'm just going to two three four five six seven eight so let's see how that looks noise yeah looks good cool and this is the benefit of creating styles that you can reuse because i created all the grid styles for the cards for the top row and i can just reuse the same classes for the bottom row so it makes things efficient and also makes things easier on me i don't have to you know write the styles every single time so now we just need to update the copy in each card to match the design so second card is likes 52 it is still facebook 52 and it's a down of two percent and then we need to change this oops i changed the wrong one i think i'll just move that up there we go okay and it's likes instagram five four six two five four six two and percentage was two two five seven and it's green okay then the next one is instagram again so let's copy this and it is profile views instagram and then it's 52k 1375 percentage change and then this one is retweets 117 303. 117 303. and it's up then likes also for twitter uh 507 and 553. okay and then youtube like ooh their youtube's not doing so well youtube likes 107 and down 19. seven down um what was that 1 19 there we go i think i need to change the down arrow for the other down arrow the alt text okay and the last card youtube total views let's copy the youtube icon 1407 down 12. and then down that let's cut the whole selector there 12. okay and i guess i can just delete this alrighty looking pretty good it's two columns yeah one column on mobile suite yeah i mean that looks good let's go back to the design make sure we didn't miss anything yeah it does seem like it's matching design pretty well and i do need to do the hover state so let's do that so the hover state is on the cards when you hover over a card it looks like it just changes the background color let's see if anything else changes three three eight eight three three eight five five okay three three eight five five when you hover it doesn't look like there's anything else like it's not scaling up and there's no box shadow at least that i can tell okay so it's really just a color change and i'm assuming this is the same color three through three a five five yeah i think that's kind of it for [Music] the hover states so let's find out what that color was 33855 so the dark background was there is that right [Music] uh what is this in uh hsl it's kind of funny i wonder if you can do hsl in uh figma to hsl you know actually i can do this in vs code i'll just do a test color here test and then we'll click on this and click this so it's 228 25 27. it looks like this is a new thing so i'm gonna say card hover and then we'll move this down where the card styles are maybe here so i might call this dark card hover there we go so now we can copy this variable go to the card sas file so here i'll add a new selector for the hover um sudo element or pseudo class i think is what it's called suit elements are the before and after and then hover is a pseudo class background var dark card hover to make it look a bit nice we'll add a transition on that background 150 milliseconds ease in out this is kind of my default animation timing so now um do any of the colors of the text change when you hover let's find out color is 8c98c6 8c98c6 so it's the same color okay so the text colors remain the same it's just the card colors that are changing when you hover cool and then i wonder if i should add a cursor property to card too cursor pointer so this way if you hover over any part of the card it goes to the hand and i'm assuming that's going to be because if you click on one of these cards it'll give you some more details about the analytics or whatever so okay this looks pretty good so we've pretty much gotten all the cards built and styled out according to the design so the next step is going to be we need to look at some of the accessibility things that we researched in our research video for the screen reader only text um and then we can start working on the light mode and getting the toggle working for switching between dark and light mode and also with the system preferences so that it'll be dark mode if you set dark mode in your os and then light mode if you said light mode in your os but it also gives you control if you want to explicitly change this website to dark mode or light mode cool [Music] you