Livestream - Building Steve Schoger's sidebar designs with Tailwind + UI Devtools

0:02okay now this should be live can i go back let's see if this works okay not yet

0:26okay there's always a lag i don't know how long the lag is which makes it slightly tricky okay this seems to work good i guess i'll just start and we'll we'll just see how that goes um okay let me see if there's a chart window somewhere sorry it's been a while since i did this so i actually don't remember how half of this works source camera microphone windows there you go okay now i have a comment video nice so i can close this this will stick around perfect

1:22all right so just as a as a tiny warning uh the cha look like whatever you're seeing right now i've said it like three four five seconds ago there's always a slight lag so if you say something and i don't listen to it or act on it it's because i i just saw it like it's always a bit late sarah hey gavin oh in the same city that's pretty cool should hang out sometime uh all right then i am live all right so what i want to do is going to build this with the taylorman and this is steve stevechoger who is like uh who's a

2:06who's the designer behind tailwind so all the pretty things you see it's him and adam and i want to try to create this and then maybe another version so and doing all that i want to kind of show you how it would feel like if i had ui def tools as well um gavin in the chat i'm not gonna say it out loud on chat but dm me and we'll talk specific uh all right so let's kind of try to mark the delay out first i'm going to shrink this up and i don't need this window i don't need this anymore okay so what i've done is i have a

2:49create react tab running and that's kind of it that's all i've done till now and i'm going to start marking this so uh i want everything to be in the aside so let's see there's like a this is now i suppose in the nav we have we have a oh i should have had the icons but anyways i'm going to create like an item list over here and then just keep adding things here so there's the home icon which standards nothing team calendar docks and reports all of these do nothing yet i'll be cool if this is like a row so let me create like a row component

3:44return this is a div and inside this div i want that to be actually this should be and as i so that i can put it in the list i'm going to make this into a list and render rows here perfect server this has dashboard and then i can say i can put it i can dashboard um over here said you can't see my face

4:26face aligned with the screen that's not intentional let me see oh it will also hide the code okay i'm gonna put it somewhere on the side here okay back to the chord oops there's another window i don't need um probably put this in a span and this is where i wanted the icon so that i can say i can home perfect and this should also come from rob so this should be i can um there we go it should be a rendered thing okay cool so now we have something on the board this looks like a thing oh and then i i kind of forgot i should have like put this entire aside

5:40into something so like how would i do this tailwind is uh bg i think this is white and that would do it and i'm going to give it some width i don't know how much so this is where i would add ui dev tools um let's see let's bring back the terminal so hard work says you can add it from its repository so you notice i haven't mentioned i can add here i mentioned this uid afterwards what it does it goes to github slash ui def to tailwind and it installs the repository and uh if you haven't seen this yet then you can go to this url

6:31there's a bunch there's a long story there but i've already added this and then i'm going to include it in like the index.js of my package import tools and i'm going to just basically wrap my entire app in this and what that should do reload that should give me this and this is kind of the key thing so i'm gonna grab it select the element and it says i'm not running the server which is because i haven't started it yet and i can say run the devtools server and pass it my tailwind config so there you go now the server is running reload perfect works so it's yeah shows you

7:35i've chosen the aside um first of all let's let's kind of work on the width here so i want it to be pretty wide i'm thinking somewhere like 200 pixels or something [Music] i think let's go with 240 pixels and in steve's design this seems to be like very rounded right so i don't have a sigma file because i don't work at taylor but i can eyeball it this would be large and it has like a nice shadow using our outline maybe it's large let's go with extra large okay so we have something here

8:31okay and now i want to talk about this so there you can see there's like some padding in the hole in the entire card so i'm going to add that padding to the side itself i can't actually see how much so let me take this row that we have this li and let me add some let me add a color to it so fill let's make it some shade of well my mouse no my mouse died i didn't charge it connect the usb to the hulk damage again give me a second okay the fun thing about apple mouse is that it plugs like this like who came

9:31up with the design no i can't i can't use this because how are you supposed to so i'm gonna use my laptop camera sorry laptop keyboard and

9:47there you go sorry for the weird stopping between okay now you can't share the screen let's okay good one screen

10:14and here we go now we have both i also want the terminal which is this

10:27good okay go back to this i want this to be uh like a shade layer let's just put any shade right now just so that i can see the padding

10:45there you go i think four is good same for the top this looks good and now to actually do this color uh this feels like a gray 100 like a really light one maybe 200 i think i'm happy with 200 oh by the way do you see this so every time i make a change let me show this every time i make a change here so for example if i make this let's say this color and let's see a new row come up which actually means it's changing the code so you see it's adding like it changes the code over here so what i want is like this also has the

11:38same border radius i think maybe one less this should be small maybe default yep that's better oh the screen isn't visible like sorry sorry sorry yeah i told you there's a lag

12:06give me a second

12:19okay there you go yeah so the like what you see and what i see is like uh there's apparently like a 30 second gap which means you like your comments are coming now and i'm sorry i think half of you are shouting at me that you can't see anything and i haven't seen those comments until now okay now this should be good okay back to dessert hey daddy what's up okay so back to this uh yeah i had this i had rounded i want some padding here so maybe eight pixels looks good and i want the icon like the this thing has an icon i know

13:23steve uses hero icons that he made so we're gonna stick to the same items and we're gonna draw it here looks good okay perfect now this now has an interesting thing like this should be your flex so that we can get the alignment so i'm going to make this a flex uh extra should be centered and then i want some space in between i think this should be fine and you see like all of this is added to my code uh let's talk colors see this is faded but this is not actually let's look at this one so what would be interesting is that now that i know the size

14:23i don't need this background color by default so this should be transparent and on hover this should become day 200 doesn't work yep but it's too it's too sudden i don't like that either so i'm gonna add a transition 150 milliseconds and fade in and like these are properties that i honestly haven't even memorized yet i should look them up transition colors duration 150 easing again and this looks much better over focus let's do the same styles for focus focus um 200 okay perfect it doesn't get the cursor that's because this should actually be a anchor so i think this should have been an a tag and then

15:28cool we should wrap this in our align there we go and then i can just give it a fake place to go for now perfect that looks good okay now the colors and padding are off so this thing should have a left padding for sure i'm going to skip the right patting actually you know what let's let's just make them the same like this and then i want the color so i think i'm going to give the color to the parent itself because i'm feeling every element would have similar colors is this good okay this looks decent actually you know what i'm gonna switch to my

16:27laptop screen so that because my external monitor colors are okay you can see i planned this very well

16:44there we go okay camera primary display perfect now back to this video can shift to this one all right cool and now i need all my windows to be here this comes here this concealer this concealer this one goes away come and squeeze the other one

17:24okay all right back here now everything seems big this is so much better well i can actually see my colors now so this should actually not be cool this should be lighter this should be something like this 600 okay and the icon should be lighter so this goes all the way to 500 maybe 400 because you see this is really light okay and you see the icons kind of big that should be smaller so i'm gonna go to the icon select this uh

18:09maybe 16 by 16. you know what they're kind of seem bigger than that so it's probably five it would have been really cool if i just hide this sigma file because then i could just see that's okay okay so let's now let's make some new rules so this one i have let me go to sigma yes team

18:40calendar reports okay can all have the same icon which is bad team users there we go team calendar

19:08documents hmm i wonder what used for this feels more like an inbox and then finally some charts

19:28okay so think i can steam calendar docs reports perfect and would have been really good if i removed this from here and actually make a dapper around the icon so that i can give this a class name okay so selecting this again this is like one of the things i still have to fix uh equalize your mic and increase highs a bit okay i have i don't actually know how to do any of that but i'm gonna try i have an equalizer here oh well it doesn't let me sorry i'm just gonna keep it closer to my loud i hope that helps okay so yeah so one of the problems that i still

20:35have to solve with ui draft tools is when i hover on things you see i get the svg but the svg and span are like there's no gap between them so if i want to select the parent element i can't do that yet so i have to still build it somewhere here so my trick right now is i sometimes add padding so that i can see it like you see this extra and then this is a span i want so now this one should have the color that i wanted instead of 600 this should be lighter and you see it goes to all of them because they're all the same elements

21:18looks good now in steve's shot there seems to be like a lot more room here i'm not sure if there is space between the items or if it's just more padding to me it feels like that more is more vertical padding than how much i've given right and you see i give to it for one it goes to the rest of them looks good now this feels a little tiny i'm gonna make it more broad looks default looks good okay what else do we have we have projects and this okay looks simple enough let's go here there's still part of the nav so

22:16i'm just going to add a span which is projects and then this is another list of things i'm going to add a url and then say i don't have a nice thing to call it so i'm just gonna call it a project for now project and then inside this i can say website tray design graph ql api and let's add the last one customer migration guide and now let's make this component it's kind of like the previous component props span crosstalk children okay now let's style it so this project should is all caps so text all the caps probably a size smaller and has some letter spacing

23:25so i've done this thing again with the ul here i don't have access to it so i'm gonna add some p by four just so that i can catch it

23:43this guy shouldn't actually have the top only the bottom which also in second thought should be margin so how much more than maybe eight because this thing feels like it's not too much right okay uh again this is the lightest shade of gray and there's some letter spacing so you can't do letter spacing here uh actually don't even know how to do letter spacing with taylor let's see injector spacing okay tracking light tracking wider i think vivian light need one of the two wider ah that seems nicer okay and now coming to these um first of all this should have been anchored which goes nowhere for now

24:52and now i'm gonna make each of these block and there's like a lot of padding so padding top right maybe eight pixels and there are also a lighter color now even light

25:22and this actually i made it too light this should be 500 okay now you see there's some all of these seem like the same row which means this has a padding of eight so should this one and then of course it should be a block what did i do oh eight pixels not eight on the scale all right this looks good now finally we wanna design this bottom card interesting this is outside the knob i'm gonna just make it a div and there's an image i need an image with some part and then i need the names like diana robertson oh this is interesting because it's a

26:20nested layout span now this pad if you prefer and then we need like an icon icons dot care which i'm gonna grab from hero icons again oops here your icons

26:58thank you [Music] okay let's save and see what we have this should be in a span okay so now you see this is not designed plus i also don't have an image so i'm gonna go to unslash and get a somebody's face okay the granastic like so the interesting thing here is that it needs to be like can i just search for avatar okay fine we're gonna use this person open image i know there's a way to like change the size i think with um 120 there we go nice and we're going to drop him into the image perfect okay this is still too big because we want it to be like extremely

28:09like aligning with the thing so first of all let's make this flex so that i can get everything horizontal center and now i can make this smaller something as big as the deck so maybe this much and then rounded full looks good and if you notice this is also a flex so this part i want it to be flex but this time it's like columns so that it's horizontal and stuff and there's too much too much space here okay so this is small text it's not big and this should be bold medium output medium and then i want the container here to have spacing so i use the space heaters

29:20it should be enough the interesting thing is that the svg actually let me come back to that because what i'm realizing is first of all that the name is small this shouldn't be here this should be at the edge which means i want all of this to be in a different div than the rest so that i can take this div no reflex take the ah i'm okay yeah i want all of this to be here right and then this top div i actually can say justify between to get this effect right this is between i can do start and brown between okay and then let's do

30:20the icon now so this icon again i got the svg when i don't i want this span that's a missing feature that i have to build the one and now i have it and this should be this should be like a lighter gray

30:45yep that works again this whole thing now needs to be a flex neutral flex flex column and space between so that the two dips can be in the extreme ends and also realizing now this block like this has padding so it's inside but this isn't which is bad so this ul should have some padding i don't know how much i'm gonna add a little is that enough

31:23oh no that's i want it to be aligned with this though so it's probably more maybe and then so should this then padding left it's actually not three is the right number okay so this should also have three okay now we're good um this should have a little less color because it's secondary text i think we're good okay now i want to do some really interesting things so you already see like i have some hover but this doesn't have any hole like it's a link so i it would be good if this gives you some feedback so on hover this should change to a different color maybe like a purple

32:22or a blue probably this one indigo 500 so that's good all of these don't change color which is fine this view profile is a link so this should on hover turn into the same indigo 500 on focus indigo 500 600 now 500 same for this focus indigo okay so there's all like layout stuff now this looks good now i'll try something cool which i haven't i want to see animations if i can do a transform on this so when you hover on this part which is i made it a span there should be a button right okay so when you when you're on this button uh this button has no feedback which is

33:21bad because you know it's a button so what did i do so we're going to add four styles for this button when you hover on it it should have some background um yep same for focus and then it's also have some border radius there you go i think the parting should be more

34:05yep there we go and now wouldn't it be cool if this could like rotate a little when you're over so that means that i need some transform on this part like the icon and i don't know how to do that let's see rotate okay there you go all right so if you say transform rotate 45 that would be perfect um but not in the bottom i think the thing inside the button all right so this is rotating but we wanted to rotate on over so this should be group over which means i need to declare this as a group and right i don't even think you can tell what's

35:09happening because it's so sudden so it needs more transition transition transform take maybe like 150 milliseconds leave your nothing new in okay that works then i have rotated on a group holder i think that's how you do it i don't actually know [Music] yeah it really doesn't rotate um let's see okay what happens if i have this is the path with the svg this is the span so now if i change group forward to just like rotate it okay it does have this does it actually rotate transform yeah the transform doesn't transfer and rotate good but it doesn't do that on your program interesting

36:32okay i think i need to learn a bit more oh i know why because i've applied all of this to the wrong element this should be here is it right now

36:52transition transfer duration even okay i need to learn a little more till then to be able to do that that's okay let's make another let's make this dark version so i'm going to copy this aside and put another one here so that we have two of these i'm going to add some space between them and all right let's go so that you can see like this is a it's not fully black but it's pretty dark gray so this should be it's somewhere here like it's not full but it's one layer above and then the text of course needs to be like as maybe just full white

37:52which works for her all of these things already have uh we changed it so we're gonna make these okay let's just make these white as well but if all of these are right oh but these also become right interest because we're reusing the same component it uses this component that's not good okay let's make another component called road dark which is the one we'll use for the dark mode okay oh um i can actually just undo these changes check this out i can undo this because it like the sync between the chord if i do in any one of them or mostly like in code then it also undo's in the other

38:49one so this should be row dark i will call this so project dark this is silly because you'd never actually have dark and light in the same project next to each other so you probably want this to be cleanable okay so now when we change we're changing the dark one go here make this right perfect these change this should also follow the same this should also be brighter but not all that brighter okay now let's look at the hover because when we hovered we were going 300 but now with the opposites it should actually become darker right oh the hover is the whole should be brighter i don't think that's

39:54enough contrast okay this would work good this should also have the same on hover become blue the button has the wrong styles and however the button should be black okay i think this is good i think i forgot a feature i forgot these tags so let's add voice so in the calendar which means you can do okay i think you can add a count it should show up and and add here

40:46and our row component should support account so a rule okay the anchor has this and this this should be a diff together and then here's the span with the crops start count and it should only be shown if there is block start point not otherwise perfect do we get something but because we added the extra div we broke everything so this div should have this should be flex row center and i want the inner div okay so this should not actually have flex anymore should it [Music] oh it should but also this div should have flex flex items center right and then this global div should

41:53actually have a space between there we go and the space x that we had here should actually be on the inner div that's good okay now let's style the this tiny thing so first of all it has a background which is the same as the whole background that's going to be interesting because we just needed to fade away then so forward it's a gray hundred that's what we want background gray the text is really small should be small extra small small and then i don't like padding because you probably want these to be the fixed width across rows so this should be to put the forward

42:49oh and it will have to be the same so this will actually have to be an inline flex with center everything centered more with and some some roundedness maybe let's see broadway radius medium okay this color is actually not the right color is it i get gray 50 i grew 100 okay better so in steve's design seems like it's even even rounder which means it has to be if it's rounder than this then it has to be longer as well this is probably like 28 pixels yeah this this looks more real okay but now if you see the padding here and the padding here is the same which

44:03means for our inner like this row um there is no padding right because we want the count to go to the end and i think that does it the font size i should reduce it

44:28okay cool let's add the same to the other one oh i changed the classes that's gonna be interesting let's see so dark

44:48right and this of course breaks

44:56count is let's say four boxes five good now let's fix the colors oh i broke all of them so this should be right this one over should be trigger and then wait this is what happens when you copy paste without looking at it what's the whole style here hi what focus style it is yes you want sim on hover and focus good and then here we want justify between oh by the way interesting thing that i've noticed like i do a bunch where i don't treat any of these like code or preview as like the only way to do it i often like jump between the two so i'll

46:06be like in design mode and then the designing but then i have to make a logical change and then i jump into code and i do it in code so yeah that's why i call this like it's not a design tool it's it's a coding tool for uh so it's a dev tool for developers okay there you go this should be good and of course the binding thing that we fixed for the other one you should fix it here as well perfect let me give it a hard reload there you go seems seems good to me i'm sure there are a few minor things here like this this is not accessible

47:00this should probably be lighter yep okay but other than that i'm kind of happy spend 50 minutes and yeah 50 minutes for something like this it's good timing it's not bad respectable and yeah that's pretty much it i'm gonna push this code

47:30add sidebar example and if you're watching this and you're a sponsor like if you sponsor me on github sponsors um yeah then you already have access to this code so feel free to like clone it play around with it it's the example folder here and yep that's kind of it good i'm gonna stop here i'm gonna plug ui def tools so if you're not aware of it i'm not gonna tell you what it is you should go to the website and uh without that shout out to steve for doing the design work like this and yeah maybe maybe next time i'll build something else that he has

48:19um he has a few really interesting screens i really like the pricing stuff he did this one this feels so so good like this stuff feels so polished very cool to like try to build something like these cards and you will decide next time okay now i'm gonna go and i'm not using that camera you discount all right i'm gonna go bye oh i always do this i say buy it and then i realize i don't know how to close a stream because i don't i don't use this software enough found it