Rebuilding the Vercel Dashboard with Tailwind CSS

now dude I watched him today it's been a while since I've done one of these like rebuilding some existing site livestreams it's always hard to find good ideas for them so if you ever have a good idea for something that you think would be fun to see me try and rebuild would sell when Donald livestream definitely let me know on Twitter and I'll maybe I'll build it if it's something that seems cool so today I thought it would be kind of fun to try and rebuild this site I guess versal dashboard and just kind of see how far we get with it it'll look a little bit different right because I try to avoid doing anything that deviates from like the tail and defaults but let's just see what happens so I've set up a project I decided to build this with next j/s that's what I actually build this with and I'm learning react so it's it's kind of a fun way to bang on that stuff a little bit too so all I did is I set up an XJS app here created a kind of our little tail when CSS file pull that into our app page using the kind of recent built in static CSS file support in next j/s created a post CSS config where you pull in tailwind and autoprefixer and in our tail and config i'm also pulling in the toe and UI plugin because it adds a bunch of stuff to toe and that will be intel and probably unlike tail and 2.0 one day but I for my purposes now I kind of consider the toe and UI plug-in to sort of be like the new tell when defaults but we're still iterating on them so keeping it in a separate plug-in itself feels like we've got everything totally nailed all right so let's kind of bang it out here so I've got like our index page here right now I'm just doing this like hello world thing so why don't we start by just scaffolding out some general markup and yeah then we'll start styling it so usually what I do with these sorts of things I just try and get the basic boilerplate in place and do kind of a styling afterwards so if you look here we're not really like returning anything yet just the component so we'll probably do this so mmm I guess when we throw everything in a div maybe we'll add like a header section and in the header we'll have like a nav may be multiple Mavs because this is kind of a nav and this is kind of like a secondary now if we'll kind of see yeah let's do two now I don't know seems fine seems just see why we can't have two knobs so we're gonna have sort of like a section on the left and a section on the right section on the left is gonna have like a logo and it's we're not sure how we're gonna do that yet and there's gonna be like a separator of some kind which we'll probably do with an SVG and then there's gonna be kind of like a little user drop-down thing for switching to your teams and stuff and maybe we can even get to building that - all right so I'll have the logo then we'll have like guess we'll do it as a div I mean maybe as a span it's kind of an inline element and this is gonna have kind of like an avatar here and I think what I'm gonna do for the avatar is I'm just gonna grab my avatar from Twitter cuz it's a fairly stable URL and we'll just slop that in there and then next to that will have my actual name and then we're gonna have a chevron here which we can probably grab that from like heroic ons thinking how the best way to do this would be I was playing around with something earlier that let me kind of pull in heroic ons from NPM so why don't we just like do that kind of for fun here so let's just do like yarn add heroic ons and we'll also add yarn add next SVG R which is like a plugin for letting you kind of pull in inline SVG zhis react components which is kind of cool and I think just set that up we just have to go create a new file here next look next up a fake J s well import with SVG are from next SVG r then we'll just how does this work actually do we have to use is this babel if i don't remember next stock config judge yes let's take a look here quickly no it's not so this is just kind of old-school so cost with SVG are equals require and then we'll just do module dot exports equals with SVG EGR and that should be enough to kind of get that going and then if we restart the server since you made it can change that config we should be able to do something like import let's see looser or cons dot dev just to kind of find this i think there's like a thing called selector all right so we'll import like selector icon from aroma cons / solid slash selector dot SVG i just published heroic cons to npm today just so i could do stuff like this basically okay so maybe in here we'll just try and drop in that selector icon and this should kind of tell us pretty quickly if we kind of got that part working alright so there it is so that's kind of working i don't have a good heuristic for deciding if something as a div or a span usually it's more just like i look at the element and i decide is this feel like an in-line ish element or does it feel like a block ish element even though everything ends up being nested inside flex containers and stuff so it doesn't really matter but if i was looking at this on its own i kind of think of this as like probably this is like an inline block ish element and if something is inline block ish then i'm gonna make it a span and as soon as one parent is a span I think it's invalid to put a div inside of a span so then every child becomes a span so that's kind of my thinking behind it okay so I bet you this oh that's cool you right-click the logo and it takes you to two here so let's just grab with the SVG I'll do the copy to the clipboard and everything so let's just do like Const verse cell or function for cell logo return and this is not a valid react component because of dashes but that's okay so now we should be able to just like slap the old verse cell logo in there I wish I could get does I wish Emmet would like autocomplete react components you know so like I hit enter and it doesn't actually add the stuff that I want but this should get us something anyways okay so we got like our triangle there everything's kind of looking a little bit funky obviously but let's uh let's just keep chugging along here so we got this div for the left half this div for the right half let's go ahead and put some stuff in here so we're gonna have like a button for feedback and then we're gonna have like some links we'll just have these go to nowhere we should probably make these like next links yeah we should we should do that so here's another thing with vs code that doesn't work reliably for me I type like link and I kind of want this to be like the that won't the one that comes with next but it doesn't actually import it so I've always wondered like is this just because of how I have M it configured you know cuz this really sucks to have to import link from next link manually but that's okay so we'll just do link href goes nowhere for now we'll put like an a tag in here and this will be blog let's just see even getting some sensible stuff here yep let's also let's wrap everything in a div just so we can add some sensible you know what we're gonna need to make a custom document basically here's what I'm trying to get out here I want to add some default classes to the HTML element and you can't actually easily do that in you know what let's not do it this way you can't add classes to the HTML element with next currently which I find kind of bizarre but we can easily just do something like this so let's just do apply fonts and antialiased this background is probably like BG gray 100 maybe BG gray 50 let's call it BG gray 100 and yeah that's probably enough to get us kind of close all right so we should see like after a scree compiles to CSS which I try to avoid doing which is why I like to stick with doing things in classes instead about editing CSS but yeah we'll get some nicer fonts now cuz I've pulled in inter as you see here and we get like kind other bright colors all right so we got a blog we're gonna have like support we're gonna have Docs and then we're gonna have this little kind of button for some more menu stuff so let's throw in a button let's see if Steve has like a dots yet dots horizontal so we'll pull in that icon - so we'll go dots horizontal icon dots horizontal and if we slap that in here should see something no let's see what are we messed up here there's Doc's button SVG you know it is there it's just not rendering with any size okay that's fine we haven't done any styling yet so that's okay and then we'll also add like another button for the profile thing and we'll just say I'm here and eventually this will be like a actual drop down okay so this is looking pretty junky right so let's maybe just try and get this top section working first all right so I think the first thing that we're gonna do is add like some sort of width everything so you can see like this is like 909 but a thousand pixels wide so I think we'll probably do that honest nav so hopefully I can get in habit of this.classname junk in react so let's see what's a thousand pixels divided by a REM sixty two and a half so our closest is gonna be like 64 here so let's just do that and with your MX auto on this and then we have like some padding kind of above here I mean I don't know I'm looking at dev tools I think it's easier to just kind of measure like this so this is kind of like 20 pixels above and then we got some space between them so I think maybe what we'll do here is we'll just do like a PT five and yeah let's just do that and we should see like things are kind of starting and moving to the right place okay so like this icon is how tall it's about 24 pixels tall maybe a little bit taller it depends on how the view box is drawn for it so let's just we'll have to proxy some of this stuff through but that's okay we'll get rid of this stuff say class name equals class name and we'll just like D structure that out here and we'll just make an assumption that we're never gonna use this with a class name so we'll do like h6 and we'll just rely on with Auto let's just see did we get like a sensible triangle there we do it looks like we got like a white header here so this whole kind of header section is white so I'm gonna do like BG white on this element and I'm gonna wrap it in another element because we do want to have some gray stuff for the stuff below all right so yeah it seems like it's probably white all right so let's get this avatar looking right here so we'll do a class name of h6 w6 rounded full looks like maybe there's like a little bit of a border on that kind of like a light grey border there if you open it does it change color or anything no so I mean we can do that too let's do it border what is that a single pixel border you think or do you think it's a two bits of order single pixel OC border border gray 200 or something and just kind of see so it's a little bit small it does look like maybe avatars meant to be a little bit bigger than the EM we'll go strife 7 which is 28 this is man might be too small still we'll roll with it for now and just kind of see where we get so okay so we have the image we have my name we're gonna have this little divider thing in between which is just going to be like a slash but probably it should be an SVG like a bay if we inspect this this is not like an actual slash character yeah it's like an SVG so I wonder if Steve has like an actual no he doesn't have like an icon for that sort of thing that we could rely on arrow chevron may be trying to think like what would be a cool way to kind of mimic that we could just try like drawing the SVG that's pretty easy to do too so maybe we'll just manually draw an SVG here view box equals if we make it like a square SVG that's kind of like my go-to so it's easy for me to draw the shapes let me just see SVG line how do we draw a line does this give you like I guess you would do stroke width on that right okay so let's just draw a line from maybe from like X maybe it starts at 10 and 100 it ends at 90 and 0 I don't know seems like I might draw a line and we'll probably have to actually give it our own dimensions oh it's huge so we'll just do a class name here of let's do like stroke equals current color I'm gonna say text black just see if we can see the line yeah there's our line it's kind of getting cut off at the corners so maybe we'll kind of like give it a little bit of padding around the container all right and we can make this kind of narrower if we want to but we'll just start with this so let's do like H 8 w 8 or something mmm let's think about the actual dimensions that we want it to be and then maybe we can draw the line based on that because it looks like the stroke is getting narrower because it's being scaled down so 8 is 32 so we just said this is like 32 by 32 and you know like what's you know started at a 4 ended it 2828 4 yeah okay so now if we wanted to just sort of adjust the position of it we could just yeah that's not what I wanted to we could do like this this will kind of like make it more tall so maybe we'll do 8 and 24 yeah like that's gonna be pretty sensible I think I put this in the wrong place belongs up here that's okay all right so let's do like in-line flex thing on this oh wait that's yeah that's fine we'll do flex on this item Center we're gonna want to style this too so let's do inline flex item Center and then for this selector icon this is probably gonna be H 5 w 5 text gray 400 or something yeah they're using a thinner stroke on theirs we could maybe approximate that mm-hmm if we look at the selector icon the stroke 1 you can maybe try it like that so if we pulled in like like outline selector I wonder if that will end up just looking a little bit closer does that change much solid outline it makes it a little bit thinner we could say stroke width equals 1 let's just change anything stroke - all right well we'll just roll with it the way that it is okay so let's add a little bit of space between things like you can see here you know if we imagine this is kind of a square we've probably got 12 between these so we'll just slap like a space x3 on this and we'll put a color on this line so let's go gray 400 maybe 300 got a little bit lighter this is pretty light I think yeah this is a little bit more narrow to you so maybe you know bump this down a little bit yeah there we go the question it was a question in the chat about why do I use stroke current color and sort of stroke current doesn't really matter lately I've kind of preferred just doing it this way because by doing it this way I can bake it into the SVG's themselves without it being like sort of super talent specific so if for example you look at like the code for this SVG that comes from heroic ons it already has stroke equals current color built right into the SVG and that's a totally reasonable thing to do because that's a universal SVG property anyone can use that but if we were to add a class attribute that had stroke current built into it that would be a little bit too opinionated and if I wanted to use stroke current all the time then for all these I'd have to add that manually so this is kind of like my new go-to just seems like a simpler default because you can bake it right into the SVG if you want all right so let's a style of this actual piece here so it looks like the font is probably a little bit smaller than what we have right there so since this is the nearest kind of like block ish element like inline flex has the same properties as in my block where it actually will apply font size and stuff in a sane way it's usually kind of you get weird behavior if you add font size in line height stuff to inline elements we'll do this here and maybe we'll go like font medium and yeah that's looking pretty good and why don't we add a default fonts font color of text gray 900 maybe so we're not using black by default although I think Zeit actually maybe does use black I keep saying site went really I mean um for cell oh yeah there you straight-up black this isn't straight up black though so no problem oh oh wait I was looking at mine not theirs they probably are using black for that text journey yeah I mean that's pretty much black yeah okay so let's I mean let's go full black if they're using black then we should use black so let's be explicit about that at least all right it's not a little bit of space between the avatar and stuff looks like eight pixels there oh this has got like a little hover state on it it's interesting so this is like a link but this is like a drop-down okay so let's keep that in mind what's a gap here though between the button again it's like a dish okay so we can do space X 2 for 8 pixels and then let's is this a link so we've got a link this whole thing is a link so that's interesting so actually this is all kind of one element in theirs which means that we'll have to do like a class name of inline flax item Center on this and also repeat the space x2 cannery property index of of undefined take give something up oh we need a href on the link okay so now let's take this thing and make it a button and getting a little carried away with my it's got a little bit of padding on it not much probably though but let's just add like a border and stuff so we can see it so a border rounded SM or MD maybe see if we can see where that is yeah we might not even need anything except a little bit of vertical padding let sound like a P y1 it's a little bit much let's make this inline flex just said we're not getting any other weird behavior okay so we can do the qy 0.5 maybe maybe like a P maybe just P 0.5 yeah I mean like that doesn't seem terrible it's a little bit bigger than theirs yeah it's not that much different actually that's I'm probably cool with that so on hover they have like a the border appears on hover and they get like a little bit of a background so we'll just do like a border transparent by default here and then we'll do like a hover border gray 300 maybe hover BG gray 100 it's probably pretty close this is a all around a little bit softer let's go like this and maybe we'll do like a transition if I can ease it out with like a 100 millisecond am I not seeing my transition should I am I getting build errors no alright so it's there just maybe the 100 was a little bit too fast even that 150 is really fast I wonder what I'm not seeing 500 is too slow 300 is too slow we do not have a pub get repo for customers for telling do I yet but it is something that's on our roadmap and there's actually no fake my stuff but that's also on our roadmap - sorry ok so that's cool I think that's kind of a start we're just gonna leave it there and move on and get some more stuff done I think all right so let's style this feedback button maybe and actually I mean maybe before we do that we even get the feedback button in a sensible place so this nav is going to be flex item center justify between yeah P 0.5 doesn't exist in default soand it only exists in with this telling you I plug-in if you look here these are all things that are probably gonna be in tailwind by default sooner rather than later so this is the plug-in that we wrecked that we kind of tell people to use with dough and UI and you can see it extends the spacing scale quite aggressively it adds some colored shadows add some extra values to like widths and stuff add some custom form styles yeah and that's basically it also adds some defaults for adds group hover group focus to a few things focus within so it extends it pretty aggressively and in a way that we think makes it more useful okay so for this other avatar it looks like it has the same styles as this Avatar here so maybe we'll just like extract a little Avatar component let's have this take like a like a image like a SRC attribute maybe maybe like a Holtz text which were just like default to nothing since I'm really needed all the time so what does to you avatar source equals yes then we'll slam it down here too all right so now we got our two avatars we got some of these buns and stuff okay so let's style these feedback button so as you like border probably the grounded that's probably the same border radius go around an MD a little bit bigger than four I think it's six pixels and it's probably like a border gray 200 and it's we're also gonna want to do some font size stuff I think text us am letting five it looks like it's probably like text gray 600 maybe it's probably pretty close border radius is a little bit much let's go with a calf or pixel border yes I try trying to avoid looking at dev tools and like stealing values right it's more fun if we just like using our eyes to kind of figure out how they're doing things so let's get some of this padding and stuff right on here let's start with like px for py to let's just see how does that look that's too big so let's try px 3 py 1 how does that feel it doesn't feel far off really it's maybe a little bit short let's go with that px 3 py 1.5 um tellen does not really anything it's kind of whatever you want it to be you can make a flat design you can make a really skeuomorphic design kind of have fun with it so yeah alright is this padding like way too much kind of feels like it is let's maybe make sure that this is also a flex container and just make sure that things seem a little bit more sensible then I think we could probably get rid of this PT 5 in exchange for like a PT 4 and it'll maybe feel like a little bit closer yeah that's like a little bit more like it it's not gonna be perfect right but we'll get there okay so it looks like on this button we want to go a little bit darker on hover weird cursor choice we won't mimic that I don't think hover border black transition ease in out duration 150 I should give us like a sensible kind of hover style they don't change the text color on that a sometimes it's hard to know what's deliberate and what what's just you know is what it is okay so we got blog support but these are all gonna have like the same style so [Music] so they're gonna be the same size this is probably 600 again I think hover BG your text black see what this gets us we can probably extract a little component for this and took some space between these links I'm trying to think I feel about the fact that we're adding the text size directly to the link it's usually kind of iffy in this case is gonna be fine cause we're in a Flex container I feel like we should this isn't actually gonna matter because it's in a flexing tainer but if you're gonna use these on their own they wouldn't work properly without this so I'm gonna do that now here's a question is this gap between all these equal we've got about 20 pixels now what about over here is this about 20 that's a little less than 20 and this is gonna be less than 20 also okay so we need like a wrapper element here so we're gonna add a wrapper element around the button and the links because these all kind of have the same spacing flex item Center space X 5 and this I think is gonna be space X 4 and let's make these H 5 w 5 text gray 500 400 that's probably good enough our icons a little bit bigger I don't want to shrink it down because um it's kind of drawn to look right at this size so we'll just kind of live with it being a little bit different something doesn't feel right about the vertical alignment of these so we have this yeah see how the avatar is not centered at all okay that's fine let's just get rid of this that should help a lot all right I think our avatars a little bit too small compared to their so let's try the next size up and see if it looks good or not yeah I think I think that looks better okay so now we'll move down to this like tabs area below so we've got this and now we have this section down here so this is really just gonna be like a bunch of links we'll just make one and then kind of quickly you know go through it all right so we got that's one two three four five six seven so this is gonna be projects integrations we could like extract some react components here to you so it's hard to know how much time to spend on kind of slicing things up and like a nice maintainable way versus just like plowing through and trying to get all the Styles done we do hope for telling you I to eventually just be using default tale and telling you is kind of like a playground right now for getting those styles right so we're gonna go you know what I think I'm gonna wrap this in a div oh my goodness class name what did we do up here max with 5xl MX Otto this is kind of like the layout container for these tabs that we're about to make go to this class here so we'll do you flex and I think we'll do like text SM wetting 5 so we get like the right size for everything what's the it's art who's no focus tiles oh there's just a focus color how tall is it okay so there's a little bit of a gap but like it's quite a bit of vertical space above the link so that'll be just a bunch of padding on the actual link so we'll try a py2 maybe you start py 3 mmm be my 4 that's probably closer and I think we'll do like a border b2 border transparent on all of them except for this one which we border black and it looks like that's going to overlap a bottom border on this whole parent thing which would be a little thing that we'll have to figure out let's go back to py 3 and it looks like there's maybe a little bit of horizontal padding:2px 1 PX 0.5 okay so that's pretty decent now here it looks like we're we're gonna go with the same color that we used up here which was 600 I think I'm actually gonna drop that down a text gray 700 earth to 500 500 is like our minimal accessible yeah that looks nicer all right and we'll do the same thing these tabs so let's just grab this dududu text gray 500 why would you add padding on every individual element as opposed to the parent container well in this case the border has to go on the individual elements right so when I click something there has to be a border at the bottom of that element so if I put the padding on the parent instead then the border would show up like right underneath projects so I need to have padding that pushes the border to the bottom so that's kind of the the trick there I think my daughter just woke up so we might not get as far as I wanted to but we can do some more of this tomorrow okay so now it looks like we're gonna have like a little bit of a gap between each one it looks like 20 either 16 or 20 so let's try we'll try both we'll try 16 well let's try 20 first I like to start big and then subtract if it looks like too much you know what it's not that bad I was to roll with it okay we got a little bit of extra space between the two sections so if you look here we got this div we got this nav so basically in this header I think we're gonna want to do like space Y maybe like two [Music] yeah I think that's pretty good and then we've got no harbor styles on these yet so let's go and do that so maybe what we'll do is we'll kind of like bang out getting everything kind of in the right general look and then we can do a little stream where we kind of go through and chop it up and componentize some things so here's kind of like the header it's looking pretty good they have a link on the logo so let's just do that just to be correct here [Music] yeah so that's pretty good well one of these like some focus tiles instilled on us we're gonna want to get these dropdowns and stuff working too but maybe again we can kind of do that as a little project after once we can I get the bones in place okay so maybe what we'll do is try and get this section done before my daughter gets too upset and that's kind of a clever trick that they did here by the way this is like the title for this section but it's on a different background color so I'm guessing there's like a negative margin that's pulling that up over the border it looks kind of cool okay so let's add a bottom border to the header so now I've got a little bit of a bottom border there and now if you look closely you'll see that the bottom border is underneath this border which we actually don't want we want them to overlap so I think the trick to that is gonna be a little negative margin on where's this element maybe maybe this element let's see if it'll work here negative MBP X yes that works okay so there's that kind of done which is you know looking pretty good again it's not identical but it's pretty close so let's get this next section going so after the header you've got kind of this like hero section semantically I'm not sure like if this is considered the header still you could probably make an argument that this is still part of the header of the page I just slamming it a div now though so will tell you the same thing max with five XL and X Auto and probably we should have some horizontal padding on these two by the way the things that have the max with 5x also I'm gonna do that let's do like a px six also we're being stupid here by building the desktop version instead of the mobile version I have caught myself being dumb just now so maybe we'll make it responsive after so easy to when you're sitting in a big screen fall into the trap of kind of not thinking of the mobile experience first okay so then we've got this so again this is gonna be like that left half and the right half in here we're gonna have like an avatar now now we're gonna probably want to add likes props to the avatar or something let's just make a new one PBS where is it and get some rough dimensions on this it looks like it's about 100 by 125 so we'll call it 24 and rounded full got some padding on this beast vertical padding of about 56 which that's probably a toe and utility 14 and then this vertical padding actually is gonna go from here all the way down to this border I think so about 108 27 so we'll probably do 14 and 28 on this py PT 14 PB 28 okay and then next to this image I never it's tempting to make this like an h1 right because you think oh well it's big but it's not really like a title of a page you know dashboard is probably like the correct h1 here I'm just using Alfred to get it from my clipboard history the Twitter image because I copied it earlier at the beginning of the stream let's make it an h1 for now and well I'd like a section underneath here or I guess we have like a definition list and this will have a term which would we get integration and then this is gonna have my username and github logo I wonder if Steve actually has like social icons on here no but we can find one all right so I guess we'll just like start playing around with this so text for excel font bold I don't know does that look like Oh Extra Bold what is this using San Francisco right now yeah it is Clem stupid Joe and config yes we have to extend our font family to add inter it's not actually being used right now so with your inter VAR for the variable fonts and then we'll just do default theme dot font family dot sins and we'll make sure that we import that from toe and there's a stupid bug in chrome right now where I'm using the system font any fonts bigger than I think 20 pixels don't render with any font weights did I mess up any class yeah I mean that's in here more times by the way yep class equals tons of times I need that can auto fix thing why is it complaining what's this all about alright probably we only need like bold now they actually have a real font semi bold even yeah bold let's make it bold whoo all right looks like about the right size honestly so let's make this flex container and let's pick a line height for this what is 4 XL until when don't even know for Excel is 2.25 Ram which is 36 pixels so letting 10 probably if I had to had to make it guess as to what would be a sensible one yeah so get up here 32 maybe 36 let's try space x8 it seems sensible and then for this kid integration that looks like a smaller piece of text to what we had before so we'll say class name is really text XS maybe letting five as well maybe text gray 500 uppercase maybe we'll go tracking wide usually looks good on uppercase text looks like there's a little bolder so and would you like font medium - yeah it seems pretty good got a little bit of a gap here 38 - pixels I mean why not - so maybe we'll call it 28 space why seven maybe six I'm measuring things just by using the screenshot tool on Mac OS just like command shift 4 and then I just measure things and then hit escape super handy little trick text SM letting five fonts me show me you pull pull with too much medium let's try medium okay well give a little github SVG logo here get a logo SVG zip file I'm just gonna take this one all right so let's get this fill rule fixed I'll get these classes removed and we'll just do the same thing that we did up here where we kind of let ourselves style it in a sensible way also anyone who uses a lowercase H in github that's my biggest pet peeve and all of web development can't explain why just drives me nuts flex item Center space X - maybe this is just a total guess probably we won't like h5w five smaller even h4w for peanuts gonna be okay we need this to wrap in a span to get our space working SpaceX one yeah two is nicer yeah I mean I think that looks nice it's not identical but it looks nice to me now you see like they are trying to make the the avatar aligned with the bottom of this text so we could build it that way to like say we wanted to do like a minimum space of mainland space of four or something or we could just leave it that way like yeah maybe that's the way a good way to do it if we wanted to do this like using flexbox to kind of magically make this work we could do like flex flex call justify between and get rid of this space X 4 and this should actually basically look the same right if we got rid of this it's gonna jump up there but this keeps them sprite apart but now if the avatar was smaller for whatever reason then it kind of get a little too close maybe so there's an argument to be made that maybe you want to have like a minimum space of 16 pixels no matter what you know but yeah this is kind of a cool trick so let's just leave it um let's do this little hobby badge thing so let's put this h1 in here I'll add a little spin next to it that says hobby class equals no no we'll do the same thing text black font medium rounded full px 0.5 maybe and py 0 probably about a fall and do like a BG gray 50 border border grey 200 I don't know what's that look like and let's make this inline flex why is my AP X 0.5 not working is it working and it just like doesn't oh yeah it is working poof shakes I guess we need more the rounded corners uh Trixie sometimes okay so let's go uppercase on this text maybe we can go letting four because it looks like it's too tall they can go wider on the padding oops maybe now we can go back to the letting five trying to get it kind of looking balanced I don't really care if it looks like dental call you know I just kind of want it to look pretty good for is a little too tight five and that's a four pixel difference like you could go letting 4py 0.5 would that be kind of in between or is that the same I was like it's the same as this so let's just roll with that I think that looks pretty good and we'll just flex these up so that they're in the right position looks like they're centered I'll just take a guess on a spacing maybe three our fonts a little bit different getting the alignment right here is a little tricky because you could argue that you want to do like items end here but that's not gonna look right either and I don't really love the idea of just like trying to align it visually you know like so we could just go like items Center and trust that okay that's technically centered but kind of looks bad and that we could do like you know a little empty one sort of thing to kind of give it in the right spot which yeah maybe that's not that evil of a solution I don't see the UI jumping it only jumps because I'm switching between tabs it's two totally different screens but maybe I'm misunderstanding you okay so let's get these buttons in place so we've got like an invite team and import projects so I'm just gonna bang those out and then then we'll have to take a break till tomorrow so invite team this is probably technically a link and so is that so we'll make both these links invite team and import projects that looks like it's the same font size as above but they're really big links so let's talk about at the same time we'll do like text SM will do inline flex so we can apply this stuff in a sensible way letting 5px maybe six and it actually looks like this one has got more padding than this one I wonder if that's because they're trying to make these actually the same width so this is like 140 and this is also 140 so yeah and here they're not really using padding to determine the width of those links they're just making them equal couple different ways we could do that and we'd kind of probably want it to be based on like the widest link I have an idea let's let's just get things like looking sensible and then explore this idea of mine okay so we'll get this kind of in place this link is gonna be like text gray 500 font medium looks a little bit thicker and this is gonna be text white BG black eg whites both of these probably should have borders let me just put this back on color where it makes sense I try to put things in order of like in outside in its like flex determines kind of like the whole shape of the element background applies to the whole element even in the padding area so it comes before padding and then I do padding and then I do the things inside the padding the text size and the line height they affect the size of the element so I do those first and then more superficial stuff towards the end that's kind of like my general rule so that's sort of flex on this too or mmm we could build this is like a two column grid I guess I don't think these are equal with though this is like 458 yeah so I mean it is a grid so we could build it as a grid but I don't I'm not gonna worry about that too much let's just kind of get it going here so they're next to each other now take this borders on the outside right so we'll do border border transparent on each one would you round it cuz that affects the shape of the element let's look at this this is like probably the right thing this is gonna be border gray 200 on this will do it justify between to kind of get everything slammed over to the right spot class autocomplete is coming from the Toman intellisense plugin how are you planning on documenting the interactivity for the JavaScript agnostic version I'm not really planning on documenting the interactivity per se like every single thing like I'm not gonna say oh when you press the up arrow you should do this that's kind of just the job of the user and reading the way re rules but we will document like when it's open these classes should be applied on the active element it should have this background color and stuff like that it'll look basically the same as how we document toggles and stuff like that okay so let's try like py for maybe ooh aggressive three aggressive still - that's probably looking closer okay so you can see in theirs they've got less padding here and more here is that two pixel border on hover you know it's just cuz it's black it looks aggressive okay so you can see that they've got more padding on the invite team and less on import project but really it's just because they want them to be the same width you can see here ours the important part looks a bit right but inviting doesn't look like enough so first let's get these first let's get import project to have the right sensible font weight font medium I usually put the font way before the color because the font weight affects the size of the element okay so that's decent and well out a gap between those that looks like they've if I had to guess is like 32 pixels Oh 24 sort of front-end developer am I just a embarrassment all right space X 6 whoops let's take this and do items start okay all right so if we want these to be the same width now this is what I'm thinking I'm thinking we do something like grid grid calls to Gap call gap six there we go so now these are the same with by just relying on grid grid will automatically make like every column the same width and here it's determining the width to use based on the width of the widest element yeah I've read about that yes lint rule I haven't bothered to set it up because it looks complicated to set it up because right now I just use prettier and I guess prettier is done it's like a document format thing but yes lint fix is done is like a build action or something I don't know it seems complicated but something that could be solved for sure so let's do hover border black hover text black transition ease in out duration 150 it seems fine and then what are they doing for the black one the kind of inverting it we can do that too and maybe you like in the stream tomorrow like we'll build the rest of this and then we'll have some fun like exploring different ways to extract components and coming up with like a good API for like what it means to extract a button component and what props we should give it so that like these can be two instances of the same button figuring that out so here it is border black text black so what we're actually changing here is hover BG white that's probably it so we can actually probably get rid of this I'm not even looking at ours I'm so stupid and in text black over text black shouldn't have deleted that one alright cool so I mean I feel pretty good about where we're at here obviously there's a few subtle differences but if we were trying to steal someone's ver cell password I think we could probably succeed so yeah I think I'm gonna stop now and go help take care of my kid because it's a Canadian holiday today but my wife was nice enough to let me work anyways but I should go help her out and yeah we'll do the rest tomorrow so thanks for checking out the stream I will catch you guys tomorrow I'll probably do that kind of a early morning stream or something and yeah hopefully we can have some more fun with it all right thanks for checking out the stream hopefully you had some fun and I'll see you tomorrow if you're around yeah

Channel: Adam Wathan

Views: 16,599

Rating: 4.9610391 out of 5

Keywords:

Id: r6mykOig_Bs

Length: 71min 47sec (4307 seconds)

Published: Mon May 18 2020