Building a Kanban Board with Tailwind CSS

all right back with another telling you I live stream so I put up a poll on Twitter to see which one of these people were more interested in seeing me build and last I checked we can double check this but it was it was pretty close but last I checked the Kanban board sort of issue tracker was winning 51% to 49% so super super tight race so I am going to build out this UI here this sort of like Trello ish thing and maybe I'll build it the other one on another stream another time so I've got a pretty rough cold right now so forgive me if I sound hoarse or a cough or make any other gross disgusting sounds but that's just how it's gonna have to be so we're gonna build this should be kind of fun we got some some interesting things here like we're gonna have to do this like scrolling section here which would be kind of cool overlapping avatars is always a fun little trick I really like this little toggle so that'll be kind of fun maybe we can even make that like interactive and like have it like animate or something if we have some time so uh I guess we will just get to it mmm All Right girls noise number one out of the way so I've got an empty screen over here I've got vias code over here and let's just start so looking at this if we want this area to sort of be like scrollable independently then that makes me think of this as sort of like a full-screen type of flexbox layout so let's just kind of get the bones for that in place so we're gonna have this like left sidebar section then we're gonna have like a right main area that has a top section and I'm trying to think if how this is going to be cut up let's let's peek over it maybe some of Steve's stuff really quick and see if he has any other clues that I can use to decide how to cut this up so both of these have like a full header this has a full letter this sounds a full header okay all right so I feel pretty good about how this is how this is gonna work let's close all this junk okay so the way that we're going to do it is we're gonna have a section here we're gonna have this full section up here then we're gonna have like a Content area here so talent doesn't ruin semantics in any way you can still use all the same HTML elements which is the only thing that matters for semantics but yeah all right let's go each screen flex then inside here we're gonna have a div for the sidebar we're gonna have a div for the main area gonna have a div for like the header I'll just do the layout with divs and we can give each section a semantic element if we want so let's just give me some colors maybe to start so let's pull up this so here we've got BG gray 104 this and then everything else is gonna be BG white and so this is gonna have a two pixel bottom border border B to order gray 200 and then we've got this sort of scroll little area here so we'll probably have like overflow:hidden on this and then like a scroll by area inside of it or maybe just overflow:auto and maybe overflow:hidden on here we'll see we'll figure out the scrolling stuff separately sounds like my daughter fell down stairs same way here's some screaming in the background kids men always skin hurt alright so let's see how does this look looks like nothing right so what's the width on this 240 so it's like kind of close to 256 and tellen land so we'll just probably roll with that and less 56 is closer all right so let's just go there one of my typing class again for with 64 that's the cold I like to put stuff like width earlier in the class attribute list okay that looks good and then this will be flex one min with zeros like my trick to making sure that we don't run into any surprises with the Lance does this sound like a right border or anything does let's check it out here there's a little little strip here 301 pixel so let's do border our border gray you know 300 is the default so we just won't even touch that okay so there we go and then we can start dumping some content so we've got this logo up here so let's dump in a logo so we'll do I think it's like IMG let's see public image example logo does SVG I can type and okay there's our logo steve has this as 36 which is h9 w9 those don't exist in 2 and by default but I have been playing around a little bit with some customizations that should make their way into 10 by default building at the time when UI stuff has actually been a great way to dog food the town when defaults config and make sure that it's not missing anything so yeah 7 and 9 will make their way into tones default config by the time we actually release telling you I so I feel comfortable using those here so we've got that in place what do we got for horizontal padding we can go 1 2 3 4 1 2 1 2 1 2 3 4 so that's any times 4 plus 2 which is 34 kind of a weird number mm-hmm I'll go with 8 so let's just do a px 8 and then 2 1 2 6 pics or 10 pixels so we already have a value for that so we'll just go with like py 3 you see how that works sorry I'm just trying to try to stay on top of chat a little bit better than I have in the past yeah so someone asked about the liquid templating stuff literally the only reason that this is a dot liquid file is because there's a liquid extension for like liquid is Shopify's templating language which is HTML with yamo at the top so this is really just HTML but I'm calling it adult liquid files that I get syntax highlighting because if I switched like the language mode to like HTML language mode HTML seems to work fine for some reason maybe because of the liquid extension but without the liquid extension installed I wasn't getting syntax highlighting on the yamo so I just thought you know what I'll just make him liquid files Allen hilariously when I switch this to when I switch it to liquid it actually breaks it's that's hilarious so I don't know without this plugin though it didn't work let's just put it that way so it's not important it's literally for syntax highlighting purposes only and this is just like my sort of internal tool for building 2 and UI no one will ever see these files because that mean you'll just see the HTML mm-hm alright so oh yeah I always keep forgetting about this trick and figma so if I have this selected and I hover here then I can see 18 and 34 that's like so much easier thanks for reminding me alright so what does that look like mmm I think we need to go py4 alright okay so now we're gonna have like a nav I guess it's kind of tricky cuz it's like it's a nav but it's filters I know we'll call it a nav and I guess this will be like I guess we'll call this like an h2 technically if we assume that there's like a screen reader only h1 somewhere which i think is a common practice and then we'll have a bunch of links here that go to nothing so let's just stop one of them first so this is gonna say all and then there's gonna be a badge over here with 36 just put both these in span so we can target them more easily so 14 to the edge mm-hm so this is going to be class flex justify between I will make this the active one so I guess we'll give it a BG gray 200 I rented LG for the corners so padding of 10 at the top that depends on what you consider the line height to be the 14 on the sides so I think we're just gonna have to eyeball this and see where we get so maybe like px 3 py 1 it's not terrible let's get the fonts right here so we're gonna use text small font medium text gray 900 text small font medium text gray 900 ok and then is this the same color that's 700 and extra small okay all right so we'll go class text extra small text gray 700 was the font weight the same notes semi bold so I thought semi Wald's now we're gonna want to center these I think or baseline align them let's see what Steve did he probably didn't put too much attention into getting this perfect looks like they're centered alright so we will go item Center ok and then we need to style this bad boy that's probably 12 semi bold 600 okay texts extra small font semi bold text gray 600 upper case tracking wider probably yeah it looks pretty good mm wide or wider let's try wide yeah like that better okay so now how much space do we have to that 34 so that's going to be like our top margin on this call at 32 which would be what's that $32 fours 8 so if this knife gets a mt8 that should shove that down a bit and then distance from here to here is 9 pixels which is really call it 8 maybe less because the line height so we can do mt2 for that and honestly I think we should wrap this up into a container and put the spacing information on the container instead so that the links can be more uniform okay so now we need some negative margin to pull this out so I think we'll just do that on this container as well so if we're gonna do like a padding of 3 on here then we also want negative mx3 on here so that things are even these look a little bit short to me now so let's go with py2 what does that give us let's just compare the literal heights and see if there's anything we need to do so that's 37 Steve's is 36 so probably not worth around to get that any closer I think that's probably good one pixel you know we're not going to get one pixel closer without an explicit height which I try to avoid explicit Heights I'm actually curious if I move this information to the spin if we get a difference which sometimes you do because of the way line height effects things but that's not okay so that seems fine so let's do a science to me created by me and archived so I'll just do a couple of couple more of those these ones don't need this background but maybe we'll give them like a hover and it looks like this is 700 and this is 900 so the inactive ones are going to be 700 you know what were the label is assigned to me created by me archived signs to me created by me archived two and one and nothing you probably just trash that okay so that's seems okay all right I'm moving on to this next section I think I'm just going to assume that these are really like meant to be the exact same so I'm going to just duplicate this whole thing so and this is tags and then what do we got for a distance here 33 call it 32 which is math 8 I all right I mean that seems good we'll just update some of these information so I'll just kind of put this over here and then get this going so we're gonna have bug actually none of these are selected so we'll get rid of this one and we'll get rid of this get rid of this and hmm since there's not going to be a badge next to it like trying to think like if it makes sense to leave these classes on there even though like they're not technically used I feel like it probably in a real app you would because you're just gonna be conditionally displaying this right so let's let's keep it there so we'll do bug three four five six feature request marking v 2.0 enhancement design okay and that looks good and then we have this like new project button or link that's making a I get a button new project and there's going to be some sort of SVG here let's get over to our plus icon let's make sure that's so there's this plus icon and there's this plus icon just to me looks like this one copies SVG SVG oMG back to this song and dance oops god knows what you're gonna see my downloads folder okay and I guess we will just like take a look at what we get here alright so there's a background which we don't need I decided after the last stream to keep the stroke versions of the icons so we're just going to be doing like stroke current color class equals let's see how we're gonna be able to glean an exact size from this probably not it's ten by ten which is if you look at how much padding is around this I'm gonna guess that's probably pretty big icon actually let's just try h4w 4 which will be 16 by 16 and I'm gonna hide I don't need the layers view so let's hide the layers panel so we can at least see this stuff all right so that's going to be gray 500 that looks like we can't even go bigger probably five all right and then this button will give it a class of flex and the text is probably text small yeah Tech small font medium gray 600 I'll just put that right here spin class equals text yeah some of these things I think makes sense up here tacks small font medium text gray 600 yeah let's do it all up here we'll keep the span here for spacing maybe okay and then we're gonna want a little bit of left margin we're like an ml one maybe an ml two mo ones okay now one thing that's kind of weird that you'll notice is because of the padding around the icon you end up with the button being kind of like inset which is a little kind of a bummer but I can't think of really a better way to do that's the only thing that we could try is maybe using the other plus icon let's just try this for comparison and see I'm just gonna copy this path and we'll just replace this path because everything else should be the same now we end up with a bigger icon that's closer to the edge we can probably drop this back down to like four now yeah but now the stroke is really thin yeah I think the other one was better okay so I think it's kind of an interesting problem really that the icon has so much padding around it um I don't really want to try and like use negative margin to make up for it like doing like a negative ml2 or something weird like that because you're still never gonna get it perfect and now you're just doing something that kind of feels pretty hockey but I don't know maybe it's okay you gotta imagine if you were gonna do an actual outline on this button it's gonna stick out past the left edge of where the where the actual badges are so I don't know let's just keep it even though it's kind of weird maybe we can think about a different solution later let's try again t6 here or something that's probably too much for huh how's that Steve's is a little lass still sorry to - seems good we might want some space between each one of these items but you can imagine like if we duplicated this and highlighted this one I think they are like going to be touching so I guess we don't need some space all right sidebar for the desktop layer I would call that done for now so let's move on to the right-hand side okay so up here in this top section we're gonna have oh this won't let me go to 50% screen width weird okay so we're gonna have a div that holds this border it's not supposed to go all the way to the edge I that's that's me changing that should go to there okay so we're gonna have a div with some padding on it I mean we can make this our header if we want and let's just see what's the gap between this and does 21 20 divided by fours we're gonna have a hard time making 5 work we're gonna want to do 6 cuz here you can see we have to cut it in half so we need like the same distance here as we have here that's not going to be possible if we're trying to cut Tillman's five-unit in half because there's no two and a half so I think we're gonna want to bump everything up to 6 here so let's DP X 6 and an inside here is in the top section at a bottom section and this top section is gonna have a border be looks like it's a great hundred border really subtle order grad 200 and we've got inputs over here and let's see what the type of content is here okay so we're gonna make two divs div city central here this is leave me at the left half and the right half so we'll go flex justify between items Center classic combo and then inside the first half there's going to be an input but because the input needs to have this icon next to it we're going to need to wrap that in a container with position relative so that we can put an SVG here and we'll grab that magnifying glass icon copy the SVG and back over to SVG oMG paste that in grab it paste it here delete the background find our stroke information cut that paste it here save get prettier to do its magic set this to current color guess on some sizes some colors we'll revisit this quickly here now what a Steve have for this 600 so I was a little bit off my apologies the input has a 600 placeholder color class equals placeholder gray 600 probably like text gray 900 I would imagine when you're actually typing and we'll do rounded MD because it's a six pixel corner radius border border gray 400 some padding probably like py 3 the left and right padding is gonna be a little bit weird probably at least like PL 10 and then like PR for something let's just see we're also going to want this to be sorry this SVG is gonna have to be in a container absolute in set y 0 left 0 flex items Center and that'll Center the magnifying glass inside of an absolutely positioned elements so you can see here now we do have we have the span inside which centers the SVG inside of it so we need some left margin or sorry left left padding on this like PL 2 maybe something like that and of course it's way too tall so let's drop this down like py 2 and now this whole container is 42 pixels tall Steve's is 40 pixels tall so it changes to one that's probably going to be too short 34 so I think probably the trick here is gonna be you get try like letting tight py 2 and see what that gives us that's 38 so you know depends how much Steve really actually cares about this being 40 pixels tall another thing to consider is well font size this is this is text small so we should we should do that too which is gonna change the height as well so now we're at 35 so we might actually be able to get rid of this letting tight and just be end up being much closer 40 39 that'll do all right what do we got for this gap just eyeballing it I feel like we could go a little bit more so we'll do PL 3 here and then lets out a placeholder to this input that says search and mmm what do we think for I get the size of this right I think the size the magnifying glass looks pretty close maybe we could got a little bit more left panning here it's a little much if we just put these like right under each other yeah I think 10 is the better choice okay no problem now that's 11 vertical padding so we'll call that 12 so py 3 so let's do on this py 3 okay and then we'll do this stuff over here so grab the old bell paste this in now in the right-half over here we're gonna have a button now it's the Bell and we're gonna have a button for this avatar which would open a drop-down in real life but that's a detail that we're probably not gonna have time to get to you will replace this with current color so we can style with utilities go with just h 6 w 6 text gray 600 I bet what do we got 500 foiled again this avatar that we have to deal with this is gonna have to be a Flex container too since we want these to be centered I can never find this avatar that Steve used and it annoys me to no end because I want it to be the same as his design unsplash maybe you can find it this time Steve told me he searches for profile photo profile food will we ever find this elusive woman one day I'm gonna find it I'm just gonna be so happy profile woman I think we're out of luck okay let's just use this first one I've used this one before it seems fine and we'll do a little bit of fun here fits face area and face pad equals to something like that oh thanks three yeah that's probably good and then let's see what dimensions Steve has here 36 by 36 multiply that by 4 or arbitrarily so I'll just make this 144 wide and 144 tall and then maybe we actually don't need a face out of three now that it's a square image it looks like we only need to something like 2.25 yeah that seems like a good face pad okay drop the old face in here your profile image as the old text and what's 36h 9w9 again rounded full object cover even though that's not necessary since we have a perfectly square image but that's fine okay and some space between them so mean that's 31 that's probably gonna be like with accounting for the padding in the image probably 24 which I guess is like a ml 6 is it yeah it seems okay all right this could be a little bit wider Steve has this 260 so we could try doing something like this where we do block with full max width extra small what did that do to do anything I might have to put it on here no way is our max with extra-small does I am a little bit surprised by that let's see if I'm missing something we might need to do like flex one on this okay so is that search to you wide I mean it's a lot wider than Steve's so we could just give it a hard-coded width we'll see see if this is acceptable I mean once we do responsive which I keep probably not something we'll get to you today them that might be a problem but yeah we'll see you okay I will not touch any CSS this entire stream I promise you only HTML all right so this is 17 which is really probably more like 12 with line night and actually we have to be looking at the difference here eight okay all right so let's do this next div at the bottom here so this is gonna have py two to get that 8 pixels it's gonna be flex items center justify between same old left right split sort of thing so all issues I guess we'll make that our page title I just mentioned before like it's common to have like a hidden page title so we could make this in h2 and then go back and make our other h2s h3 is I mean maybe that's a good approach h3 this is one thing I wish my editor was smarter about it Betty there's a code plug-in that like updates both tags at the same time I'd be nice if anyone knows a plug-in that does that let me know okay let's style this 24 which i think is text to excel until one's text to excel font semi bold text gray 900 probably letting tight yeah well it looks pretty good and then we have some avatars where am I going to find these people sometimes sometimes you can figure it out from the title like the this like random string but you can see that it's actually different for some of these so we're probably out of luck there so we'll just pick some random people unsplash so just two profile photo men are we gonna find this guy the guy with the yellow background hmm well let's take this dude this guy seems like a fair candidates face area face pad equals 2.25 I will just do the same on 44 and H equals on 44 hmm okay whatever that'll have to do so after this h2 we're gonna have like a div that contains our avatars so I'll get that guy in there then we have the one that's a picture of ourselves so we'll just grab this one and then we have this dude I'm sure I've seen that guy in unsplash before man portrait no maybe Oh number one result that's him right there he is that's what I'm talking about face pad equals two okay let's see I mean I don't that'll do you maybe go to like 2.25 hmm that doesn't seem to change anything is it because the image just like doesn't contain any more information that must be it that must be all the way to the edge of the image already okay so then we have this guy now will we find him we found him hey we found this guy too okay oops we're having good luck today you know what I think I can probably just take this part right and duplicate this image and change just the image identifier and then tweak things as necessary let's get the yellow dude what am i doing did I want a smile okay how many I've got four here how many Steve have here four oh well ones do I even have they're all different this guy her him him okay so we can get rid of this dude you move this one up or sorry no what am i doing let's replace the first dude with what I just grabbed okay having looked at chat in a while here missing anything cool so I'm gonna ask so we allowed to begin playing with the layout so you've been throwing our way I prefer I don't want to say yes for sure like there's no license attached to any of the stuff that we've given out so far but the stuff that we've given as so far likely will just end up for free on to tell insight but maybe just wait to use them for real until we actually put them up for free for a real with a license attached if you don't mind play with it like locally and stuff like that I sure but if you can avoid publishing something real that would be appreciated okay so these all have to be 24 pixels h6w six surrounded full object to cover and alright so now we can do some flexbox wizardry so we'll do flax items center flax I mean items Center but they're gonna be the same so what does it matter okay so that's something so now we want to get them we want to get them like overlapping with this little border so if I'm not mistaken this is probably let's see we got a 24 by 24 image here and then where Steve's border so that's 28 by 28 so that's a 2 pixel border essentially so let's try hmm I think we're gonna need to do something like this if we want to stay true to Steve's original dimensions we're gonna have to like wrap these in a spin the class of rounded full border-to-border white and then my wife saying silly things to my daughter and the baby that should be the same dimensions now and if we take these and do like a negative ml 2 or 1 should get some overlapping - yeah that's better and they stack automatically so that's good all right so now we need some margin between those so let's just go back to the full-size here for a second get this mass group and hover over here 25 so that's like ml 6 on the group all right round one this one ml6 all right and now we can do this cool thing so down here basically what we're gonna have I guess put in a spin with two buttons and let's grab these icons so we have like the four lines and then we have like this thing there's a good chance Steve hasn't actually added those here but he has uh huzzah okay copy grab the other one a lot figma it's such a good tool paste this in get rid of this background color move this one thing I've always found a little interesting is how come I need the stroke line cap on the first one but not the other one I guess this one has no long lines that are closed or that are open rather okay good to know so we'll do current color then we'll do you class equals probably h6w six text gray 600 that's my guess but we'll find out for sure 600 600 okay so there's that I'll make the spin inline flex so we can put these things next to each other with a bit more control we'll give it a background color of looks like let's see so it's great 200 with a gray 300 border border or which is just border gray 300 so that's fine BG gray 200 rounded MD see what we got okay and then we need some this button it's gonna have a background color both these buttons are gonna need to have some padding probably like just like a px 2 py one sort of thing and let's just give them both BG white rounded for a second just so we can see and then this is gonna need some padding too but it looks like barely any probably like p1 even that might be too much a lot to see so this is 40 pixels what does this end up being 42 pixels so what to think if there's like a clever way to maybe make it a pixel shorter on each side so this will have a shadow if I'm not mistaken and this will have nothing not even a background probably doesn't still be rounded but just no background all right I'm streaming at the same time as Matt great that's what I like I like competition I'm gonna take a drink of water here because I haven't done that this entire stream oh all right let's think what's different about this compared to steve's is it so he's got 32 height on the buttons ours are probably gonna be taller than that I bet I don't know 32 42 is it really just that like this is only a pixel no this is more than a pixel 1 2 3 1 2 3 this is 40 pixels this is 32 what is the matter with me what am I not seeing here 42 I was this 30 this is 40 he looks like he's only got 3 3 pixels of padding and we've got 4 pixels of padding so that's that's going to be difficult to replicate we could do like a p2 pixel here but really we need like a 3 pixel we could do something kind of hacky like I gotta get negative 1 pixel margin on both of these this is like such a weird thing to do though but it does accomplish the results mostly but it's too weird so we'll just live with a slight difference for now all right now let's do this button so is that going to be the same plus sign as the other one looks like it so we'll just find where we set a new project here just grab this and use as a starting point it's not going to be quite the same but for our purposes it will be pretty close so we're gonna have a kind of white text give me tuck small medium text white this can just be inheriting the color I will say new issue this is probably gray 800 so the BG gray 800 rounded MD it's looking pretty stupid so we'll do px 4 py 2 something like that just to get started hmm 40 pixels I feel like this should be like we have to figure this responsive stuff sooner rather than later if you want to be able to actually work on this effectively with the dev tools open so that's 37 I don't know I guess maybe you know what it really it's like it just needs to be the same height as this thing right so if we make this a Flex container we should just kind of get what we want for free although it looks a little funky to me maybe PR for pl3 because of the icon maybe like pl2 and if that looks a little more balanced okay let's add some margin here what does that do compared to here he's got way more okay let's measure it use the old trick 20 pixels which is 5 okay I just like do this I can see better and let's give her like a hover color as well do like however RBG gray 700 seems okay now his button looks like basically and as icon looks a little different a little bigger maybe mmm-hmm his feels centered better than ours although but I don't think we can do anything about that I think this is just just the way it's gonna be a lot for sure it's like if we get rid of sytem Center yeah so I mean it is technically centered it's just the way that the text compares to the icon I guess is funky like if we gave this like BG blue 100 or like whatever 500 and we gave this BG you read 500 lost my background BGE blue 500 like are those boxes centered that's always like the real question I mean they do look centered so that's just life it looks like it might be a one pixel heavy in one direction or the other warmer zoomed out but that's probably unavoidable we're not going to be provided we're not going to our goal with what we're making for WI is to provide HTML because we want to provide something that is as like framework agnostic as possible right so if we got really opinionated and made everything view components with all these like hyper specific props and everything I think it would be too annoying to customize and too annoying to like use with react or with jQuery or whatever so my plan is to just do everything as HTML will provide like a tiny bit of view only because I find via to be the easiest I'm to show you how certain things work like I'll show you an example say we're looking at let's see like drop downs let me look at this drop down drop down simple with avatar what am I doing here you know look at say this so here's like a really simple navbar I've component right and it has this like very minimal bit of interactivity to show you like how this works so the way that we've done the code is there's just a little tiny little script tag at the bottom pulling in view with like one little state variable just so you can see like okay click we set is open to false and somewhere you can see like the dynamic classes that are being added so I like to think of this as more like a vanilla JavaScript example than a view example because if I was building a real view app this would be a component it wouldn't like be pulling vu in from a CDN and creating a new instance or anything like that right but yeah oh but your question apparently was about something different so I'll probably be adding interactivity to the example but to some degree like I don't think I'm going to build a full drag and drop like Kanban board because that all depends on what library you're gonna use look whether using Shopify draggable or some react drag-and-drop or whatever right so I've always hated those themes that you buy where they come with this nasty jQuery stuff that's not really written in the same style as your project and whatever I prefer like the bulma approach where it's just like I'll tell you like what needs to change but you kind of can wire it up with the libraries that you like best but for this stream like we might we might do some stuff eventually like you know once that we make like the nav responsive and stuff like opening and closing that maybe I'll show like how we can make this little toggle thing and made or something for fun maybe we can have a little drop down here but that's probably like the extent that I would want to go tone UI we're hoping to have early access next month we'll see that's maybe ambitious but we're trying and it'll probably be like 25% done by then and we'll just keep adding new stuff until we have everything that we kind of wanted to include we're not sure on yet our ballpark it's not going to be super expensive it's not gonna be super cheap like we're thinking somewhere between a hundred and five hundred dollars for one-time purchase lifetime access used on as many projects as you want but we haven't really figured out the specific details okay so there's that I mean obviously the responsive stuff is a little bit messed up but that's probably out of scope for you know if we're gonna get everything done today we have some scrolling stuff to deal with but let's uh let's just try and get some of the actual like Kanban board visuals in place hopefully this one will just be simple because it's like build one of these one of these and then copy and paste alright so I remember like let's see here so we have to do I think it was p3 right so I'll have like a main section here maybe or maybe this will be and then we'll do it here and we'll say p3 and we're gonna have a column which has a width of 320 so what's that's 80 so I actually do have that value so this will be flex this will be a div with a class of with AD and a background color of gray 100 rounded MD and this will be I guess H threes so I have a heading 3 for backlog text small font medium text grade 900 just a little side now one thing that people will common question I get about talent is um why when you add like a heading to something by default it just looks like this it's like not doesn't look like a heading at all it's just like looks exactly like paragraph text and that's because literally every time you make a heading you have to choose what size what weight whatever you want it to be like this is an h3 and this is an h3 but they look totally different so to me it seemed like actually the harmful to give default styles to those things because it would discourage people from actually thinking through like what should the actual styles be for this heading so that's why we don't include default heading styles for anything let's see what we get to speed through here you might want to do a little bit less vertical I know it's probably okay okay so let's add underneath here we'll probably have a aul find a thing about you ELLs I feel like every time we use an unordered list on the internet it's not truly unordered like it is totally ordered right like these items in this backlog or in this order for a specific reason like this is the first item because we wanted it to be first but maybe not so okay we'll just do now I here give this a class of let's see rounded medium shadow b:g whites looks like maybe like let's see what's the distance 20 so like p5 maybe when do you use span and when D is div good question I don't know I got feeling and it's probably wrong most of the time if something is like replaced is meant to feel like in line ish I'll make it a span if something's meant to feel block ish I'll make it a div but I've made spans that are displayed block in the past for sure to so I am probably not I I don't know I don't have it give evidence for her my decision-making there what's the distance between these 11 call that like 8 so maybe like mt 2 on the UL okay all right so here's a HTML semantics question for people what would you what what would this be to you is this a is this a heading hard to say you know what is actually even more interesting I feel like the in reality this should all be in an anchor tag because these are all clickable right someone in the gentleman discord the other day suggested that for this is like one of the things I I I'm always unsure like what what stuff to use like what markup to use and he was suggesting I think it was been suggesting to use like a definition list with like screen reader only labels so you might have like a title a discount code to check out date added September 14th you know which I thought was kind of like an interesting way to mark it up so when screen readers read it people know what they're actually getting but I think we'll just do it simple for now that discount code to check out and done an image over here hmm I have a tenant run into problems when I make images direct children of flex containers so I usually wrap them in another element so we'll just grab buddy's face up here paste that in and we'll just say I almost leave the alt text cuz I kind of need to know who the person is this guy man what a goof rounded full it's probably the same shape as the other one h6w six all right what does that give us okay class flex justify between this text is going to be text small font medium text gray 900 okay did it rap even though Steve's had to rap which is suspicious check out page that would be a good explanation not the same amount of text there we go and what does he have he's got tighter line height than me I mean maybe because it's kind of title ish that's okay let's try a letting snug yeah nice and snug all right okay so next thing is this dates down here so I'll have another div with the olds class flex justify between and I guess we'll put this in a P tag too I don't know it's not a paragraph but I'm increasingly convinced this stuff doesn't really matter like you know whether this is a PETA ad div not convinced that that actually makes a real difference so you know what I'm gonna make it a div like I don't think it hurts anybody I'd be curious to know like what what does the screenreader do differently with the diverse as a paragraph tag I've heard you can skip paragraph tags and like go to the next paragraph but in the case of this like that doesn't seem like something you'd need because it's so short okay so text small text gray 600 and just then I've got this badge thing this will be interesting so let's just try and make this badge I'll be a spin class equals b gto 100 then inside of that we have a circle which we could build as a spin or we could build as an SVG like an SVG would be more appropriate let's just do it as a what is right in SVG by hand be box zero zero six six circle and what do you have to do for the circle I think we have a circle in here somewhere already I thought I saw no let's see SVG circle well learn how to draw an SVG circle by hand CX CY okay so that's just gonna be the center so CX is going to be three CY is going to be three and then the radius is going to be three and that'll give us a cuz this is a six pixel circle right yeah so we'll just do fill equals current color class equals actually if we want it to be six pixels we don't have a class for that in tail end for getting that size so maybe what we'll do is we'll cheat and yeah this makes thus the case for SVG actually stronger so we'll do eight eight but will Center it up for will still give it a radius of three and they'll give it a height - and width of two texts steel 500 and if I did that right we should get like a little yeah there we go we got our circle right sighs so what I did here is I I knew that tailwind would let me make an 8 pixel block but I can't make a 6 pixel block so I made the SVG a pixel square but how did the circle only have a 6 pixel diameter smart okay so now we need to say feature request this will be probably text small a time attribute let's see mdn time attribute time tag time element oh yeah I like that mm 1909 1/4 I like that a lot that makes me feel a lot better about the div okay so this is gonna be inline flex item Center and what's the roundedness of this 5 Steve you animal I don't have that value this is 6 I'll have to go with a 4 pixel border radius on this Steve sorry about that bud where was I rounded all right and then maybe like some P X 2 P Y one sort of action that's huge these colors don't look right either till 900 okay so probably don't need as much vertical padding here did I not get the font size right on these I mean so this is 29 pixels Steve's badge is 24 so definitely definitely have to lose the py one I think it's probably just not necessary at all 21 and Steve is 24 hmm there you go py 1 letting tight just kind of do a little bit of a trick there which I don't love gets us more in the ballpark though and then we'll do a little bit of a margin here too [Music] text doesn't feel properly centered but just for fun I'm gonna change this background color or something I can see a little bit more easily for a second okay so we got a span inline flax item center this was apparently centered it's just the text that feels off it's one of those things where it's like case this is height 26 pixels yeah I don't know something something feels weird about it well just we're all with it and then I guess we're gonna probably baseline align this stuff maybe that'll work yeah and then I add it's a decent amount of margin here alright so how does this look looks pretty close so why don't we just duplicate this Li a few times two three four let's just duplicate it once and then I had some margin to the top and then duplicate that's empty three probably I'm guessing yeah and I select a duplicate duplicate okay and then let's just duplicate the whole thing a few times so we got this column that starts here duplicate definitely like if you were doing this for real it would be easier in a lot of ways because you just be sourcing all this stuff from some data set right so just I'll be in loops you wouldn't actually have this like in monstrosity that we've created here so I was going to select all these and I'm gonna say Flex shrinks zero because we don't want them to shrink and we're also gonna do like an ml three on all but the first one I think we'll see that's probably right yeah and yeah I'm just gonna maybe make like one of these longer than the other ones two two two I actually didn't want to do that one I wanted to do the second row second column it's just a dude dude maybe maybe the fourth one will add a bunch more to this I can kind of feel somewhat realistic one two three four okay all right so now let's get like scrolling working cuz that's gonna be a whole thing alright so usually I find the best way to do this is in dev tools because it's mostly just trial and error to figure out what containers need what overflow settings so this div is likely if I had to guess I was a bettin man I would say this needs overflow:hidden and that this div needs over full auto and that's horizontal scrolling working and I would also bet that this div which is this whole section on the right needs overflow:hidden and that this div needs overflow:hidden maybe then this one doesn't okay mm-hm-hm still don't have horizontal scrolling but bear with me we'll get it I suspect it's because this needs to have flex flex call this needs to have Flex shrink zero flex shrink zero this needs to have flex one so we get a height I'm not quite there yet folks mmm this is one thing that sucks about reducing my screen resolution for streams okay so let's see how big is this so this is too big right now this is 992 with 674 ok so the height on this is right let's think let's think um scrolling scrolling scrolling I've got this we got this part of me wants to like delete the sidebar for a second and see okay so with no sidebar to worry about samer is not affecting things so that's good to know this / follow okay that's promising that's promising let's get rid of this one okay so that's something do we need this flex one still no okay that means we might not need the flex flex call here how we do okay so all right I am surprised that we couldn't get this to cascade through properly but that's okay so now we do the sidebar so just once this window to be smaller I guess we can just do that using the dev tools at the bottom instead okay so now this sidebar this one's probably gonna be easy probably just a matter of overflow:auto on the sidebar okay all right let's try and replicate those changes here so sidebar overflow:auto the main section above that we had to have flex one overflow:auto this div needed to have flex shrink zero this needs to be flex flex call see how far that cuts us okay I mean this is pretty promising actually maybe we didn't even need as much stuff as we had before yeah it looks like we got scrolling solved okay I think I'm gonna leave it there for today there's definitely a lot of details that were not finished with like for example let me think one thing is actually see how we have no padding on the right here at the end of the last item I do want to solve that this is like one of those things that uh it's a weird little trick I learned recently ish that changed my life or I once I changed my life but was challenging to learn challenging to find the answer to and the trick is to make this inline-block oh my god that's not the trick that wasn't enough the trick is to make I think if we added wrapper div that was inline-block or inline flex maybe oh yeah maybe that's the problem can't be inline-block and flax but maybe inline flex will solve it there we go just has to be in line ish and that solves the problem okay yeah so lots of details to polish like you know proper focus state there would be cool making some of these interactive things work would be cool doing obviously the responsive version because I have to say this is not the nicest responsive layout but I mean we got pretty far I think this looks pretty good it only took us by an hour and a half so yeah maybe I will pick this up and stream the responsive stuff tomorrow so I'm like that that sounds fun to you for now though I think I'm going to call it and sit down and recover from my ailments so yeah thanks for checking out the stream hopefully you learned a thing or two and thanks for helping yet when I ran into problems here there that's always good and I'll probably probably do another one of these tomorrow all right see everyone

Channel: Adam Wathan

Views: 46,500

Rating: 4.9618645 out of 5

Keywords:

Id: _H38A6E8Nsg

Length: 91min 20sec (5480 seconds)

Published: Mon Nov 11 2019