Can I Create This Tricky CSS Vertical Timeline?

in today's video we're going to be building out this vertical timeline style that you see here this is a design created by philip lester on dribble i'll leave a link to the actual design in the description so you can check it out this is a really common design you're going to see all over different types of enterprise applications and consumer facing applications knowing how to build something like this isn't really important but this video is going to be a bit different than usual because instead of me just going along and showing you how to build it i'm actually going to be building this live from scratch so this is the very first time i've tried to solve this problem so you're going to be able to see my exact thought process on how i approach all the different problems i'm going to leave it mostly unedited i'll only skip or fast forward through the really boring parts where i'm stuck on something if that happens [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner and today we're going to be approaching this vertical timeline and this is the first time i've seen this problem so i'm going to be approaching this as if i was solving any normal problem in my day-to-day life so you can really see how i approach problems and use that approach yourself to get started obviously we need an index.html file and we're going to need a styles.css file for all of our styles and in our index html let's just get some boilerplate code running and we're just going to link our style sheet here so let me just do a link tag oops or css and we'll just make sure that's for our styles css and there we go that's pretty much all we need to do to get our style sheet linked up to our html and then the next thing i want to do is actually approach the html for this design now you'll notice in this design there's a bunch of things like a sidebar in this header in our video here we're not going to really worry about that the only thing i care about is this vertical timeline right here because this is something that's usable in tons of different applications and you'll notice there's a few different main parts each section essentially is one day so we have like today is a section yesterday as a section obviously you'll probably have like last week last month as other sections we kind of have these sections that have this header that has a title for the day it actually has the date on the right hand side and then down in the center of it we have all these different icons for the people and then the notifications on the right as well as like the time of the notification and the details of the notification so when i first see this i kind of think okay i have different sections my top section here is going to be like for the day and here we have our second day then inside that section we're going to have a header and then we're going to essentially have a grid of notifications and the reason i'm saying we have a grid here is because i'm going to use css grid for this at least that's what i think i'm going to have essentially one column on the left for all the images and a column on the right which is going to contain all of the different notifications that we have let's kind of get started styling this out i'm going to focus just on this grid portion here first and then kind of add in the header stuff in a little bit we're going to have that grid of notifications so we'll just say oh notification grid there we go so it's going to be a div and this div is essentially going to have two separate columns one for the icon and one for the notification let's say like avatar here is going to be for our icon and then next to that we're going to have our notification card let's just call it that for now so we're just going to essentially repeat this multiple times so you know we'll have however many notifications we have we'll have one avatar and one icon here so like in this example we have four different avatars four different notifications just like we have over here but now i kind of want to style out what one of these is going to look like and then i'll copy it down in our case this avatar here it doesn't even really need to be a div we can just make this an image because we're just going to have an image that is going to contain our avatar and it's going to have a source on it and that source we're going to get from unsplash because that's a great place to get free images that we can just use so we'll say unsplash oops unsplash source api because i never remember what the url is just click on this link here and what we can do is we can just copy this as our source and then we can just come in here and change this to a unique id so let's just come search and splash and we're going to search here for let's just say avatar person and there we go we have a picture right here that we can use and if we just copy the id and paste that down in our source for unsplash and we go back over to our page which we can open up here using live server we should be able to see that we now have that avatar showing up and there we go we have that image showing up and we can do that for any image we want now add a habit there i accidentally stopped my recording because my plan was to move this over to our tab here there we go we can close out of this you may see me do that a few times this video i out of habit close my i literally just did it there again out of habit whenever i make a mistake i stop recording so i may do that by accident here but i promise you i'm not looking anything up i'm just accidentally stopping the recording so continuing on we have our avatar done obviously there's no styles but that's okay let's move on to our notification card and inside of here we're going to have a few different sections we have this icon on the left hand side let's just say that we're going to have an icon then we're going to have like a title let's just come in here with the title next thing that we're going to have after that is going to be our date or time so we'll just call it time and then finally we're going to have the content and some of these don't have contents like this one has no content this one says like more standardization of headers and so on so that's kind of the style that we want to go with and i'm not going to directly copy the actual content of all of these different cards here i'm just going to show you kind of how i would create it myself because maybe you don't want to have all these fancy arrows and stuff in your cards that's perfectly okay now you will notice that these cards are kind of laid out where the title the icon and the time are in one row i'm going to actually wrap these in essentially like a header class we'll change the names of these classes as we go this is kind of just a placeholder and then we're going to have our content after that and that's because i'm going to use flexbox to lay out this header so we can have our icon on the left time on the right and then this middle section is going to be for our header which is going to fill the rest of the space now the next thing that we need to focus on is actually going to be styling this and adding in some content we need to have an icon here as our first place so in order to get an icon a really easy way to do that it's just going to be used something like favicon we'll just search for favicon here or not favicon i'm sorry it's font awesome there we go so we're going to font awesome and we're just going to search for an icon let's just say bell there we go and we can just find a free one so make sure we search for free only and here we go we got a bell that's perfect so what we want to do is we essentially want to copy the svg version of this i'm just going to scroll until i find the svg version of this i haven't used this in a while here we go download svg and yep i agree to contribute and then we can put this where we want to so if we just come over here and copy the relative path i'm sorry not the relative path the main path paste that in here oops copy path paste there we go and we can paste that icon in there so now once we have that what we can do is we can come for our icon we can again just make this an image it doesn't have to be a div again we want to make this as semantic as possible which we'll do as we go and we'll make the source of this that bell icon right there now if we save come back over here scroll down we now have our bell icon obviously all these images are way too large that's again fine for now now next move over to here we're gonna have our title let's just say something we'll just say like john liked your photo there we go perfect and for the time let's just say 9 00 a.m doesn't really matter we'll even format it like they do like this and inside the content of this we'll just say the photo of you and a dog was liked by john it doesn't really matter this is all again just placeholder text that we're using to figure out how this design is going to look and this right here is essentially all i need to do to create a notification now we should be able to copy this down and create multiple notifications but what i want to do is make sure when i style this first it looks good before i start doing all the copying next let's go into our stylish css we're going to have our notification grid here and this is going to be for our display grid and one thing i want to do with our images for now i'm just going to change the width like 50 pixels and the height to 50 pixels for example let's just go over here just so we have smaller images which is going to make working with everything else much easier while we're trying to lay things out so for our notification grid let's just change our display here to grid and then we're going to want to have a two column layout so we're going to say grid template columns this is going to be two columns the first one i want to be essentially auto sizing so if we look here we have our images and we could make this an auto size like this and then size our images or we could say like it's going to be 50 pixels wide and then make our images 100 of that width it probably doesn't matter so let's just go with 50 pixels here then the next size we want to have is going to be one fr that's because we want this content section to essentially fill the entire remaining space that we have now we have our two columns if we come over here we should see that our image is on the left going up 50 pixels wide and then all of our content is on the right filling up the rest of the remaining space now let's actually style out this notification i think i called it notification card and we can just style this as a card we can see that the background color here is going to be white you can also see the background of our body is a slightly off white color so we'll just say our body here has a background color we'll just do like f-a-f-a-f-a let's see how that looks i'm over here that's not quite as dark as i would like so let's do like f three maybe a little bit darker that's pretty good it's a little bit darker as you can see we kind of have this white section here if i zoom in you can kind of see that this is white and the background behind it is a little bit darker it might be hard to see on youtube but it's there and the next thing we do is just round those corners add a little bit of border we'll say border is one pixel solid and let's just use like a gray color let's say 777 and we'll say border radius is going to be like 0.25 rem see what that looks like as you can see that that looks pretty good actually it's pretty spot-on obviously i'm zoomed in right now so my sizes are a little bit bigger just makes it easier for you to read in my opinion and the next thing we're going to do is the icon which has that same color as our border so let's actually set up some css variables in our root and we're going to say here like this is going to be like our off gray color so this is going to be like our subdued color we're just going to make that 777. obviously these names aren't perfect but when you're doing a first pass it's pretty hard to get perfect names so we're going to do our subdued color there that's because a lot of our colors such as our icon color are going to be that subdued color so for our icon here we want to have it be that color this icon is actually supposed to be a svg so if we come over to our svg we can actually copy this svg go into our index html and instead of having our image here we can paste that svg and then give the svg here a class of icon and the reason that i'm doing this instead of using an image is because now i actually change the color of my svg oops i stopped the recording again by accident because i was trying to think of what to do but obviously i can't do that so here we go icon we want to change the fill i believe it is to be that variable of subdued color and hopefully we come over here that will change the color of our icon obviously it does not so clearly that's not working let me just inspect here see exactly why that is we can say here svg has a class of icon we're setting the fill of it here maybe we have to set the stroke that is not it i believe phil is how you set the color of an svg here our fill is set to current color i wonder if we set fill here to be that 777 okay that does change it so instead of setting it on our svg let's just set it on our path so we can say icon path set the fill to that and if we just refresh to make sure okay that has persisted so now we have that fill color showing up on our bill icon and we can change the size of this let's just say our width is going to be i don't know 20 pixels maybe and we'll do height 20 pixels and this needs to be on the icon itself will compare icon and you have a width and height of 20 pixels there you go that looks pretty good it's not perfect but hey good enough for now next thing we need to do is make sure everything's on the same line so if i go over to our index here we have our notification header here which actually set this to notification header as our class and copy that and we'll just come in here notification header and this is going to be a display of flex there we go that's going to put everything hopefully on the new line if i spell notification correctly there we go of course it's not putting everything on the same line so i must have spelled something note to there we go now they're on the same line just didn't spell everything properly now we have everything right here showing up on the same line we need to space it out though in order to do that we want this section our title to be essentially flex of grow if we come in here i think i called it title we can just say flex row one and there you go you can now see that this is taking up as much space as possible which pushes this time section over here all the way to the right hand side of the screen and our icon is obviously still on the left i don't really like using the class of title here so let me just come over to where we have this and let's change this to notification title and we're going to change this time to notification time just so we can have a little bit clearer case of what these different classes are doing so notification oops i cannot spell notification title there we go make sure i spell this right and there we go that fixed it right there just again so we have a little bit more clear idea because if we go back to our example we have titles up here and times up here that are not related to notifications so i want to be able to easily distinguish which one is which so now let's actually work on our styling for our colors as you can see here we kind of don't have like a quite black color we have maybe like a slightly off-black color we're just going to have a color up here we're just going to call it text color and this is going to be our default text color which we're just going to make like 333 so it's not quite black but it's not quite going to be super light either and maybe we'll even do like let's do 333 and see how that looks so we're just going to go into our body and we're going to change our color to be that variable for text color if we come over here we can see how that looks you can see it's just not quite as dark not quite as black and we can make it even lighter if we change it to like 555 for example now you can see it's even lighter and it really depends on how similar you want to make it to this design what you want to do as you can see here that 555 is pretty accurate maybe the 777 should be like 999 it should be a little bit lighter maybe this is more similar to the actual colors that they have in their design so let's just go with it for now now if we go and look over here you can see our time is the same color as that subdued color so we can just come down here we know that we have our notification time we can change the color here that subdued color now when i save this we go back over here you can now see that color has changed to the same color as our border the same color as our icon it just has that light or gray color which is really good and the next thing we want to work on is the text for our content inside of here you can kind of see it has a background on it which is a little bit of a cool touch so let's just come in here notification content change that class include notification and then our styles what we can do is we can just say that we're going to have a background color our background color let's just say it's going to be our subdued color see how that looks for now over here you can see that's way too dark so we're obviously going to want to have a light color for this and we're just going to come in here we'll say like aaa yeah that looks still too dark ccc that's still probably a bit too dark maybe ddd there we go let's say that's the color that we want it's pretty similar to the color that they have over here it's maybe even a little bit too dark again so we'll do like f three f3 f3 that gives us the same color as our background is that about what they did here it's pretty similar to what they did there maybe we'll just stick to like f zero zero f zero there's a little bit darker than our background there we go that's what we'll go with for now now to finish off our card we're obviously going to need a bunch of padding and spacing so let's come in here we'll do some padding we'll see our padding will be like 0.5 rem let's see how that looks as you can see that gives us some space around the tops and bottom and if we compare it to this it's similar to what they have here they might have maybe slightly more padding so let's maybe change this to like 0.75 rem so that looks like that maybe looks like it's pretty good the most part especially if i zoom out to a hundred percent yeah i'd say that's not too bad let's zoom it back in so it's a little easier to see and the next thing we want to do is we want to space out the content in the top from this content in the bottom down here because as you can see they have spacing between it and they have space in between the icons and so on what we want to do is take our notification header i just want to space out all the items inside of it now i'm not sure if the gap property is supported in chrome we'll see if it is we'll just say like 0.5 rem and save we'll come over here okay we can see that that is supported without that you can see these are really close to each other but with this gap property you can see we now have 0.5 rem of space between all of our different items which looks pretty good in my opinion it's probably pretty similar to what they have over here if we zoom out you can see that looks pretty good i kind of like that also we should probably make this font size slightly larger for our title i don't know if they did that here or not but i think it would look good if it's just a little bit bigger we'll say font size here is like 1.1 rem so it's just going to be slightly bigger maybe like 1.25 rem now let's do 1.1 it's just slightly bigger there we go we'll go with that for now okay now the next thing i want to do is want to give a little space on the bottom of our notific actually on the top of our notification content the margin on the top here let's just say like 0.25 rem and maybe we'll do 0.5 rem there we go that just spaces it out from the bottom of our title up here and then we obviously need to style this to be a little bit nicer looking in my opinion so we can add some padding of like .25 rem just a small amount of space and we're going to use a border radius of 0.25 our am kind of use that same rounded corner if we look over here you can see that that looks pretty similar to the content that we have over here very similar i mean it's not perfect but really the most important thing to focus on in this video is going to be the vertical timeline with the line that goes through the avatars and the sections that are divided an actual card design in my opinion is not as important because that is going to change drastically based on what your actual project needs are i think this card is good enough for what we're trying to do now i'm going to focus on this avatar to try to give it the actual shape that we want pretty simple we just want a circle here and we wanted to have this white border around it so we'll scroll all the way up we have that avatar i think i just gave it the class of avatar let's say here width is 100 and wherever i set my images to be a 50 pixel width and height we can get rid of that so here we have our width as 100 what that looks like as you can see it's just filling that entire space which is good for now we want to have a border radius of 100 to make it a circle and we want to have a one pixel solid white border and that's just because we look over here you can see we have a white border around these images it actually looks like maybe a two pixel border it's a little bit bigger than just a one pixel border and we'll say for now that's good enough and also you'll notice our image here is kind of overlapping our content on this side we need to just set up a simple order box here so we'll just say star here r before and star after change our box sizing to border box and as you can see that has fixed that problem what border box allows us to do is it's saying hey when we calculate the width and height of something we want to include the padding and we want to include the border this single line just makes working with css so much easier and i almost always include it in every single style sheet i work on there we go that is essentially all we need to do for this section here now the next thing i want to work on is actually going to be our grid and make it look a little bit better so let me come over here i'm going to do is i'm just going to minimize this notification card down i'm going to copy it a couple times copy it down like that let's get rid of the content in one of these let's just say this has no content let's say this has like a really long content we'll just whoops put a bunch of content inside of here actually it'd be a lot easier if i just did this with a simple lorem 20 there we go now you can see we have our content kind of showing up and of course it looks like i didn't copy over my avatar and okay yep i didn't copy over my avatar so let's copy that over as well avatar here and avatar here there we go fix that problem so you can see we have all of our cards laid out and it looks pretty good overall obviously we need some spacing though so let's go over to our grid right here our notification grid let's say a gap of like 0.5 rem that's spacing all these out by 0.5 rem from one another and as you can see the gap horizontal is kind of large so let's actually make our gap maybe like one rem i think the first number is the horizontal distance it is not so let's swap that around there we go now you can see we have more gap between them left right and less gap between them vertically but it looks like the gap vertical is also pretty large so maybe we'll just do one rem in both directions there we go that looks very similar-ish to the design that we have over here and i kind of like how this is doing so the next thing we want to do is going to be this line that goes vertically through all of our different timeline piece this is going to be a bit of a tricky one to do but i have a few different ideas for how i can do this the first idea that i have is obviously going to be just coming into your index html and adding in some divs that represent these lines i don't like this idea because it's kind of clunky that you have all these divs all over the place that represent your lines and also it's not very like responsive as if i add a new card i now need to add in these new lines so i don't like that idea the second approach that we can do is add like before and after content to the avatars themselves so the before would be the line going up the after would be the line going down that's a pretty good idea that we may go with but the third idea i can think of which is the one i'm going to try first would be just creating one line that just expands the entire height of this grid so it's going to be in column one from row one all the way down to the very bottom row and we may have to do some tweaking to make sure it doesn't poke out below the bottom image but i think this could be a really good approach so what we want to do inside of here is we're going to come into our notification grid and we're going to create an after element for it or before it doesn't really matter we're just doing before that way we don't have to worry about the index stuff let's say our content here is an empty string to create something and what i want this to be is essentially going to be a gray line that's going to span all of the different rows so i think i can say something like grid column i want it to be in the first column if i say grid row i want it to span from row one to negative one and i should span the entire height if i get a background color of red and like a width of 100 and a height of 100 let's see what that looks like if i come over here obviously we don't see anything let's actually see what we're looking at if i come into my notification grid oh and actually i want to make sure i position this absolutely so it can show up behind everything inside of here i think i need a position relative as well there we go so now we have essentially a red icon showing up it looks a little bit weird so notification grid i believe okay this should be notification grid before that should hopefully fix some of our problems there we go so now it's spanning across one column going across all the rows okay so it's in our first row across all the columns which is not quite what we want we want it to be spanning vertically instead of horizontally let's see what the issue is here if i go to that before element you can see it's spanning the rows from one to negative one that should be correct and it's only supposed to be in column one maybe we have to say like column one two that should hopefully only span the first column there we go i want it to span all the different rows but it's not spanning all the rows for something do i say 1 3 1 4. okay that's correct but one negative one is not working i think the reason this isn't working is because the grid doesn't know how many rows there are yet since we didn't actually define any rows in our grid so if we come up here you can see we defined our columns but we didn't define any rows let's say if i do like a grid template there's like a grid auto rows yeah let's just set this to auto i think this is the default let's see if that changes anything and make sure i set this to be one slash two okay that did not change it interesting because i want this grid rose to essentially span the whole height of my grid but i don't want to hard code i don't want to be like four you know hard code it like that because obviously that's not going to look but it's just not going to work as well if i have to hard code it like that so i don't like that idea i essentially want to i wonder if like negative two no that wouldn't work one to negative one is just staying in the first one because it doesn't know how many rows there are i wonder if there's a way to get around that let's just try some googling real quick so we'll say css grid row negative one or let's just say span all rows with auto row okay yep that's what we're doing but i don't know if there's a way to do with the auto i believe so maybe there is actually there most definitely probably is i just don't know it unfortunately so let's just try to go with a different option here we're just going to make this be a position absolute just like we had before um we're going to put it in that first column that's fine and i guess if we don't define the row it just spans all the rows so i guess problem solved because we're getting it with the height 100 and we're saying only be in the first column so it's just going to span that entire height that is that is good okay that's that's good i guess um let's change this background color here to that subdued color we'll just come in here with that subdued color and then what i want to do is i want to change my width because i want it to be small we're say like one pixel maybe two pixels there we go so it's just going to be essentially this one little line right here it's very very small and this is that subdued color right here okay and then the next thing that i want to do is i want to make it centered in this column so i believe if we just put the margin of zero in auto that should center it maybe it's auto zero never remember which direction okay of course that didn't do it let's uh so i believe actually the reason this is is we need to set the left to zero and the right to zero so that it spans the full width of that uh column right here because right now the width is only two pixels and now if we set margin to zero auto there we go it's perfectly centered itself so really what we did here is we set a left and a right so that way it says hey fill this full container and then we said margin auto which says hey center yourself inside that container now we have a line that's going through this entire container let's put like a z index of negative one on here i want it to show up behind these images now we have that effect where the line is going through them but there's a couple problems here first of all is we need the line to expand out the top and obviously it's stopping at the very top and we don't want it to expand through the bottom of this image because as you can see here it's not extending down through the bottom of this image so let's see if there's actually a way to fix this issue using the techniques that we're using right now without having to resort to like before and after pseudo elements i'm not sure if there is a way to do this because we essentially want something on this last avatar and not have anything below it otherwise this looks really good i want like the grid row what happens if i set the grid row to like negative one to negative two that do anything no even if i go to yeah that doesn't do anything like negative one to negative one if i do like one one that's just going to be that first row okay so i'm not sure if there's a way to get rid of that bottom section i kind of forgot about this bottom section here about how that could be a problem actually i wonder if we set our uh grid what is it like uh align items flex start okay that didn't fix it i was thinking maybe it's set to like stretch on this column so it's like stretching out but that obviously doesn't fix it because we don't really have any rows here so i guess probably what we're going to have to do is resort to the before and after pseudo which is not quite what i wanted to do but it's probably going to be the best option because otherwise we're going to be stuck with this sticking out through the bottom and obviously that's not something we want what we need to do is we need to take our avatar we're going to get a before element and we're going to have an after element we might even be able to do it with just a before element but essentially what we want to do is we want to have something sticking out the top all the way up to meet the one that comes and connects to the bottom so this avatar here we're going to have let's do the after first i believe that's going to be a little bit easier we're going to have some content on this there's going to be an empty string a lot of this we can copy i'm actually going to copy everything from here and paste it down and for our avatar wherever we have that at inside of our code here we go let's set the position here to relative that's going to be important get rid of that relative here and get rid of that here then let's comment this out okay there we go now we have our avatar which has an after element which should helpfully have all these different properties and if we just inspect we can kind of see what this looks like so if we go to our avatar oh and since our avatar is an image it can't have an after element so let's just change our avatar to be like display block display a block hopefully that'll actually no that won't work because images just cannot have anything in them so let's just create a div here that wraps this there we go hopefully that will fix our issue this div we're going to give the class of avatar get rid of that class in our image hopefully that doesn't break anything of course it does now we're going to find where avatar is we're going to get the image inside of it and apply all those different styles and then our avatar here is going to have that after element we can get rid of display block up here we already have okay and we want this position relative to be on the avatar itself okay there we go that's good so essentially all we've done by uh wrapping this into the div is allowing it to have an after element since images are self-closing tags they can't have children which means they cannot have before and after elements i'm going to do this for all of our images i'm going to wrap them inside this avatar class there's a div and then get rid of that class on the actual images itself yup that has fixed itself so now the next step that we need to do is essentially make it so that this after element is going to fill the full height because right now you can see it's stopping once it gets to the gap which is obviously not good we need to make it expand a little bit further so what we can do inside of here is we can just say that we want to add some extra height to it so if we just kind of minimize all this get rid of that we don't need well we do need our margin auto and actually our left and our right do need to be set so that's good the index we do need okay and then we have our height here and this is going to be where we change up things instead of the height actually we can leave the height in that's fine what we need to do is we need to specify a top and a bottom so our top here we want to specify as uh zero let's see what zero would look like that should hopefully go to the very top there our image there we go if we set the top to one hundred percent okay that's interesting so that's going to be going to the very bottom of our thing here if we go up to our notification grid we change our line items to flex start okay there we go now let's inspect this and kind of see exactly what's going on i want to make sure i understand this so we have our avatar here and our avatar is slightly taller than our image and the reason for that is because our images display inline block this is a really weird bug that i run into that messes me up all the time with images if we change the display here to block you're going to notice that now our div and our avatar the same height the reason when you use inline block that you get this weird issue where the container is bigger than the actual image is because you have like spacing so like the actual spaces and text are causing that issue if we just change this to the display block now what's happening is our avatar by setting the items to flex start our avatar is ending right here at the bottom of the image and then by setting our top here to 100 we're saying hey start this line at the very start of your avatar right here say start it right there at the very bottom avatar and then continue onwards and this height is a percentage of our avatar size i believe is the reason why it's expanding down is set size i'm not 100 sure if we get rid of this height actually let's just inspect it and see where it goes to as we look at our avatar we look at the after element yeah this image i believe is just essentially the height of our avatar if we look at it's 50 pixels tall that's the height of our avatar and that's because we're setting the height to 100 what we need to do here is we have our top at 100 which is saying hey start at the very bottom and we want our bottom of this to essentially be at the bottom of our entire container that we're inside of so i need to think of how the best way to do that i guess the best way to do that would be to get rid of this align items flex start and make our top here be set to 50 pixels which is just the size of this container and we can set our bottom here to zero there we go that's going to span from the very bottom of the image to the very bottom of our card here this 50 pixels is like a magic number i don't like having this magic number here because if i change this 50 pixels it's going to change this 50 pixels here so i want to have a variable here we're going to call it like avatar 50 pixels and then where i use this 50 pixels i replace this with avatar size let's copy this down we're going to use a couple other places but right here for our top we're going to set that to our avatar size i believe that's the only place where we use this yeah i think so so now we need to do is we need to essentially make this expand all the way past this gap we have our grid gap which we can just set as a variable which we have as one rem i believe yep one rem this again is removing that magic number so now we can do is we can take a calculation where we're taking our avatar size and actually not not our avatar sorry down here what we want to do is a calculation where we take our grid gap i just want to multiply this by negative 1. this is going to seem really weird but when i save you're going to notice now this line fills that gap and the reason this works is because if we inspect this we can actually see what those computed values are so inside of our avatar inside the image here we got that after element we go to computed we can scroll down and we can search for bottom and you can see our bottom here is negative 16 pixels one rem is 16 pixels what we've essentially done is we said hey make it so our line starts where our image ends right there and we want it to end wherever the end of our gap is which is right where the next image starts and the reason we calculate that as the end of our gap is because bottom zero means end right here when our card ends and if we increase our gaps i'm sorry if we increase our bottom by making it more negative it's saying hey do you want to drop down below where zero would be and if we want to drop down by the exact amount of our gap we just drop down by a negative number which is the exact size of our gap it's going to go directly to where this image is same thing with this one and same thing with this one now all we need to do is we need to take our avatar which happens to be a last child and we want to get the after element here we essentially want to remove it we'll just say display none and of course that didn't quite work i think i believe the reason for that is because we want to get the notification card that happens to be the last child and inside of that we want to get the avatar and that avatar should have no after that again did not work it just uh actually maybe it would be a notification grid all right let me just inspect our html to see what we got so we have a notification grid okay and inside the notification grid we have our avatar so it should be the last avatar child but i see our notification card comes after our avatar that's the problem okay how to get around that i essentially want to get the second to last child i think i can do like nth last child there we go and last child this says get the second to last child and uh we want to get the one that isn't avatar we want to get the after let me just copy this just so it's styled a little better i believe this will work okay there we go so what we've done here is we said hey i want to get the second to last child in our grid that happens to be an avatar we can even get rid of this.avatar and still work but this is just to make sure it's only our avatar and the reason we have to do that is because our notification card is the last child and our avatar here is the second to last child this just removes that final line that comes afterwards here so now we can actually work on removing or adding i'm sorry the line that goes to the top now in order to add that line what we're going to need to do is add the entire header section this section right here so let's go into html and add that we have our grid now the next thing that i want to do after our grid is let's just like kind of create a section we'll put everything inside this section so this section is going to be for like today or yesterday each one is going to be its own section and let me just get all this indented properly so like this believe that is close enough to indentation and here we want to have our section title or like our section header we're going to call it like a header or like group header i kind of like that a little better inside this group header we're going to have our day or we'll just call it uh title group title and this is going to say today and then we're going to have our group date this is going to be the date we'll say tuesday oops july 11th 2021 there we go so this is going to be our group header and then we have our notification grid directly below it i think that's all we need what we can do inside of our styles is start styling all that and let's get rid of this out code don't need that we have our group header which we're going to make display flex so everything lines up and side by side there we go that's what we want it to be like we want to say our justify content space between that's going to give us as much space between these elements as possible and then we can say hey we're going to have some border on the bottom one pixel solid and let's just say it's subdued color there we go and also one thing i want to do is we're using a two pixel border for our vertical line here i'm going to change that to be one pixel there we go just so it's going to be the same exact size as all of our other borders i think it'll blend in a little bit better that way now we have that section over there here see what we've got we obviously need to add some pain on it so let's say we want padding to be like 0.5 rem it's going to space our text out from our line as you can see here we have space between our text and our line we'll do 0.25 rem and then we need some margin we'll do like one rem on the bottom and that's going to space out this section from our notification grid that looks pretty good in my opinion now the next thing that we need to do if we come over here it looks like we need to make our vertical line leading up to the top and we also need to make it so this notification section is narrower than our actual top section here and then on mobile screens obviously it's going to be full width so it's going to have like a max size for large screens and then on mobile screens it's just going to be full width that shouldn't be too difficult to do so let's just make sure we got all this right obviously our text colors are need to be that subdued color because it looks like actually no it looks like they're the right color this text on the right though is this i think i called that group date is that what i called it group date yep we're going to change the color here to be subdued color there we go and if i come over here you can now see that that text on the right hand side is that lighter color the text on the left hand side is the darker color okay that looks good next step is going to be the vertical line that leads up right here to where we are connecting today so to do that we need to do is we need to do is take our avatar and we want to get the first child so here we say first filed just like that and what we want to do is we want to essentially copy everything we have inside of here paste it down but we need to change around our top and our bottom so to do that we can just say our top here is going to be zero because we want to actually our our bottom is going to be negative 100 i believe that way it starts at the very top of our image and our top here is going to be negative 1 rem but we're going to obviously not make this a hardcoded value there we go that's not quite what we want let's make bottom 100 there we go okay so if bottom's 100 it's going to start right there which is exactly what we want and we want this to be a before element instead of an after so we can have both at the top and the bottom now the reason i got one rem right here is because we scrolled down we used one rem of margin between our group header and our actual timeline so i want to take this and create a variable which is called group header spacing there we go copy this paste it up here we have our negative one rem and then up here we're going to create group header margin i think i alright i'll call it spacing one rem what did i call it i call it margin or spacing let's see group oh obviously i need to do a calc to turn this into a negative number so negative 1 times that value there we go that fixed the issue so now we have almost this entire timeline complete if we come over here you can see we have the vertical line we have the horizontal line with the grouping at the top we have all of our cards on the right hand side and it's looking pretty good and what i can even do if i come over here i can copy this entire thing our section i can just paste it down now we have two different sections and i can call this a second section if i just scroll up a ways call this yesterday change the date here to july 10th now you can see we have this yesterday section and we have the today section and we can even space these out if we want we can like say like i don't know we'll say notification section whatever you want to call it doesn't really matter here we'll do notification section and we can just put some spacing inside of there and say notification section margin on the bottom let's say 1ram let's get the notifications section when we get the last child whoops last child margin bottom zero now we have some extra spacing let's make it like two rem so it's got a lot of space between these items as you can see but this one doesn't have any extra spacing on the bottom that's good everything's looking good now let's just work on the actual responsiveness out to 100 so it's a little bit harder to read but that's okay what i want to do is i want to make this have a max width of a certain size so inside of here we're going to have our notification grid we're going to say our max width is going to be i don't know let's say 500 pixels now it's going to make it bigger let's do like 750 pixels there we go that's the max width and i want to do just that simple margin zero auto trick and if i save that should hopefully center it there we go and then we can change our width here to 100 that should be pretty much automatically implied though but now as we shrink this you see once it gets to a certain point it's just going to shrink down and then as we expand this it's going to stay in the very dead center for our larger screen sizes which is good but obviously this doesn't quite look right on smaller screen sizes we kind of want to change around a few things as you can see this kind of looks like it's expanding over on the edge of our screen this is not expanding as far as it should so we have a few weird oddities going on in my opinion let's kind of look and inspect this to see exactly why the sizings are a little bit off so if we go to our group header here you can see our group header has a padding around it and the padding is on all sides and same with our margin that's clearly where our problem is coming from so when we scroll all the way down to our group header we want this padding to be only on the bottom we want a margin to only be on the bottom as well there we go now that makes it so everything lines up a lot better on all the different sides which i really like and probably all we want to do is actually i really don't think we have anything else to do with the margins or padding i think that looks really good and if we zoom this out you can see it stays in the center on those larger screens and on the smaller screens it's just going to take up as much space as pos now i just stopped the recording there for a couple seconds because i just wanted to make sure that there was nothing that i forgot to do if with this and i think we've covered pretty much everything from the original design into this design obviously you can tweak the initial colors and you can tweak around all the you know spacing of things if you don't like how the spacing is but the nice thing about this design and the way we laid out our code all the important values are in this css file so if we wanted our avatars to be 100 pixels when i save you'll notice everything still works exactly the same as it did before all of our lines are in the right spaces all of the cards are in the right space if you wanted what we could do is we could change it so our cards don't fill the full height like this but it's fine it really doesn't matter it's entirely up to your personal preference and usually your avatars aren't going to be this big let's move them back down to 50 pixels we want to make our grid gap bigger let's say 4 rem we save you can see our gap is much larger but all of our lines are still lining up exactly as they did before same thing if we change this to 4 rem you can see again the gaps are all lining up perfectly and the reason this is working is because we used calculations with css as well as variables to make it so we can change everything in once for example we can change this color to be like a blue color let's do like hsl 200 uh 50 percent actually 100 and 50 and we save you can see now we have a blue accent color here and we can copy this hsl paste it down for our text color here and let's just make it a much darker color so we'll do like 20 here now you can see our text has a blue hue to it i make it a little bit brighter you can see it has that blue hue but if we change it to like 20 you can now see we've done a blue style for everything instead of that grace dollar and all we have to do is change a couple variables so using css variable like this is really important when you want to create a flexible layout and the nice thing is when we're writing our html for this it's super easy we just take a group header and we put it inside of our notification section we take our grid we just put an avatar inside of here and we put a notification card and that's it so it's really simple to be able to add this because you don't need to add a bunch of random divs that are like oh let's add a divider div you know like this and then let's make sure oh we need a divider today that comes after a notification card you don't have to do any of that because the css takes care of all of it for you which is something you should always strive for when creating your css designs now i know this is a lot different than my normal content but if you enjoyed this style of video please let me know down in the description below so i can create more content like this and also show me some designs that you think are interesting link them down in the comments below send me an email whatever it is send me the designs that you think are interesting for future videos and i'll try to tackle those in future videos of this style of content with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 10,151

Rating: 4.979239 out of 5

Keywords: webdevsimplified, css timeline, css vertical timeline, css timeline vertical, css project, css design

Id: VxNQqQGOdc8

Length: 45min 33sec (2733 seconds)

Published: Tue Dec 07 2021