Part 1: Rebuilding Linear's Homepage with Next.js and Tailwind

so today I hope to have something new for you that's actually really fun to watch I'm actually gonna give you a look inside my brain while building a website no for real we are going to build linear's homepage with next.js tailwind and the new app directories in nexjs13 so instead of a rather short video this video will probably be a little bit longer because we're going to build the full homepage and try to add in as many details as possible within a reasonable amount of time so for those who haven't seen the linear website before it has been all over Twitter in the past few weeks so you might have seen it already but you can see it on the ride as well it's a really nice website with a lot of really nice gradients glossy textures a lot of nice animations which we hopefully can add in at least a few already but there are so many details in here it's probably impossible to add all of them in a short-ish video oh and by the way this is editing me I'm actually now coming to the conclusion that rebuilding this takes a lot of recording and a lot of time so this video is actually split in multiple Parts where the first part is what you're watching right now so in this video we're making sure that we set everything up and we're gonna build the main navigation the footer and a little bit of styling in between and from the next video on which gets released and next week we will start on building all of the homepage components itself back to the video but in general it's just a really nice and sexy website with a lot of details and I even heard some people say that it's impossible to build really detailed and complicated websites with a lot of attention to detail and design and actually I used to be one of them before as well I'm going to show you this is definitely possible to create so let's dive in and build this together on the right side I already created a new next.js app with tilwin included and for that they actually use their example you can find on their GitHub and it's actually pretty straightforward to install this you can install it by running any of these three commands to create a new app that already has Tailwind included which just gets you started a little bit faster if we start up this empty project this is actually what it looks there's quite a lot of work to do still so let's go ahead and build this the way we're gonna build this is by looking at their website and trying to extract values like it was designed so I'll try to look as little as possible at the code they used to build this but I of course will inspect elements to get things like font sizes colors different gradients just like a designer would also hand over to me in figma and from that point on we try to create all the HTML ourselves and hopefully we even come up with a different way of writing certain components than the linear Engineers have done themselves because you can build things in different ways right so let's see what we come up with so the first thing I usually do when I started a new project is make sure that at least I have the right font already set up because that changes a lot in for example the amount of spacing letters take up and for example the height and width of buttons and navigations and everything that's involved with sizing so if we inspect this H1 we see that they use their own proprietary font but that's not something I'm gonna download and copy right now because that's probably a font they own so I don't want to get any copyright claims or anything like that so what I'm actually going to do is I'm going to click on this and copy all of the other fun definitions they have done they're actually as a second fallback font they have supplied San Francisco Pro display which is a native Mac font that's included with your Mac so if you're a Mac User that will actually be the font that's used for Tailwind you can add these overrides in your Tailwind config we can add font family in here and then add the Sans serif font and by doing that we at least know that we have a font that's pretty close to what linear is using which is good enough for this rebuild the next thing I also like to do in the beginning of a project is also make sure that the background color is also set up properly because that already starts bringing in some brand files right so we can also copy that right away from their website and then add in a colors property in the Tailwind config where for now I'm just gonna call this background because I'm actually unsure if there's any other black color towards the future we're going to use or if this has any reuse value so as soon as we've added that color we can open the global CSS file and we can actually extend the base layer by setting the style of the HTML node to apply BG and background the next thing that's important is also making sure that we apply the right fonts which we can also do on the HTML node by setting font sounds and text white to also apply the text color so why this default I take for now but later on we decided if there was a smart decision or not but this way we can at least see some texts so after that I'm gonna reserve a little bit of space for the different types of components we will have in a second so that means that we will get a header component we have the main section of our app which contains the full page and we will have a footer soon as well as soon as we've done that you also see that all the content like in most of the websites is actually positioned towards the center of the page especially if you'd have a bigger resolution browser you will see that everything will stay in the center so the next component we will need is a more container component to set like a Max width for everything I will create this component in components container.tsx this component for now will be a div that only renders children and these children are then passed in as props and if we inspect this page we see that they actually saw the max width on these diffs equal to a variable and that variable is 1200 pixels so for now we are going to add this art coded to the page because I'm not sure if we will need that again so I'm not making variables for things I don't know yet that we're going to reuse and now I've added this in I'm also not saying that I did not set up any value for the root HTML node yet because instead of pixels I actually don't want to use pixels but REM like you could see in a video I shared earlier link up there over there so what we still need to do is Define a font size for the HTML node that equals 62.5 percent this way instead of using 1200 pixels we can use 120 REM and then it actually should be uh Max width and not a width and then at MX Auto to Center this div and as soon as we've done that we can add this container component around our header and other components for now probably later we will move them to the components and we see that our component is nicely centered so after I've done that I most of the time want to scaffold out a little bit of content for the home page and then I will start at the main navigation and filter navigation to have a finish and end of the page I was thinking that this would be some kind of hero component but then it's also it looks pretty similar to what's used multiple times on the page as well although perhaps it's only the big title that is the same so for now I'm gonna turn this into a hero component which we add in components hero.tsx and this hero takes in a few props hero props title subtitle and I don't think I will add in the button yet because I can imagine that down the road you will add perhaps multiple buttons or maybe you want to do some more complicated stuff in the hero and if we added it as props it would restrict the way we could use this hero component so for now we only have a div and of course we need to pull in these props and then for now we render out this title and the subtitle where the subtitle actually should not be in H2 here because this is part of the pages content and it's not if you think in a way a book is structured it's it's not like a sub chapter of the H1 so that's why there should not be an H2 and if we then render this hero component and add a title as well as the subtitle we already see something so next up is making sure that we also have the right font sizes for these things if we look at the computed property we see that this is an 80 pixel title so if we go back to our Tailwind config we can add some font sizes in here as well by default Tailwind supplies font sizes ranging from extra small all the way up to 9 extra large and if you're building a real website you probably don't want to have all these different sizes also sticking around while you're actually not using them so perhaps you only have maybe six font sizes and if you'd leave all the other ones in there people will start using them as well and that will make your design a little bit less consistent so instead of extending the team I'm actually gonna remove the extent now that means that we're not inheriting all of the defaults Tailwind already supplies but rather are creating our own we will still use pretty much the same notation but this way at least there's no sizes sticking around that are unused or not part of our design system so if we quickly have a look throughout the page as well to see what different kind of font sizes there are that it seems that this is the biggest font size that is out there on the page but there is quite a few smaller variants as well so we should at least pick something that's that's a pretty high extra large number so for now I'm going to Define 5xl as 8 REM which is the 80 pixels we saw in the design and we see that its font size is 22 pixels and if we scroll down the page it feels like this is the main body text size whereas probably this text is a bit smaller yeah that's 16 pixels and this is also 16 pixels so it actually feels like 16 pixels is the main body tag size so this one should still be one step up let's quickly check the button as well that one is also 16 pixels so we're going to define the large as 2.2 REM so we have one step down or multiple steps down of course but medium will be 16 pixels which will eventually be our base font size we use for regular body text and of course usually you would have a design where hopefully your design already created a nice overview of all the different font sizes used so you already know which different sizes are there and you don't need to guess the number of steps that are in between because the chances are big that eventually we need to change this 5xl to a 4XL for example because there's less variants but that's what happens if you either don't have a designer that creates a perfect overview for you or you need to extract everything from the website and don't want to spend hours up front to find all of the different sizes used so for now we're gonna add these class names on there text 5 XL and text large all right and we were of course already using text White in our base layer to define the text color which is now gone because we don't extend the colors anymore either so we have to add that back in and as soon as we do that at least that's working again so a few more tweaks I also want to do is already make this centered as well and what you also see is that our text expands way further than theirs and what they actually did is they added a line break in between which if you really want to make your design look very nice that's of course the best thing to do because this way you have control where the line breaks whereas if you input it as a string which could be the case if you work with CMS for example that's way harder to do because usually it's not only a text field and not a field where you can input HTML so for now I'm going to ignore this and let's see if we down the road want to build something that's actually similar to this because there's more of these really nice titles which of course would look slightly different if they didn't use LINE breaks in there I guess yeah there's also a line break in here so probably makes sense to split this into components and actually let's do it right away while we're at it so instead of turning these props from a string into a react node for example um it is actually a better idea to remove these properties completely and add in a children property and then copy these out and create new components from them in a second which we call hero title that also takes in children as a prop because then we can insert HTML as well and I'm not going to reuse the zero props interface in the title because I think down the road the hero will have more props and the title only needs children so we're actually going to create hero element props because I will reuse it for the title and subtitle which also has children for now and the same thing we do for hero subtitle and as soon as we did that instead of rendering the attributes here we are now gonna render children hero title which takes in this title and gives us then the ability to add a line break in here and the same for the hero subtitle which actually also has a line break after development that remove the unused props and hooray we're pretty much at the same place but the line breaks are in the right location and actually it looks so much nicer but it took a bit of effort of course and the biggest benefit of using these sub-components is that if we now have a hero that does not use a subtitle that's also working already because you can just leave these components out so you can just compose them in any way you would like so the other thing that's still missing is the correct line height if we check we see that they use a line height that's equal to the font size so 80 pixels or 8 REM in our case and the nice thing with Tailwind is that when you define a font size you can also already Define a line height that goes with that font size so that way if we set this font size we don't need to also set the correct line height so that's really nice so we can add this in by converting the 5xl into uh array where the second value is the line height and instead of using 8 REM as well I'm actually using a relative value which is one so in this case it's 1 times 8 REM could also make it 1.2 or 8 of course but by using a number instead of a fixed pixel value again this scales as soon as someone Zooms in or changes the font size of their browser which is really really good for accessibility and if we check back we see that is indeed applied and we also need to take the right line height for the 22 pixel text which in this case is 22.6 so that means we do 28.6 divided by 22 is 1.3 and I actually saw that Tailwind wants us to provide us a string instead of a number because I did get some really fake error so let's use that for now and the next app that also still needs to be added is adding some spacings if we look here we see that they use 24 pixel margins and also panning 10.4 and if we look at it H2 this is a margin bottom of 48 pixels and if we quickly look throughout the rest of their website for example the margin this list item has it's 24 pixels also desktop margin is 16 pixels so it looks like all of the margins are in increments of four so I'm actually gonna make a spacing scale that increments with 4 pixels we can add the spacing scale to Tailwind as well by setting zero to zero yeah that's always a good thing then one will be 0.4 REM to 0.8 copilot is so smart that makes three 12 pixels yes 416 and then at five we probably already go to 2.4 REM 6 will be 32 pixels and 7 will be 40 pixels and we leave it at that for now and see what we need later as well so that means that we can add the spacing to our hero Title by using a margin y of 5 which we just defined equals 24 pixels as well as add the bottom margin of 48 pixels to our subtitle which is actually not seven but eight which we still need to add and while we're edit I'm already noticing that it's a bit harder to know what these values map to because 4 times 8 of course is not 48 but 32 so it's actually wise to add in all the different variants here as well 6 times 4 is 24 and 7 2.8 and then we have 8 9 is 36 REM 10 is 4 REM 11 it's 4.4 and 12 is 4.8 REM so what I did now is I've added in the spacing object where I defined all of the different spacing variables in increments of four until the largest one I could find for now which is 48 pixels perhaps it's smart if we later on remove any unused spacing variables but because I don't have a design right now I'm not sure what will be used and whatnot let's leave them in for now and see if we can later remove any unused variants but it's really easy to have 12 map to 4.8 REM because that way you can calculate 12 times 4 is 48 and you know what the value is without needing to look it up so that's why I actually opted to have all these variants in here for now so it's way easier to add to the page so that means that we can now at the margin y of 6 that's 24 pixels and the margin bottom of 48 which is 12 to the subtitle and let me also copy in this image already so we have a little bit of height in the page before we start adding the header and the footer I'll add this image into the public directory and then paste it in here and for now we can just reference this image with the Pod image hero.webp and this way at least we already have something to scroll and that's usually the first thing I want to have this section doesn't need to be perfect right now but this gives me something to scroll and that's very handy when you are adding things like navigation and footer and that's what we're gonna add next so let's start by creating a header component where we export our header which we will then import and then we have arrived at this point what we actually want to do is also move out all of the generic layout elements like header and footer which are on every page and move this to the layout component and xjs provides us with and by doing that we can even do some really cool animations down the line if you're changing Pages because the power of next is that the header and foot are then stay always on the page when next does a client-side transition to the next page so that means that we can add some animations to the header as well like I've showed in a previous video which I link up here as well so to start with that means that we copy all of the wrapping components of the page and add this around the children remove it from here and also the closing part of course and make sure to import all of the components we have just added and then we're also immediately going to replace our header component with the new header component we have just created all right and then we're gonna build a header this header of course starts always with a logo which we can copy from their website I'm gonna make a directory called icons where I'm gonna put all of the SVG icons we will use logo not TSX and this is actually a really nice thing the linear team did they added an area label to explain to visually impaired users what this SVG actually does which is really nice of them so and as soon as we've added in and add icon we can import the logo from the icons part as well as add the linear text next to it and wrap this in a link component provided by next and add a href to go back to the home page we also need to bring in our container to Center all the content again and then we're gonna make this Flex so they're right next to each other items Center to align the text in the middle and then I'm also going to make this icon accept class names so we can size it and give it a margin so that means that there is a class name prop coming in which is optionally and is a string and that adds the class name to the component and after we've done that we can now pass a class name in here and say for example width for a height 4 and add a margin right of 16 pixels for now we Now quickly checked our website and see what the exact size of the logo is actually 18 pixels which is not a size we have defined in our Tailwind win config and since that's probably not something that's used over and over I am actually going to use arbitrary values for this so instead of 4 we can use 80 pixels or even better 1.8 REM and by doing that we see that the logo is actually the right size and now we have to find out the font sizes 16 pixels which we defined as the medium size so let's also add that in here as well and we already see that we have a nice logo type next is bringing in all these navigation items it's best practice to wrap these in a nav element because that's semantically the correct element to use you're building a navigation to a certain place so you use a nav element for this and in there we can create an ordered list with a list item that has all of the different anchors that we're gonna link to and of course we should unwrap all of them again in link components but for now they don't link anywhere yet okay and of course they should also be in line and probably maybe want this container to be a flex container so we can use that container to change the direction of our components so that means that also our container should accept a class name which again is optionally string and I should add a comma in here as well and then we concatenate them together and a nice package to actually do this for us is called class names so let me quickly add that by running yarn at class names we can add this function in import class names from class names and what you can do with last names is you can pass in a string which are all the default classes you use but you can also add in a variable for example and what class names then will do is it will concatenate all of them into one single string so by doing that we can also add a class name and make it Flex so what you already saw is everything got put next to each other and we can do the same thing for the an order list to also make it a flex so again everything is next to each other the next thing I want to check is the height of the navigation which is 48 pixels probably later on since the navigation is fixed we also need to have this as some sort of variable so we can give the page an offset that's actually exactly the same and with Tailwind we can create some variables in the root in our Global styles by adding root and then we say navigation height equals 4.8 REM and now we can use this variable inside our CSS by setting H and then navigation right oh that should of course be VAR navigation height then we make this nav full height and add in here items Center and also full height to Center the navigation items within the text as well let's quickly check the font size as well for the anchors that is 14 pixels so that's still a smaller size we need to add so that it's small 0.4 REM and instead of adding a class name to all of our anchors which for now would be quite repetitive perhaps later on this will be a array we will iterate through but for now we can also use arbitrary values again in tailwind and we can say and underscore anchor text small and by doing that all of the anchors are targeted that are inside as an order list but just with Tailwind magic right and there was also a margin in between all of the navigation items which is 24 pixels so we can do that also with the arbitrary values by directing the list item and give them a margin left of six nice next step is making this header also stick to the Top by making it fixed top zero and left also zero with full so this way it spans the full width and is attached in the top left corner and here already you see what I predicted before the main content is now going up the 48 pixels that the height of the navigation is because this thing became fixed so what we can do to fix that is add a padding top to our main element in the layout that equals the variable navigation height and with that this main navigation item starts exactly under the navigation so the next step is also adding in the border that is at the bottom of the navigation which is a one pixel line that's actually white with an opacity I'm gonna add this color in the theme for now and let's see later if it's really a reusable thing I will call that for now white a0 point 8 where the a0.8 stands for the opacity of 0.08 so that means that if we now go back to our header we can say border bottom and Border white Alpha 0.8 and with that we have a line that's barely visible but it's all about these details right as soon as we add in the gradient that's also in the background everything it will probably be a bit more visible next thing missing from the menu is the buttons on the right side let's wrap them in a div which yeah nice copilot has a link that's a login and a button that we still have to create first we add a class name in here and give it a margin left of Auto which will push them to the right also make it h full blacks and items Center again to have the navigation also line up in the center and let's make sure to add the text small to this link and probably the same margin right of six after that we also need to make the button component because that's also part of the header so we're creating a new component called button.tsx there's button for now only returns an anchor because every button I see on the page is actually an anchor linking to a different page so perhaps towards the future it should also become a real button depending on the action the button does of course but let's keep it easy for now and stick with an anchor and also we use children and now the string as their button text because this way we can later on always for example insert an icon as a child as well and we actually need to take this interface out and create a new interface because we also need to add in the href so we can add the href to the link as well and then we already replace this button with our own button so we already can see what we're building and now comes the fun part and that is actually building this button which is a button that has quite a few variants because I see a button here and here but they're different in size so probably there is a size difference and actually this thing could also be a button but then again even smaller and if we scroll down we again see that very small button so this is definitely also a button variant we will have to create and here also I see a different version of the button that looks quite similar but has a different color so in new tool I would like to use for this is called class variance Authority about which I also created a new video recently and with close variance Authority or CVA in short you can make it a lot more structured when you're defining multiple variants of the same component so let's install that first by running yarn at Clause variance Authority and then we can import CVA from class variance Authority and then we create our own consts button classes equals CVA where the first argument is the default button class names which we don't know about yet and second is an object where you define all your variants the first variant should probably be called variant I think CVA uses intent for this but I actually like having a prop called variant is primary or variant is secondary so let's make a prop variant in which we have a primary and a secondary and for the lack of better naming for now a third GRE as well which is the gray button what we can do then is copy these button classes and add this as a class name in here and execute that function we can import a variant props from CVA as well and then extend our button props with variant props type of button classes to be extends when s and what this does is it will automatically add the types that are extracted from CVA to valid lots of props as well so that means that we can now extract the variant and pass this variant to CVA again if you're not sure what I'm doing here check the video I linked a few seconds ago because that explains this in detail also like we said there's probably three different sizes there is a large medium and probably a small button for this gray version so that means that there is another variant which is small medium and large and that also means that we need to destructure the size and pause it to the button classes function as well and then we can actually start adding some class names in there first start with the font size that's 14 pixels for the medium variant so that is text small for the small button and this is 13 pixels which is then a new font size we still need to add which is probably our extra small variant 1.3 so text extra small and for the large button we have a font size of 16 pixels so text Medium then we have our primary button which we are styling now that has a gradient in the background which we are just gonna copy for now and the easiest way to add this gradient to Tailwind is actually by adding a custom variant to our config by adding background image and then for now we will call this primary ingredients where we can just paste in this gradient that enables us to add BG primary gradient as a class now and if we look at our button we still don't see anything and that's of course because we don't pass in the variant is primary if we do that we see that the gradient pops up and actually I want to change this around quickly because I think that the primary button should actually be the default and we can make this a default by adding this variant primary as the default variant and I think we should do the same for size medium next is making sure that they're all rounded it seems for now that it applies to all of them so they're all rounded to full which makes them rounded then we need to take out the padding that's 16 pixels on the x-axis for the medium button so PX4 for the large button that's 24 so it makes p x of 6 and for the small button that's 12. so that is a padding X of 3 and then we have the height of the button which should be 32 pixels so it's always wise to make that a Min height because if somehow there's a lot of content in there you want the button to grow with it of course so that's H uh times 432 divided by 4. okay 32 and 4 8 yes 8 32 so age of eight small button is 28 so that is seven H7 and the large button has a height of 48 so that's h12 okay yeah we indeed need to make our button inline Flex probably because it should be an inline item otherwise it will always wrap to a new line because it's a block item if we would made it Flex okay and then items Center so you have the text in the middle again and by doing that we already have a button that's quite similar to the design we will work on all the other buttons as soon as we need them so for now we're gonna leave it at this because I first want to wrap up this header before starting to work on all of these different other components of course when you are just starting out a project you have no components at all so you need to work at a few different things at once but after that we really should focus on one component so the main thing the navigation still lacks is the glossy texture in the background like you see here in their design as well and for that they use the pretty nifty solution to do this they added a backdrop filter blur which blurs everything that is behind the navigation so that's what gives it this glossy texture they also added a mask image I see but I'm gonna pretend I didn't see it because I'm not sure yet what that will add so we'll leave that out for now until we notice a difference between their website and our website they also added it into a separate div that doesn't do anything besides adding this background effect instead of directly on the header component this is also something that I'm gonna ignore for now because I did not see this I'm only replicating the design and I'm not a big fan of having useless HTML elements that only add styling so if we can get away without this let's do that so Tailwind actually makes it pretty easy to add a backdrop blur filter where we can add 12 pixels as a value and you see if we scroll anything behind it that we already have this super nice gloss textured effect now let's also add the hover State for the anchors which if we inspect this anchor activate the hover State we see that it has a gray color let's copy that in and for now since it's the only correct we have I will add it as Gray and then we go back to our header component and add the color to the anchor and anchor hover text Gray and with that you already see that we have a hover state but no nice animation yet which we can add in by adding in transition color on the anchor as well and with that we have a nice hover transition the only thing that still lacks a nice hover transition is the primary button so let's see how that should look as well they seem to add some shadow in there as a text Shadow and a box Shadow however Tailwind does not Support Tech Shadows right now you have to add them either via arbitrary values or by creating your own utility and that's actually what I'm gonna do now you can add that by going to your globals and then extend the utilities layer by adding dot text Shadow for now I'm not going to make this dynamic in any way because I'm not sure in what way we're going to use this in the future so in there we add the text Shadow and for the Box Shadow this is actually a property that Tailwind supports in their config so we can just add that to our Tailwind config by going to box shadow and then I'm going to call this primary again because this used to be only used with the primary button for now and after we've added those two we can go back to our button and add the other classes so that gives us hover text Shadow and over box Shadow primary and if we now over our button we see that both attack Shadow as well as the Box Shadow are added so that seems for now to wrap up the desktop version of the navigation at least let's see how they made this responsive so it seems that they're okay with dropping a few main navigation items towards tablet and when you're going really small to mobile there's a hamburger menu that will appear whereas both the login and sign up button will always stay visible so let's see if we can replicate that next I do a few navigation items is pretty straightforward with Tailwind let's see which actually disappear features method pricing and Company should stay so these three will get hidden and we can do that by adding class name of hidden and then make them block on medium and when we're done resize we see something happen I did not expect um what's happening here is that we forgot to add a meta tag that um prevents things from scaling down so what we need to do is go back to our layouts file and add this meta tag to our head which actually makes sure that the viewport always stays equal to the device with and nothing will scale down by doing that again we see that we actually drop off the menu items but not at the correct breakpoint and that is because we added a medium breakpoint and should have added a large breakpoint which is the beginning of desktop what you also see is that the full navigation extends until the full size of the window and that is because our container does not have a padding yet which is needed to keep the space on the side seems like they use 32 pixels as their page panning so we can add a padding of X with a value of 8 and that will also make sure that everything is nicely within the boundaries of the page so let's now make the next breakpoint where we hide the menu items behind the hamburger menu and we do that by adding hidden to the navigation as well and making it block from medium probably so that hides it as soon as we go any smaller and then we of course need a hamburger button to be able to toggle that navigation so let's first pull in their hamburger icon and then we add our own button with the hamburger icon and what's also important if you're adding a button that only has an icon is to make sure that you add a screen reader label because this way screen readers will read that text but users will not see it and you can easily do that by adding a class name as our only this way the text is hidden we inspect this but it is still in the Dom making it so that screen readers will read this text to the user this button also needs to have a margin left and of course we still need to do something when you click this button so let's add a state to keep track whether this button is open or not oh and because we are now using react server components we also need to tell react that this should also run on the client by adding new client at the top of her file because everything that runs state or has any other for example contacts or effects needs to run on the client which requires you to add these clients and then on click of this anchor we need to run a function to set the hamburger is open to the opposite value it currently has and with that we also need to add in the class names again so we can dynamically add the class name to toggle this navigation on mobile so instead of now always being hidden we actually need to make this conditionally based on whether the hamburger is open so if it's open we don't need to render anything because block is the default and only otherwise it will be hidden so if we now click we see that our menu comes back although it squeezes back into place where it was before because of course we did not add any additional styles for that so we can do that by making it fixed and then have a top offset that's equal to the height of the navigation and the left of zero that way it already drops down and I'm also getting a little bit annoyed right now with having to repeat this navigation height so Tailwind lets you also use custom values that are based on a CSS variable for example by extending this object with spacings so we could in here also add navigation Heights which equals the variable navigation height and with that we can now instead of use the variable just say top navigation height and that still keeps the same position so that means that we can replace any place where we before use this navigation height which was only here navigation right okay let's get back to this navigation again um the navigation also should be full width of course and we make it for now background white so we can't really see what it does and instead of full height it should actually be the height of the screen a minus at the top navigation height so we can use calc for this 100 pH minus VAR navigation height this way it extends the full extent of the page and it should have an overflow Auto so it Scrolls if there's too much content in there okay let's remove the white background again and actually add in the correct color which seems to be our background color we are already using we can say background background and next we also see that of course the navigation items should switch directions so they become Flex call and on tablet become a flex row again which of course we need to fix in a second because we're now making mobile we're a little bit and doing our work for desktop and the item Center also only applies from medium and up as for the font sizes I also see that they're actually 16 pixels on mobile so we can make the text medium and on the medium size and up we can make them text small again as well as that all of the anchors are a full width and are the height of the navigation height that's interesting that they reuse this variable but that makes it more consistent probably now this line is getting pretty long what I'm actually gonna do is move this over multiple Lines by taking out all of the anchor Styles and putting them on their own line just so it's a little bit better to see apart from that it does not add any functionality so this anchor should then be a height of navigation navigation height and it should also be full width and in order for that to work it should be a block element okay looks good and while I'm looking at it I also see that on mobile all these navigation items become visible again so instead of making them always hidden we should make them hidden on medium and up that brings them back and all of the anchors text should be aligned in the middle so instead of making a block we made them flex and then we can say items Center to align the text in the middle the next thing missing is this nice divider between the anchor Elements which is of a color we don't have yet so let's add that in as well for now perhaps as a gray dark I'm not a huge fan of having these dark and light colors but for now I'm still unsure how many different variants of the color we are going to use so making it great 20 for example it it's also still really abstract because chances are big I need to add something in between so normally you would have a design where you can already take all of the colors from before you start but now this is how we're gonna do it okay and that means that this list item gets a border bottom and that border should be of color gray dark and with that we already see we have a nice line and now we have some more navigation items we can also test and it does whether our overflow scroll works because most of the time we are working on these large screens and we can see all navigation items but our users might have a smaller device and we then just tend to forget to test if this roll bar functionality also works or even forget to add is in at all okay so this works now we go back to desktop and that's broken of course and that is because we need to reset a few properties now which we have set for the navigation so of course it should not be fixed but it should be relative again on desktop it should not have a top offset top zero and it should be of height Auto and also of width Auto and the background color should also be transparent which is a color we did not add in yet so let's do that right away and finally the list item also should not have a border and with that we suddenly have a navigation almost working we need to hide the hamburger of course on desktop so it's hidden from medium and up and then it pops up as soon as you go smaller that's correct and what's also always really interesting to test is what happens if we open the navigation and now go back that's that seems fine and if we close it again and open the navigation then still everything seems fine so that's good sometimes what happens especially if you use a lot of JavaScript to render also all these classes is that some of these classes keep sticking around when going from mobile view opening navigation back to desktop which just keep your navigation in a broken state so it's always good to test this as well the only thing this still lacks is some nice animations these little details I love it if we take a look at linear's website we see that when you open the mobile navigation the items fade in and slightly move up from the bottom to the top if we want to replicate that we have to animate the opacity of the navigation and animating the opacity is not possible if you at the same time toggle an element from display num to display block so the first thing we need to do is instead of making it hidden we need to make it invisible which sets visibility to Hidden and as soon as the navigation is open send it to visible it should still have the exact same behavior but the benefit now is that we can animate opacity while changing it from invisible or hidden to visible since the opacity should not animate on tablet and up we're already adding opacity 100 for any medium devices and for mobile we can now add opacity 100 when it's visible and opacity is zero when it's invisible and if we combine that with it transition opacity and add a duration of 500 to that we already see that the items are now fading in they are however not fading out if you look closely and that is because it's set to Invisible before the animation can even run since that's something that happens instantly we can actually fix that by adding an animation delay to the visibility property however it's not possible to add a different transition delay or invisible and do not have a transition delay for opacity so to fix this we need to add a wrapper around our navigation that does the toggling of the visibility and then we actually take out the dynamic class names and put that on our new reperative that means that we don't need class names anymore for the enough and with that we can add a delay of 500 to the invisible and also adds transition visibility as a default that's always set on this diff oh and by accident I copied the opacity change as well that should actually remain on the nav so we have to add the class names in again because this is still an animation that happens on the child and if we know that back in the delay we see that we actually have a nice animation both fading in and fading out the only thing missing now is the anchors also animating up so that means that we add a Translate Y of eight for example and that we should also add a transition two to transform and we actually already added a transition for the colors and it's not possible to combine them by adding two classes what you actually need to do is add an arbitrary value where you specify the color that you transition as well as the transform and now it will combine them both and of course this Translate Y should not apply when we are on a tablet device and larger and we should add in the class names to as soon as the hamburger is open change this Translate Y to zero and as soon as we do that we see that we have an animation with all the links fading in and moving up it's only just a little bit too small still so we can fix that by changing the animation duration by again setting that on this anchor and changing the duration to 300 for example and that looks already super smooth the biggest difference you still see when playing around with the real linear website is that they have added custom easings as well we can specify one that's pretty similar to what linear uses by adding ease in as an easing timing function if we now go back to a tablet and desktop variance we see actually that our menu item is not shown anymore and that's because we add the invisible property so we should also add in the medium visible to make sure that from medium and up our navigation is always visible and with that we finished most of our navigation so as the final thing in this video I want to add the footer as well so that means our page has a start and an end and then in the next video we can actually work on all the nice things in between so let's first close all of these files which we probably don't need for now and create a new component called footer this returns an element that is a footer and then we add the text this is the footer back in and the next step is replacing this footer in our main layout and by the way also adding in our container again so our text is centered looking at linear's website it seems like there is again a border on the top of the footer and that border is almost similar to the 0.08 wide we had before so I will actually take that value for now and see if the 0.1 is a value that's used more throughout the website or perhaps it's just an inconsistency in design and in my opinion it's done up to us as front-end Engineers to make the design a bit more consistent as well so we first add the Border top and then set the Border collar as white Alpha zero eight and there's also probably a padding yes that this div has which is 56 pixels 56 is actually a value that we don't have yet in our Tailwind config but for now I will leave it like that and see again if this is used more often so this has then a padding y of 56 pixels which is 5.6 REM should not forget about that and for now I will also add a little margin to the top of the footer um which later on probably will be part of another component but we'll change that along the way so let's add margin top 12. and actually change the Border top to border T which is the right class name and then let's see what the font size is they use in the footer as well all of the links seem to be 17 pixels same goes for the headings as well as the title on the left side so looking at our Tailwind config that mapped to small so let's already add a text small on there as well and next we'll create the structure of navigation it is actually divided into two different columns the first one has the logo and the second column has the navigation links and the reason why I say it's two different columns is because I saw already what happened on mobile and that is if you make this smaller the full left side will actually get moved on the top and if we create it in two columns we can easily later on move it as a column underneath each other instead of next to each other so let's first create an array for all the different links we have so we don't need to repeat ourselves 5000 times so it creates a new array of footer links in there we have a title which has product and we have links which also have a title in this case called features with a href that for now links to a hash and last in under rest as well and with that we have a few arrays of links with all the titles that are for each of the column as well so I'm going to collapse this for now and then we are actually gonna render all of the footer links and map them which gives us a column and inside that column we are gonna render uh H3 with the column dot title and then we're also going to render an ordered list where we map over each of the links as a list item and a link in there and that already gives us all the links we need the second thing is also making sure that we have this left column where we have to add the logo again as well as text and at the bottom we do have Social Links in a second so first we're gonna make this display Flex so everything gets put next to each other again then we're gonna see if this column has a fixed width no it does not actually it is in the link columns that do have a fixed width so that means that we can add a justify between which pushes both of the columns to the sides and if we then now make this wrapper of the photo links also display Flex that will make that a column as well and then of course we need to wrap every column in a div instead of in a fragment so the title and the link list stay underneath each other let's get the right font settings so it's color white it has a font weight of 500 so it makes it font Medium as well as a margin bottom of actually three and a half because it's 14 so we stick with 3 for now to have it more consistent and the columns also have a Min width of 180 or 80 REM the anchors itself they have a gray color which is actually the gray we already defined in our config so we can add a class name of text Gray and also add a margin button probably ESO 14 pixels so we make that 12 again in order to get that to work all of the anchors should be displayed block and with that we already have all of the footer links styled as the real website next is getting the right size from the logo again which is 18 pixels so we can add a class name on here and make it with 4 and height 4 which is 16 pixels but okay for now that's close enough and we also should add the gray color to the text and make sure that both of the columns are next to each other oh that should actually not be this column but it should be this column also at a margin right of four and for these Social Links if we add margin top of Auto and make sure that the reperative is Flags Flex column and height full and finally add one more reperative around this column so it will stretch everything to the full height you see that it pushes the Social Links down as well and one thing that you already notice is that the links are actually not fully aligned because the last anchor should not have a bottom margin so we should say that we want to select the anchor inside of this list item which is the last and that should get a margin bottom of zero so let's quickly copy in the social icons as well and then show them in this reperative and make sure that they're all put next to each other and have a space on the x-axis two reps three and give them the text gray color nice they actually have a larger margin as you can see margin left of 24 so that's X4 and I also noticed that the text and the logo is aligned in the center and we did not properly align that yet so let's also quickly fix that items Center that's way better so and the only thing left now is making sure that this is responsive as well so let's see it seems that they make this a flex column and then from medium and up it will be a flex row cool and the logo row will be uh Flex Rodan and from large it will be Flex column and it will justify between to put the space between them and it also has a margin at the bottom probably it does at least spacing somewhere yeah all of the columns have a margin top of 40 pixels okay so we can add a here which is margin top 10 and on large it doesn't have a margin top then and they go to two columns as well already directly on the breakpoint towards tablet which gives them a width of 50 percent so that means that we have a Min width of 50 and from large to Min width is 180 pixels and then we also need to add Flags wrap to have it wrapped to the next line and with that I think we also finished the footer super nice so this also wraps up the very first part of rebuilding linear's website I hope you found this very useful and that you learned a lot from it this was only the first part in this series because as you can see we're far from them please make sure to subscribe and leave a like below because next week we'll be releasing the second part of this video where we start on building all of the different components on the home page starting from the header and going down from top to bottom thank you so much for watching and I hope to see you in the next one

Channel: Frontend FYI

Views: 24,834

Keywords: frontend, css, front-end, tailwind, tutorial, web development, frontendfyi

Id: ls_b-1a0ZUc

Length: 66min 17sec (3977 seconds)

Published: Sat Nov 26 2022