Working on Tailwind UI

Oh didn't didn't realize that the stream stopped OBS totally crashed so I hopefully this picks back up automatically I don't know probably not gonna happen let's see all right and hold on a second folks I'm gonna let the stream run but I'm gonna try and grab the new link and share it on Twitter and hopefully people can find it it's my first time streaming on my new machine so some hiccups here sorry about that okay hopefully this this all works yeah not sure why OBS crashed probably because everything is hard alright so let's just start by trying to get the basic building blocks in place here we're gonna think of this div is sort of like our body tag and yeah so let's start with this header so I'll probably have like a div for the header that kind of holds the surroundings and I guess we could probably just do like a header element with an avid side of it and this is gonna have a chunk on the left that's gonna have like the logo and all of the links and then we're gonna have a chunk on the right that sort of has the search and all that stuff so let's start in the search here let's throw in a button for that notification I'll throw in a button for the drop-down and then over here why don't we just grab this logo and [Music] extract that so let's see what's the size of this 30 by 30 so maybe we'll do like a 32 by 32 artboard here drop this in get it nice and centered grab that out and it's go SVG OMG all right I didn't copy copy as West Fiji just grab that and throw I'll probably be like a link to the home page sort of thing even give her this background go to all these fills so 32 is H 8 w 8 and we'll stood like texts indigo 600 or something like that I don't just set the fill to current color all right so it is showing up we'll have to figure out the sizes and all that stuff it looks like maybe Steve used a lighter color 400 all right so back to this view can I get some stuff in place we're gonna have like another link here for let's give this UI so we can actually fit everything this will be dashboard jobs plugins there's not gonna be any challenge 2.0 anytime soon I decided to just put everything it still went one point to let me get I went to one day but trying to ride 1.0 as long as possible until we've realized it's truly terrible and then change it okay so I'm gonna find this Bell icon that Steve designed somewhere bail bail bail bail bail where could it be here Steve doing a little bit of work I like to spy on him in figma there we go copy his SPG throw this in here I guess we should optimize this okay current color actually this is using strokes so let's get rid of the stroke here once you fill none stroke current color okay I'll figure out the sizes later an avatar here which if I remember ray we made this 32 by 32 or 40 by 40 I think we're gonna actually gonna size that down but yeah we'll just like grab someone off on splash here woman profile this is usually how Steve finds his stuff I always like to take two seconds just see if we can find the same one just so it makes it nice when we compare what we ended up with versus the design see how close we can actually get but if I can't find it then I'll just resort to something else I think Steve says profile photo or something he searches for what else is going on in this photo nothing women's sunglasses maybe well we find it who we find it if now I will just grab someone else sunglasses mm-hmm surprisingly hard to find the same achievement when you know Steve didn't spend like a million years picking out the right one he just picked like probably the first one on the page Steve uses this one a lot so we'll just use this one copy image address and this is a trick I like to do that people have seen me do before you can fit it to the face area and then we can do like a width of like 256 and a height of 256 so we get a kind of a square and then there's this like face pad parameter that lets us add some padding around the face usually to it's like a pretty good default yeah now we got like a nice image all right so let's stick that in here and so this is all in a eleven eighty container so we can imagine that what we've done here is basically used gel ones like container class so I think probably will do like a div here for that and we'll move this up so we'll make the header whatever color this is looks like it's gray 800 PG gray 800 so I think I've been experimented with later that I didn't used to do and I'm starting to actually appreciate he's using fixed Heights for things I used to always kind of think of it as bad like better to use padding and stuff but the problem is when you've got such a variety of content here like the padding is always just based on whatever the tallest element is and that element could change and mess things up so lately I've actually been really enjoying just using fixed Heights so like until one this is gonna be H 14 which I don't think is entailment currently but we're gonna be extending the spacing scale to support our needs here and then here we'll do like a container class probably with like px six or something like that MX Auto so it's centered and then for this nav this will probably like a flex justify between so we get on the two front sides and for each of these links we've got like font size 14 medium white so let's just do that quickly text SF on medium text white we're going to add some space between that stuff too but we can kind of figure it out in the next step let's just see what we're at here so this is a disaster so let's just get this stuff working so we're going to want this to be flex to so everything goes beside each other in a predictable way and we're gonna want this to be flex all right and now this input is all stretched out which is kind of funny so let's just do items Center and we'll do the same thing for this one I am sinner and honestly probably this one too all right so now let's size this image so I think we said we were gonna do 32 pixels which i think is a jw8 and rounded full okay even that kinda seems kind of big yeah it's like a little bit too big because maybe not this header seems big I do my math and correctly here says it's 56 pixels you know what it is it's the it's the resolution of the monitor playing tricks on me because we have a because it's set to such a low resolution on this giant 32 inch monitor I'm expecting things to be smaller okay so we've got this has a height hmm hmm I think I'm gonna move the height to here and that should get the centering behavior better okay now that's looking like a good start let's see what we've got for like distance between these links 28 pixels that's 7 and 2 and so we can do that now depending on what we want like the active state and stuff to be for this that could change things like if Steve has he's got 16 and he's got this with like okay so he's kind of imagining this is like having a solid background so it's gonna do that too so this is one of those situations where I'm trying to think would we use a fixed height first or should we use padding we could probably just use padding all right so let's scramble these will do letting none so that we don't have any line height messing with us we'll go over here we'll say px 3 because I think he had a padding of 12 and then he's got a vertical planning of 8 so that's gonna be py 2 okay and now the space between the different things is 16 so for at least these we're gonna do ml 4 and for the space between this little logo we've got 25 which is not really a Cattell one thing like it's kind of like six what's DML six on this one I can be convinced to even put a wrapper around this and space the wrapper from the logo all right so that's what's like our actual resolution here oh wow see we're only working with a hundred pixels of width here so it's kind of limiting for sure let's uh let's bring this to like 1280 and let's see what's like the most we can get zoomed here mm-hmm I don't have Suzy installed on this computer yet otherwise we could maybe tinker with that a bit this will probably be fine though this will kind of keep us like that a similar well you know what let's set this 250 exactly and then we can just kind of design this way and then I can set this to exactly 50% - which is this is probably that yeah so now at least we can compare them and then we'll just like go back to full zoom for details and stuff okay so let's do this search so we've got six pixel border radius hi 236 gray 900 class equals each 9 PG gray 900 rounded MD okay I'll have to think through I like the focus state and stop should be place all their search and we're gonna do this icon so let's grab the magnifying glass oh we got a sweet G already so OBS still alive here yeah okay alright so this input we're gonna need to like wrap this and something else so that we can get this SVG in the right place so this is a stroke again so we got rid of this fill none store key class equals let's just see you it's probably the built in science or Steve's default size 6 and it's gonna be gone for the actual thing 600 now this is using a slightly older color palette we've been tweaking the color panel up a little bit on so it might be we might want to do 700 at this point 600 actually maybe 600 will be fine let's see that's probably okay so give this a class of relative we'll give this a class of absolute no no sorry we'll wrap this in a span and absolute incent Y zero left zero flex items Center get that to kind of show up in the right spot and then we need to do a little bit of padding on the Left Steve's got nine cuz he's a animal oh wait maybe maybe I'm what's he actually out here eleven he's still an animal that's gonna be annoying so we want like padding left probably three get 12 pixels and then for this input we're gonna want to do like padding left a eat or something nah 10 mmm do we dare go 12 I think that's too much I think we did at an 11 but I'm hesitant to depend on it and then I think we actually want this to be like text small because I think Steve's using 14 pixels as has default size for this sort of thing alright so there's that probably need to have some text in there that's visible so with your text white now for our focus state let's do a white background I'll focus then we can do focus text gray 900 yeah that seems alright and we won't do an outline since we've got other focus styles now okay like that's pretty good I would say and then for this I mean we could just leave that the same color it's kind of a tricky one right cuz it's a little bit hard to change that color one way that we could do it just like for anyone who's curious let's just like close this for a second so you can see this closer up so if we wanted this icon to have like a different color when this is focused we could do this kind of cool trick if I see I've got a lot of custom stuff going on in this config file right now in our text color we could enable the focus within variant now this isn't supported in I 11 but I think it's supported in most other browsers out of the box maybe not though then here we can do focus within text gray 500 and then we could just get rid of this and define it up here and just like for fun let's just make it like text read 500 so we should be able to see like yeah another icon changes color when the input is focused even though the inputs a different element so this is kind of cool because it gives you some control over that so here we have 500 but like we could probably even go as light as 400 I'm focused yeah like that looks pretty good to me okay um let's do this notification icon oh this is the different notification icon it's this one we made a boo-boo all right so that's actually not gonna be like this it's gonna be a fill one current color and its h6w six text gray I think this has become text great 400 in the updated color palette yeah okay and then we have some space between this stuff so that's like it says 37 but it's not because it's probably more like 32 when you account for the fact that this is inside of a frame and then probably the same there so that's like eight one thing I've been experimenting with is this new concept of like space helpers in tow and I think I have them in here yeah so instead of having to do like what I would normally do where it say you know ml 8 here and I'm gonna 8 here but nothing on the first element you just want to parent you just specify how you want things spaced out and that kind of gives you that right spacing now I'm hesitant to put this into l1 by default because it feels like I don't know it's kind of a little too abstract and magical but some people have suggested some other ideas like maybe coming up with like a variant that's like not first ml 8 you know what I mean but this is kind of confusing too because here you're talking with the children not talking about the current element you have to do like something like this children now first and that's just like hello verbose I don't know I kind of like the idea of just having a utility that's kind of smart like this maybe it feels like a little bit not the same as Joe wants other utilities but it's feel so useful that it's hard for me to not want to do it now the benefit to doing it like with this approach is you can imagine wanting to do something with board or tea right so it's not it's not really just about like spacing the same approach of only applying something to everything except the first element there's other situations where you want that too so have to think through what the best solution is for now though what's going to just do it with the SpaceX thing it's kind of fun and maybe we can do the same thing for up here so see I had ml for for all these than ml 6 for this one here instead I might do something like div class flex items center space x4 so all the links are out of space to that way get rid of this ml 6 and then it's easiest you know we could just add the ml 6 back here and get the same results or we could even jump up here and say space x4 just spaced out or SpaceX 6 space those out so something like that it's kind of neat I don't know it's kind of nice and declarative alright so we got like this kind of had our thing in place um just like for the sake of maybe moving on to some other fun stuff why don't we just drop it and just move on to the next chunk of stuff okay so now we've got this like other section after the header I guess we'll have like a main section here with a div and this div is gonna have a white background with that little shadow at the bottom and then there's gonna be a container inside that div and then inside that container is where we're gonna have our actual content so it's kind of div div City over here so this is gonna be BG white and what what is Steve got for this it's like a shadow just the default shadow let's bring a UI back here and then you have a container MX Auto px6 again that's just arbitrary we haven't really taken that from the designs just cuz we know we want it centered and probably do adapt to the breakpoints and then inside the container we have our actual content so we could make the container flex our like flex container that can holds this stuff but I kind of like the container just being like the box that it sits in so I think I'll do that here instead so we're gonna do flex I am Center probably justify between and this is the sort of header that I think like we could try and think about doing this with like some sort of fixed height but that kind of feels like a bad idea in this case it feels like this should be more adaptive so now we've got Ricardo on the left here and maybe that'll be like our h1 yeah we've got like a link up here to go back to like the job title I guess and then on the right we've got some actions like disqualify advanced off or I'm gonna have button just qualify Ben swoops and then we've got these like to chevron deals so why don't we just grab those icons so we have everything in place and we'll grab this avatar - I guess so dude if here flex items Center now if only we could find the same images of Steve let's say man profile photo glasses will we find him where are you Ricardo these don't look like men to me it's mostly look like glasses I may need to find a new Ricardo actually I've met this guy that's funny I met him at a convertkit conference a couple years ago I don't know that's this guy looks like he's eager for a job opportunity so we can make it him so I'll fit to face area and face pat equals 2 and h equals 256 and w goes 256 we probably don't actually need an image that big but when you reduce this down to 50% size it's like nice and crisp all right okay so yeah this is look perfect so now I was gonna grab those icons so Steve's kind of been I think it's these big icons so this is a stroke let's see what we got so the size of this is actually fourteen by seven so if this is fourteen by seven then we know it's the same yep so that means we can just do age six w6 and kind of move on gray 600 which i think is not very 500 we added another Dark One and we'll just grab the other one to show you a cool little thing actually if in case we were being really lazy and we just want to reuse the same one talent as transform utilities now so we could just do transform rotate 90 rotate 180 and now we have both kind of cool but that's kind of silly when we have the actual icon here so we'll just grab this path out so simple holy one thing I'd like to be able to do one day is read what the hell these paths mean I truly don't have the first clue about how to like read what this is okay cool so let's go back to figma here so here we got oh we got another icon oh that looks like it's probably this small Chevron so this is gonna be a div this is gonna be an inline flex container okay I already pasted that in I didn't optimize it okay now what is the size of this so this is by default 8 by 4 so if this is 8 by 4 then we'll know we can just render it at the regular size yeah it's that's convenient so is again an H 6 w 6 this is using strokes we decided to make this new icon set using strokes instead of Phil's because then if you want to kind of like tweak the feel of the icon set you can do it by adjusting the stroke width right in your code which is kind of cool off to show you an example thanks great 400 we don't really have a good fancy icon here I mean I'll show you anyways so we have this little oops civil SPG here if we wanted to we could like get rid of the stroke width attribute here or I mean we could just leave it you can see we can bump the stroke width up to three we can bring it down to one and the shape is all still preserved because it's all just kind of being drawn dynamically which is kind of cool if we use the fill then like sort of the chunkiness of the line would be static you wouldn't be able to control that yourself okay so view items Center on this I'll wrap this in a span so that we can control the spacing better now we'll head back over to figma so this is going to be 14 text gray 500 text sm text gray 500 looks kinda weird the way that that's centering is working this is one of those things where sometimes it feels like you have to do line-height one it improves it that always kind of feels like a weird thing to do too because it's being centered relative to the line now relative to the text now oddly enough like see how weirdly this it's weird it's like 1.5 is particularly bad for some reason interesting if we did yeah I guess we'll get rid of the letting on it but that feels kind of silly that that works that way letting on okay all right so real Ricardo that's H 12 W 12 oops not fake Ricardo we got over here and here we've got fun-sized 30 what would that be in talent does this extension tell us that text LG i need to get a brad who maintains this extension to add some pixel values they'd be kind of cool so LG is 18 XL is 22 XL is 24 so this is probably three XL and text gray 900 just to be safe and font X dry bolts and for space we've got 15 pixels so we'll call that 16 pixels just do a space x4 here and now this is interesting see how these are really not aligned at all is that just because this icon see how big this icons view boxes relative to the actual icon size that means that it's Steve's design it goes all the way to the edge but our icon is drawn with a much smaller canvas so we're gonna do something kind of sneaky and I'll have to ask Steve what he thinks with this now we're just going to take this icon we are going to take this and center it and we're just going to reduce this to be like twelve by twelve and part of me even wants to like really go tiny on it but that's not gonna work I guess 12 is the smallest we can go now the thing that sucks is we're still not going to be able to get this to go all the way to the edge this will be probably a little bit better let's just see how it turns out this is one of the trickiest things about icons so we'll just grab this move it down there change this view box to 12 and then we can drop this to 3 since we cut everything in half all right that actually looks quite a bit better and probably good enough so we get rid of the stroke color now I'll add some space in between which we didn't need before but Steve's got 10 which is probably more like 8 when you account for the fact that this view boxes got some stuff going on so let's just do like SpaceX - I like the SpaceX thing that's pretty cool all right and then this 2 here is 16 so I mean like we can do some space Y here if we wanted to - now I don't know that I would actually do this but what I say that was 16 ish so 4 one seems like too much when we actually look at it let's try three just kind of eyeball it and then 419 pixels that is unfortunate Steven because that's like four point seven five so I guess we get to age five or py5 let's do that right here yeah I'm using the canary version of tail and plus it's got all sorts of customizations not crazy customizations this looks like a lot but this is just us trying to figure out good default styles for the custom forms plugin but I've got some custom stuff like more spacing values we've tweaked some of the default colors a little bit added a couple extra shadows that I needed all the stuff I'm gonna kind of figure out what we actually need and make sure that it's in tail and by default as much as possible cuz I don't really want people to need to pull in a custom config to do this stuff all right so we got some buttons here so both these buttons are gonna share a lot of properties so let's just do them together it's gonna be h9 because it's 36 pixels px looks like Steve's got a px for but maybe not on this one this one's a px 12 this one's a PX 4 or sorry a px 3 I think we should probably be consistent on those now this one's got a border 200 great border border border gray 200 and these are all 14 pixel font I think - so let's text small medium I'll probably tag 1.04 forms like sometime before we release Thailand UI SpaceX isn't in the documentation it's not even Intel inde itself it's just a custom utility that I'm experimenting with if I decide to keep it it'll get added to the docs but it might not get added to the docs because it might be thrown away the way that SpaceX works is it's like the selector looks like this space x4 star plus star margin left one Ram basically so that's kind of the CSS for it so that what this is doing is it's targeting its targeting this element right so it's targeting children of this but it's only targeting children to have a previous sibling so this is kind of it's kind of the equivalent of doing of doing this I think that's basically the same all right so back to this so we've got text gray 700 for this one and I think they both have a really subtle shadow this is our new shadow for talent 1.2 now Steve hasn't added to this one but I know that he would want it there so I'm gonna add it poop what am i doing can't even use a text editor shall SM it's like a really subtle shout-out you like it's actually this is a good place to look at it you can kind of there's no way this will show up in the stream actually but you can see this like just barely a shadow there I don't really want to share the config file until I know that it's worth sharing because if I share something that is still a totally an experiment and people think this is how I do things I don't know that seems bad all I've really done is updated some colors because we've been adding a 50 version of each color like an extra light version and in doing that we kind of tweaked some of the existing ones to make sure that the scale still felt good most of the colors are unchanged though spacing all I've literally done is added two pixels because I needed it added six pixels added 10 pixels and added 14 pixels I might not keep all these and then I've added some bigger ones we added an MD border radius this is entailment 1.2 already and it's a max whit's that match the breakpoints this isn't element 1.2 it ready I added inter as the default font family this is in 1.2 already I tweaked the default outline shadow to be not as prominent because we decided to combine it with a blue border so yeah it looked ridiculous it was too much I added the same thing but for red for like invalid inputs I added this solid white shadow I've still have no idea how I'm actually going to do this in the real version of Talon so that's a good example of why I don't really want people just copying this blindly then I added a 1/4 with height because I needed that for an avatar thing I might just add all of our percentage widths to all of the spacing related stuff and then this custom form stuff is basically just copied from the plugin but I just inline to all of it so I can edit it if I want to I added some custom variants will not custom variants but I kind of have a custom variance config so I had active States for background color group hover for a bunch of things I added focus for z-index because I ended up needing that and then this is my custom SpaceX plugin which I just put together quickly here and then I pull in the custom forms plugin I never use font sizes smaller than 12 pixels even in this UI that you're looking at now the smallest one is 14 so don't have a great advice for you there unfortunately alright BG indigo 600 pretty sure text white so that should get us our button and it will just like zoom this out like to 80% so we can kind of work on it a little bit more reasonably yeah that's a little better and for spacing here we've got 12 pixels so let's do flex on this so that everything is nicely aligned and ml3 now these where's the frame 22 I think you could make a good case that the ship these buttons are kind of like in a group and that these buttons are kind of in a group and then you know if we wanted to we could make this like a space x3 let's just like keep pushing it with the spacing stuff and see how we like it and what did we say this was 22 so like that's not a telling thing so we can either call at 5 or 6 let's just try 5 first and now between this and the button we've got 25 for just I would say space X 6 I kind of like that what's called space X cuz it feels like Elon Musk ish I would say like if anything these could probably come closer together hmm like way closer together I don't know if I'm just deviating from Steve's design at this point I mean that's probably a fine 600 yeah so y'all scrap out of here all right now what does Steve got for alignment here it looks like he's vertically centered these whether that's kind of ideal or not I could I could imagine like wanting kind of this row to contain the buttons instead of having them centered here that's something I'll just have to ask him about SpaceX is not really a new name for anything it's a new utility talked about it earlier on the stream basically this is what it does it's an owl selector for margin left and margin top to just put space between things saves you from having to do like ml2 on every element in a list except the first one vertical Center was intentional all right Steve all right if you can live with that decision all right so let's move on to the grid stuff so you know what why don't we do this with CSS grid for fun too because why not it's kind of fun so where the hell is this okay so now we got like another section down here we can do a let's just do a background color on the whole body so this like gray 100 will just kind of jump up to our main imaginary body element here and yeah okay got the same color looks darker here this is F 1 F 5 F 9 there's no way this is the same color oh you know what it is let's a mean age screen this for a second this is actually yeah okay there we go okay so now we've got this section here we can probably just make this a container let's kind of spread it out a little bit so we have kind of some land markers for ourselves here what's it like main content area now in a real project take you have all this stuff is kind of components are broken up probably so you wouldn't really need these labels but when you're just kind of building a huge screen all at once like this it can be kind of nice all right so we got some columns what did Steve do for the grid so it's like 12 column grid we've got 8 and 4 I swear I had a keyboard shortcut for this set up okay so let's do this with CSS grid I don't even know how to do that with CSS grid off the top of my head I think it's great great calls I guess we just do four since it's a 12 column grid but really that's just a four column grid in our case and then we're gonna have a div it's going to be like call span three and then another div that's like called spam one and then we've got some padding between them so that's 20 so I guess that's gonna be like call gap grid gap gap five all right so this should like give us our grid we probably won't be able to see it yet yeah there's our kind of our grid Oh waiting for you are so much better at math than me smart very smart very smart man all right so now in here we're gonna have kind of like a div for this chunk div for the chunk below and this will get to be like an h2 so let's just do that overview class text LG font medium text gray 900 I think if you're doing legit grid layouts CSS grid is a little bit less verbose and you have to do some weird less weird tricks like with flexbox you always have to do this kind of like negative margin annoying thing which is always kind of gross so let's think about how do we want to accomplish the padding between these two sections I think I'm inclined to say that let's try like a px 6 here what's this py 6 yeah I think this will this will be fine all right so we've got like a card here so we'll give that a div with like a PG white rounded MD 6 pixels and like a shadow now inside of this card we've got it looks like what's the gap here 22 we've got something that's got px6 the Y I'm not sure about and I don't know if Steve really like made this gap exactly what he wanted either might be kind of open to interpretation and this is gonna be kind of like the top section of the card and then we've got this section down here which it looks like it's got like a py 4 or something where's the where's the frame for this no frame well you can imagine that this is probably the frame broadly extends like here so it's probably like 16 pixels of padding all right sold you dot PX 4 or 6 UI 4 for this one and this will have like a button for read full application and where's our down Chevron our big down Chevron it's this one and this I think is probably BG gray 50 I don't know whatever okay so now this button is gonna be inline flex now one question I'm having in my mind is like do you think this whole bar should be clickable or should it just be kind of like clicking like the actual button area hmm my gut says the button area I'm like 6040 on that this is text small font medium gray 500 okay and now this chevron color is great 400 SpaceX - I don't know and what does letting none do in this case this whole letting none thing is really kind of a funky issue I'm really surprised that changing the line height affects like how something's positioned either is it just like by one pixel and basically yeah it's weird it's just one pixel depending on exactly what you set the line I do all right so let's make sure that we do overflow:hidden on this looks like maybe this padding that we added is a little too much I think we should do this line-height on No okay so let's go with like py - maybe yeah that's looks like pretty reasonable I think might be a little shorter than Steve's alright so you guys want it to be full wet day your wish is my command all right so now we've got a button it's not going to be the full bar although we could make it the full bar should we make it the full bar let's make it the full bar so now we're going to just move a bunch of stuff into the button itself maybe we still do a div for it yeah seems fine all right so now we have like a description list up here so what is a DL this is gonna be like application for back-end developer gotta be consistent with our stuff here I'm partial to the - now I'm pretty sure that we're allowed to do this which i think is going to be pretty key how should this rap tink these are grouped together like these two and these two or do you think it's this and then this this is contact information so I could see these both being together okay so let's do it as two rows can do this is just like CSS grade - I guess grid grid calls do and then literally don't even need to do anything this will just kind of work salary expectation email phone I mean I could do it using terrible string values but what I'm trying to do right now is just make it look like the design so that's always something that I like to play around with later okay so 14 medium gray 500 since everything shifted a little bit then sixteen or regular gray nine hundred this is kind of like the defaults so what is it fun normal sometimes it feels like it's good to be just be explicit though and then for the grid gap we'll do like so that's thirty eight call that probably thirty two yeah it's pretty good one second okay I don't have a lot of energy today for some reason ricardo cooper at example.com plus one five five five nine eight seven six four five three that's my phone number okay so what do we got for like the gap between this and this thirteen it's definitely something right it's probably like at least an empty two maybe not even and that actually looks pretty close and we got some space between this and this 19 pixels but accounting for or some wine height that's probably what am i doing here okay over you mean like that's probably pretty close then i guess we'll do this little table this is kind of an interesting one we have like a definition list for this stuff and like the attachment sort of takes the same form but i would say it's probably not a definition list I don't know yeah we need a little bit more vertical padding so maybe we'll just try let's make it square for now so what what mark up yeah can you do that HTML UL inside dee dee it sounds like maybe it's fine that's not useful I'd like to see an example like a complex DD value tough one feels kind of weird to me yeah I mean it's valid but I just wonder like well screen readers kind of treat it weirdly not sure that's fine now let's just do a div here when we'll do class equals call span - then we'll just do another DT in here and oops figure this out so this is just gonna be a list I guess let's get rid of everything except the margin and this is gonna have an icon and then a probably this will be a link and this will be a link where is our download icon our attachment icon I guess it is paperclip there it is okie-doke paste that in and then we'll do a link that has a file name and another link that says download what did we do here where's my yeah it seems good okay the stroked yep so we've got gray 400 again because everything's kind of shifted by one now I'm guessing this is probably the defaults icon size maybe this is 16 pixel text let's do that it's a download button the same where's that 1414 okay so if the download button is different then we'll just do this here text base text gray 900 text us in do flex a line or items baseline maybe I don't know what this is gonna do the icon that's my only concern let's just Center them this would be fallen medium this is kind of like Steve's new he's kind of redone heroic ons from scratch heroic lines UI but it'll all be totally free so this is kind of what he's done so far he's also working on like some slightly smaller solid icons for different situations and then some filled icons that are the same size which can be useful for like kind of icon states and stuff it's kind of yeah it should be pretty cool all right so two ways that we could do the linemen here we could do you kind of group this together and then put this over to the side with just a fight between or another trick that not everybody knows is you could do is like ml auto here to push that over let's do that keep the mark up a little simpler and then for this kind of I've got 12 so we'll do like an ml 3 here okay so let's just duplicate this I think this is said by cover letter and then we'll do this stuff so we've got a border border gray 200 since that's a wrong rounded MD and this is actually a good example of where we might want to do that whole kind of border between concept so you can imagine how you might want to do like a some sort of variant like this like maybe like between border tea or something maybe this is cool maybe no it's kind of weird because it's not clear that it means like everything except the first one but I could see it kind of being an interesting approach for now though we'll just do it right on this element order tea for two gray to hundred and then probably we just need to add some padding around the whole thing twelve and sixteen so this is gonna be px 4 py 3 and I think after we kind of just finished this little card I got got a run I'm gonna definitely figure out some wrapping stuff here but generally I think that looks pretty decent yeah so maybe tomorrow when I have some time to hack on this a little bit more a livestream right again because it's kind of fun to do and people seem to dig it but for now I am going to jet and Steve is actually on his way to my house to lift weights because we are alpha males so we'll be doing that so thanks for checking on the stream hopefully picked up a trick or two yeah and hopefully catch you at the next one see ya

Channel: Adam Wathan

Views: 13,110

Rating: 5 out of 5

Keywords:

Id: 7lf6dwipRYg

Length: 75min 53sec (4553 seconds)

Published: Tue Jan 14 2020