Live Stream

okay everybody try on a couple different tweaks in my ECAM live setup today always playing with things to see if I can get things working the way that I expect but yeah let me know how things sound how things look everything is working out okay yeah so what we're gonna be doing today I need to get a bunch of new tow and UI components built and Steve designed a crap ton of nav bars for marketing sites so we have a bunch of nav bars for like applications like in-app now's but we didn't have marketing stuff and the marketing ones are kind of interesting because you usually do some more kind of fancy stuff right you might have like this sort of thing we're gonna click a drop-down and it opens like a whole full width panel with a bunch of features and weird stuff like that and we also have like some more simpler dropdowns and stuff and the idea is I'm gonna build these navs build these fly outs and we're going to release these Navs so as part of toind UI with like the example flats in them and then we're also going to grab the fly outs and sort of extract them into separate components so you can just sort of swap them out as you like so I haven't planned this at all I'm just gonna be kind of working live figuring it out as I go so yeah well I guess we'll just see what happens okay so I think probably what we'll do to start is maybe just build this first one because it's kind of a good kind of a good base version you know it's fairly simple but still has some interesting pieces to it so let's throw figma over on the right here I'm using a slightly bigger screen resolution than I normally do for streaming because I found that figma doesn't fit at exactly 50 percent of my screen when I'm in the lowest resolution and that's really frustrating when you're trying to go back and forth between stuff so we're gonna try and use this 1920 by 1080 resolution for now and hopefully we can make it through all right so let's create a component and get started so I think I'm just gonna grab maybe like I know something that doesn't have a lot of markup in it like we'll just grab this and use this to start so we'll call this like navbars maybe we'll call it marketing navbars because I I don't want to run into naming conflicts I don't think our code is accounting for that currently and I guess we'll just call this one I usually name it kind of based on the desktop layout so why don't we just call this one like simple what am I doing here duplicates marketing now first we'll call it like simple links on left or something like that all right so we'll close other editors here and simple links on left will say sections where are these gonna go if you look at toe and UI where do we have nav bars we have we call them headers okay so let's let's rename this alcohol it's like marketing headers the kaabah we could call it now far but whatever simple links on left I think that's still fine what don't say it marketing header simple links on left simple links on left and we're gonna put this in I think if we look at like banners they're in elements banners we've got elements banners so we'll do elements headers here and with any luck in my workbench here we should see now we've got this this is kind of this little really simple janky little area I built that just works in development mode where I can just pull up a full-screen version of a component and kind of build it with live reload and it just reads directly from the file system to grab all this stuff then in production we kind of bundle everything up into a sequel Lite database and we just version control out and deploy it which has been nice ok so let's start with the mobile version so first thing we'll do is we'll pop open the dev tools here and just kind of get this into mobile mode where's 375 this is kind of where I like to start and we'll just kind of design this okay so looks like we've got our logo here and yeah so let's just start by getting some markup in place so we're gonna have like a div for the whole thing we'll do a a div for kind of the container area then like a div for the left a div for the right and in this section we're gonna have like the the logo so if we look at like some of the other components like maybe the hero's you can see we have a bunch of logos already pre-built this is workflow Marc okay so maybe we'll just keep that open to reference for certain things um so we'll just say workflow and then we need to get this like hamburger icon so someone in the community put together this cool little horror icons dev browser for grabbing the horror icons icon so it's just been pretty handy for me because it's faster than grabbing it from the file system we want to build something like this at some point to that we can kind of commit to maintaining ourselves but this guy did an awesome job so far so been leveraging this a lot so let's just grab the class attribute here it's one thing that's a bit of a bummer is the class actually ends up kind of mixed in it'd be nice if that was just right at the front so yeah formats doesn't work let's put this on actually what am i doing not even thinking straight here in these cases I can just go icon name equals MD what do we call that menu yeah I'm being silly this is we already have a simple solution for this so these are designed to be 24 pixels so if Steve is doing his job right this should be 24 by 24 it looks like it's gray 400 so we'll do that on the parent will just say text gray 400 on the button and let's see yeah so we're kind of getting something right so let's get things in place here so we got 16 pixels of padding on the Left 24 pixels on the top same thing over here Steve has gotten really good giving me these perfect designs we used to do things a lot rougher and kind of just figure it out together in the browser but we're telling you I like it's really important that everything is really consistent so something if he gives me something that's 14 pixels and I have to make a judgment call between 12 or 16 it's easy for me to make the wrong decision and to end up with inconsistencies so we've been trying to be more strict about that to keep this stuff clean and it's worked out pretty good okay so let's do that here so we're gonna do px 4 py 6 and we're gonna do some flexbox stuff so let's just say this will be flex justify between items Center okay and that seems like more than I was expecting oh there's like a little um there's a little back button here that I use to quickly get back to the workbench but that looks really stupid here so let's delete that I don't need that ok now this still seems taller than I thought 24 and 16 yeah I guess it's probably right all right that's fine so we have a mobile version to build so I guess we'll just start with the mobile version so let's think we're how do we want this positioned so this is positioned eight pixels from the edges of everything so I think what we'll do is make this parent container relative trying to think like if you opened it here what would happen it probably wouldn't be full width it would probably stay off to the right maybe mmm Steve didn't design that did he no well Steve if you're watching and you feel like opening this file and giving me some insight on how you want this menu to work at this size I'd be interested to see I don't know if you wanted to be full width or not because again this this size is gonna persist all the way up to 767 so we probably want to be smart about that and especially since the logo is duplicated it'd be kind of weird if it only sat over here and had the logo there and there so yeah let's think about it all right so position:relative on this thing we will do a I think we'll just have the menu open directly from the button let me look at the heroes because we did this on the heroes too and I'm curious to see how I decided to do it so we have like a button here open equals false there's the menu so you put the menu kind of like earlier in the Dom which is surprising to me let's look at this simple centered hero for a second I'm just getting back into the groove here remembering what we did so yeah so it does look like we this is hidden by default that's the background patterns that you see here and then we've got yeah I'm a little surprised that I built that in a way where I put the I put this element before this element or maybe I didn't know I didn't okay that makes more sense that I came comes after it okay all right all right now write it write it write it right here okay so since our goal generally is to make these menus like kind of interchangeable what I'll usually do is I'll build this kind of outside of the of the actual nav so you can see here like this is where I had the button and all that stuff in the in the other menu and then I have this div that's like a sibling to the whole thing the only thing they share is this kind of like one common ancestor and I think probably that's what I want to do here too so I'm going to build this whole flyout menu down here so let's take a look at this and figure it out so I'm gonna have a image I never did look to see if we got the size right on this logo by the way 35 that's kind of close so it's a little bit smaller than [Music] all right so that's one discrepancy is this logos a little kind of a different size but maybe not let me think now 32 yeah so that's or is that the width yeah it's 35 wide okay so that's probably actually fine because 31.8 too so that's pretty close that'll do all right so we've got another instance of the logo we're gonna have another button up here this is going to be I think and I think it's just MDX no MD close yeah okay and we're gonna do the same sort of thing so let's wrap this in a div flex I am sinner and someone asked why duplication we're not really duplicating anything this is like a totally separate element right you can imagine wanting to change this without wanting to change this so it doesn't make sense to reuse these elements and somehow lift them into this card in my opinion so let's just get some of this other stuff in here so we're gonna have like another we have justify between here we're gonna have to think through how we want to do the the padding and stuff we'll figure it out though so I'm gonna have a div here probably this will be like a nav with a bunch of links that go to nowhere and inside each one we're gonna have what's the best way to build these square icons lots of different ways we could do it right but I kind of just want to see like what exactly have I already done so what I ended up doing for here is I did like a div with specific size and then through the other stuff inside of it so I'm just gonna grab this as a starting point and we'll just drop the icon inside of it let's make sure this is block okay and we'll just replace this with like a different icon I don't know if I have every icon that Steve has made by name I should in theory I guess I can probably just look here and see like graph bar chart hmm let's look at the icons folder it's gonna be like MD bar chart probably got to be that one okay let's see what do we get that is not the same bar chart where is this icon Steve am i doing does he have it in here or did he draw one hasn't released it yet cuz that sometimes happens - oh these icons are a different color in this image yikes buzz your girlfriend wolf all right well I guess guess we'll just go grab these icons and grab it manually from somewhere let's see as he this is it right here copy as SVG and what did you name it chart bar seems fine duplicate probably he wants to rename the other one so it's like chart bar alt something like that you know so just minify this SVG you know format it and then get rid of this fulfil current or fill none stroke all right color get rid of this and I mean that should be okay so now if we do chart bar oops all right does that look like a roughly the same size and stuff I think so okay so let's just get like a couple of these kind of generally in here and get maybe the general styling on these right and then we'll slim them in like a card and get that positioning right it's just me sure we've got 24 that's right this is 48 that's right rounded six pixels that's right we've got a gap of 16 pixels here I'm going to use the the new space X utilities for that and I guess we'll just make this a flex items Center and let's do Flex shrinks you're on this so that we don't ever have a mishap with that and then we've got 16 pixels so that's the default line height 24 it's a default so we're gonna want to do font medium text gray 900 he's got letter spacing on this that's probably an accident so I'm gonna ignore that okay so let's just grab a few of these 2 3 4 5 6 2 3 4 5 6 and I wonder what this engagement one is called cursor click so now we'll discover if I actually have that file or not okay I do and then we've got a shield of some kind so that's shield check and oh we don't have shields check by the looks of it so I'll just grab from here and we'll duplicate this and call it MD shields check I just paste it in get rid of a class attribute so we can control that ourselves and yeah okay so should get the shield check going now and mmm integrations I wonder Steve might have literally called it that box I guess we'll just scroll and look through it it also might be like another icon that he hasn't actually added to the set yet no so this is a new one too so we'll just find it ourselves mm-hmm anybody see it there it is copies SVG what did he call it he called it view grid I wonder if that's what he actually wants it to be calls for feet copy and pasted it from something all right that's okay minify format oops I over wrote thee I'm gonna five formats film on stroke alright color okay shields check this is gonna be view greatest interesting name you got there Stevie and then we've got refresh what do you think you think we think we've got that think I can get that right on a guess nope is it called refresh it is called refresh but I guess we just don't have refresh so I need to come up with a better system for these icons by the way like every as with everything it starts is like okay I'm just gonna paste them in all in line and then we make it slightly better and then we actually go and release the icons and I've been doing all this work way before we release the icons and now there's like a real library that could be pulling in but instead I'm just maintaining this copy in this disgusting icons folder so one day I'd like to migrate this to like pull in the package from github like via NPM or something and have it as like a source of truth because this is a disaster and this is taking too long to grab all these icons ok reports report document report okay probably I'm gonna have to do the same thing for this so we'll call this document report hopefully after this though Steve just like reused all these icons for all the other ones I'm sure so we won't have to do all this boring work again view grid all right okay so whatever we're getting there let's go and kind of name all these links let's get rid of the sidebar so you got some more room this is a 1080 resolution is pretty workable how is it for people watching the stream is everything like way too small or is it pretty decent it's nice for me because I can very easily work at this resolution for what I'm doing but I want to make sure that's readable for everyone - worst case scenario I can always like bump up the font size a little bit but yeah okay cool all right so there's that let's do like the footer separately so before we get the footer done let's just try and get this in like a card so we've got a card it's got like shadow LG on it and also our shadow XS but it looks a bit so this is kind of like going to be a wrapper for everything this is kind of like a header so I think we're gonna need like a least one more div here so let's start by just with you absolute on this P X - PT - we might just be able to get away with P - I'm trying to think if we should account for the bottom padding or if that doesn't matter and we're gonna go in set X zero top zero in set X 0 I think all right and this is gonna be the card so this is gonna be like rounded LG and it's gonna have a shadow now we're going to need two of these because of the double shadow trick so we'll do shadow LG we rounded LG shadow XS so we can stack the shadows a little bit and then this one will do a BG white all right so we're getting there and now we just got to kind of get the inner padding right so this is like 20 20 20 so the top one is definitely gonna be 20 pixels of padding what do we got between here and here 32 okay so I think for what we're doing right here we can probably do something like PT 5 PB 8 PX 5 okay so there's our padding and now we'll do kind of some spacing stuff so the distance between this is like 32 ish so I'm gonna say we want to do space y8 on this to kind of space up this chunk in this chunk and then for all these elements there thirty-two apart as well so inside this nav we're gonna go space ya2 alright and then we got all that spacing handled and then we've got a divider between these so let's figure that out I think we might have to okay we made a bit of a boo-boo here we're gonna need yet another div forgive me HTML old guard but here is where we're gonna want to do this white down everywhere it's white across the board so we're gonna want to move this padding in the spacing into this div for this kind of upper half and then at the end of this we're gonna have like the bottom half and this is 32 32 so this is going to be classes py 8 PX 5 and let's think about how we want to lay these out I guess we could just do CSS grid for that so let's do a grid with two columns and we'll just put a bunch of links in there I guess pricing so let's just get the styles for this right and then we'll duplicate it and we'll add some grid gap and stuff they're gonna be font medium text gray 900 let's do let's be explicit about the font size and maybe we'll do that for all these too I never know when people are gonna when it'll matter you know but I think it's kind of nice to be able to see that it's deliberate and not just like depending on the fact that it is conveniently the same so I don't know if Steve designed hover focus tiles for this for a mobile view it's not really that important right because I'm mobile there is no such thing as hover or focus not for links anyways you can obviously you can focus an input but actually for links I think we decided to just use the default browser focus style but for hover not sure maybe just nothing maybe that's the idea okay so is that in the right spot yeah so it seems fine so we'll just do pricing Docs enterprise blog Help Center guide security events Docs enterprise blog Help Center it's security events apologies to whatever company we probably stole all of these links from when we're trying to just look at examples of regret what content do people put in these things [Music] okay so we got a row gap of 32 and then this gap is probably just up to my discretion so let's say row gap 8 and then maybe we'll do like a call gap of 4 and we can just I can kind of show you what why that matters so say we had like a longer one like help center of Awesome you can see that that wraps so we need to have some sort of gap here right between them horizontally otherwise if this was called gap zero then eventually we're gonna get to a spa where it just goes like right next to it which doesn't look good so we could probably get away with like not a lot you know you kind of have to fiddle with it to kind of see okay like is that too close it probably it is so let's just go before and yeah okay all right so that's good and then we've got I'm button at the bottom a 42 pixel tall button so let me look at our toe and UI buttons and see if see if that matches one is that this button maybe yeah perfect okay so we'll just grab the second last button here and yes we got this grid then after the grid we're gonna have another div that dave is gonna have a sign-up button and then the text to underneath it so I'm gonna put the button in a div because I don't like putting elements that are not meant to be block level just kind of like on their own although I guess with a button it's not that big of a deal like we could just make it a block level button okay let's simplify the markup and we'll do it that way we'll do it that way existing customer say that's sign-in so I'll make this spin make it a flex spin instead of an inline flex spin and let's do with full just to be explicit and I guess we're gonna want to do you justify Center on this to get the text centered now okay that's 600 to go 500 okay so that's right so we'll just do a sign up and I guess this is just gonna be a link to it's not really a button it looks like a button but it's not about I am using the toe and intellisense plugin so it shows you like all this stuff it's pretty cool if you just go to jail and CSS intellisense second just stuff like not working it does work it's grayed out here it is made by Brad good dude real popular it's called lots of lots of useful features and I think he's he's got plans to add a lot of other cool stuff to you so definitely recommend that okay so the next thing is this stuff so for this P tag I guess we're gonna say text grey 500 we'll do text base letting six and then for the link I guess we got foam medium on this - looks like the link is just the same just a different color so that's easy text green 900 okay so I think it's just kind of jammed together here so first let's get the spacing right on this so between this grid and here we've got 32 again so let's just jump up here and let's base this out space y8 just kind of move those yeah and then between here and here we've got 24 so I'm just gonna do the same thing space y 6 and let's do text Center on this yeah there we go it's really nice using these new space utilities that were just added to Telman this week I basically like never have to do manual stupid margins ever anymore I just kind of get to say at the parent level okay this is the gap between things it's nice and declarative we also add these divide utilities so we're going to use next here so you can see we've got a two pixel border between these items that's gray 50 like a really light 2 pixel border so to add that we're just gonna find the common ancestor which is here we're going to say divide Y to divide gray 50 there we go now we've got the divider between them and the cool thing about this is say like we added like another section or say say we did something like say we duplicated this and like moved it into its own section now you can see that we automatically get dividers between everything right we don't have to like manually add the borders to each one so again it's just like a cool sort of declarative way of specifying this stuff all right so that looks pretty good we don't have any weird stuff going on we'll figure out what to do for this button focus state maybe I can just see what we did for some of these okay so it looks like we did some neat stuff there so let's just grab that one maybe so where's the where's the old X it's probably this one let's grab that close button my no it's up here alright so we'll stick that there I think you're gonna see that things are kind of aligned a little bit weird now see how it's like moved in from the side because there's like some padding on the thing so we do this trick where anytime we sort of add like sort of make-believe padding something padding that's only there for like the hover or focused on we always try to compensate for it in the parent so that it is still visually aligned where you'd expect so if we get rid of that with margin then now you can see the X on its own looks like it's in the right spot alright so why don't we I'm trying to think what's due we could do the transitions on this so you can see on these ones we just kind of we do make it like full-width but we kind of have a grow in so I guess we'll probably use that same style so let's just do it like from scratch the way that I author these components is using Alpine Jas and then we have a sort of a transformation layer where before things get published it gets extracted into just like HTML comments so explain everything so that when people are trying to use it with react or view they don't have to rip out all this javascript from something they don't even use so what I normally do is I just have like X data equals say like menu open or maybe this will be like mobile menu open false and here we'll say X transition enter let's just see what transitions we used originally so you can see like this is what comma it gets converted to right so we can say like this we'll do a transition transform origin top right grab these styles this is going to be ex transition enter from ex transition enter and it's going to be opacity 100 scale 100 and then we can kind of just edit these a little bit for the leave States so leaving we leave a little bit faster with a slightly different easing curve and then we fade out and scale down and then we also add like an X show here to mobile menu open and I think if we did this right we should gonna find index X transition enter starch I'm forgetting my Alpine syntax here okay so now we should get like something once I add a click handler to this click equals mobile menu open equals true do the same thing for this one so it's a false oops make sure we had a type button to this if I just use the Alpine's transitions then it won't extract the Tailwind classes to show people who don't use Alpine so all right why is this feels so sluggish that's actually all right okay so um I think what we need to do is grab this button style and use it here too because we want like the good focus styles Oh what did I just do what's the size of this hmm it's acting like things got a little bit bigger so this is 40 this is 32 yeah that's fair so sound a negative my two on this and see if that solves our problem yep okay so now it'll just like act as if it's not there and now I can open that okay so that's pretty good all right I turn off my space here and yeah so let's look at the next state so it looks like for the small screens which is 640 Steve just kept the design the same so we don't have to make any changes there but let's just see like what this looks like I mean I guess this is fine I don't know if we want these links to be full width looking at like at 640 I wonder if there's anything we could have done differently here like maybe something that we could do is put these into two columns as well you know to use the space a little bit better this will be something I just have to kind of get Steve's and put on though the only difference I think as you can see probably we've got a little bit different padding so 24 on the edges now which is kind of a common pattern that we use we jump up to px6 on on this screen size we keep it a little tighter on mobile and then once the screen starts to get a bit bigger we add some more space okay so next we've got this size so this is where things kind of get interesting all right so let's think this through so we're gonna have another day of here for like the desktop version and I guess we'll do like a nav inside of it we could just make this the nav I guess hmm depends if you can consider these to be part of the nav links or these are the nav links so we'll just try this for now and we'll drop in a few links so we've got solutions Oh is Steve is Steve present I saw him oh there he is and yep so let's do some stuff here text base letting six font oh why is he get the line negative 20 here hmm it won't matter so I'm just gonna stick with our usual line Heights never gonna get this Chevron I think I have those as just let's see SM Chevron down yeah okay Chevron down and these are the 20 pixel icons all right so we're also going to want to hide this right so we're going be hidden we don't want this to show up this will have to be hidden MD block it'll probably end up being flex actually but okay so we got that so this will be probably like an inline flax items Center and it looks like this is maybe a slightly different color this is a gray 400 so let's go text gray 400 and what does Steve got for the gap here now it's 13 which is probably like when you account for the fact that this oh yeah okay so this does have the stuff around at 8 perfect so here we can just say item Center SpaceX - did that actually add anything oh this if we want this to work this is gonna need a span all right that's fine I can accept that all right so let's duplicate this for pricing and this actually isn't gonna be a link now that I think about it so we'll we'll figure that out it's probably gonna be a button because it actually opens a menu but we will adjust that when we actually add the menu I think so would you Doc's that more is gonna be the same as solutions Hey and if we look at the space here we've got 40 pixels between so we can go space x10 flex okay and we're going to want these to be aligned all the way to the edge here so I think we're going to switch this to be MD justify start and now the gap that we've got from here to the logo is 40 so we're also going to do MD space X 10 and then this stuff is going to be nested inside this Flex container so let's do MD flex MD item Center MD justify between and we'll probably do MD flex one so that it stretches all the way and then we can stick like a div over here and put in a link for sign in and then we'll grab this like sign up button tweak it a little bit fit here so this will it'll be just in line flex now this will be in line flex now we don't need any widths which means we don't really need justify Center but like there's no harm in it no this BGR thing that was from when I was just showing you that plug in so let's get rid of that okay right so let's see if it's probably the forty pixels again Oh 32 all right so we'll do class equals flex space X 8 flex item Center SpaceX ain't okay and then there's gonna be some gap between this stuff to likely like some minimum gap that doesn't really matter cuz you're not gonna see it right because it changes but let's uh let's just try and account for it somehow ourselves here so maybe we'll just do em D space x10 and then at least we can like look at the dev tools gonna get a sense okay so this is sort of the gap that we would be using which I think you could probably argue that maybe we need to go a little bit more than that so that if these were next to each other they'd still be enough of a gap that these looked grouped and these look grouped okay so one thing I noticed is that the height of the nav bar changes when this button appears because the button is taller than the logo let's double check that against Steve's design he has a gap of 24 above the button and 25 above that so he's probably doing the same thing or and maybe not so this is a y offset of 28 and a height of 40 Y offset of 25 and a height of 40 let's look at this again and think about this so if he's just doing 24 based on the height of the button the button is the tallest element it's like I got a height of 42 so if we did want to do this with padding that would be the right way to do it another way to think about it is like so the button is gonna hide a 42 it's got 24 so we got 42 plus 24 plus 24 that's 90 that's not a talent utility I don't think yeah that's 22 and a half right so we could either give it a fixed height of 24 or a fixed height of 20 and then everything would always kind of stay in the same place that's like another approach but I think we'll just roll with the the padding based solution and just take a look here yeah it looks like we're already doing it the way that kind of Steve intended 24 what is this logo get bigger 40 32 to 40 okay so that that's another thing to consider is that an MD or no wait this is SM smh10 still gets slightly bigger when the look when that button shows up I think I'm good with that all right so and then I think like nothing changes really in terms of the other stuff see this is all kind of like the same all right so nothing changes except for he's got like I guess this is probably a hover stay for these links just changing the text color so let's add that yeah that looks pretty good and then we've got these like flyout menus so one thing I'm wondering is does this flyout menu even fit on medium screens where like this first shows up looks like it does I wonder if he'd designed um mm-hmm okay so we can make it fit but we'll have to get yeah I do have to speaker icons you want to see what they are by the way this is pretty cool so first one is regular one right I don't know what this is doing this is just some smart and II can't live thing whatever the cool thing is this is this app sound source by rogue amoeba which gives you like per app control so every app that I'm using I can sort of control its output relative to everything else which is really sweet and it also lets me hand use the volume keys to control my audio interfaces output level which it doesn't support natively I at one point I removed this one from the menu bar room was just using this but this is a little bit slower to just like switch to a device like here I can just click drag and like let go here it's like click click click so I kept this one here just for quickly switching output devices I also have an Alfred umm an Alfred workflow where I can switch audio output devices by just choosing between them but for some reason it's like really slow to pull up the list so I don't really have the patience for that okay so I have a call that I got to do in 30 minutes but I think we could probably get like the basics of this in place so the I think this is gonna be this is gonna be where things get pretty interesting but we can do it so I've got this thing let's make this Solutions thing a button and we'll do the same thing for this more thing and then we have to figure out how we're going to show this thing so since we need this to be positioned kind of relative to this in some sense sensible way it's gonna be really hard to get these aligned perfectly because if this text was longer you'd need this to be in a different spot right so it's almost like it's almost like we want to make the menu like relative to the chevron which sounds like it kind of sounds like insanity to me yeah that's gonna be tough let's start kind of doing the easy thing which is to just like build a menu here give this a class of relative this is a class of absolute and now everything should be kind of back to normal but there's like this many thing showing up underneath right so we'll just try and get us working this way this is going to be very hard to do in a kind of very Universal way that's not just like left however many stupid pixels the length of this text is but let's figure it out so we've got a menu it's going to be positioned absolute it's got a width of 768 we might find ourselves needing to add new classes to tell when to support this but we'll see it wouldn't be as bad if we're using Lee pop or J s or something but I digress so I'm gonna have this absolute container and this is gonna be just for positioning I'm just gonna think of it as like where things go and then what we put inside of it is going to be a whole separate thing so let's take this this is 8 just going to be rounded LG shadow LG then this is give me a shadow XS and then we're gonna have a container inside of it so we got 32 and then what's the distance from this is a hard distance to measure because of that chevron thing we'll just measure it with a little box here 32 okay so it's got square padding 32 by 32 so we're gonna have a p8 contain [Music] yuuji white on this but I think the bottom is gray so since the bottom is gray we will just do overflow:hidden on this he will make this speedy white let's just see like are we starting to get like a menu sort of yeah okay so we got a bit of a menu okay now I'm gonna do something controversial which is to duplicate a bunch of stuff so I'm gonna take all these links I'm gonna copy them and I'm going to just paste them into this menu now a lot of people ask me all the time with the toe and UI components and just with how I build stuff in general like why are you duplicate asain content that was on the mobile menu shouldn't you be using media queries and fancy responsive design stuff to reuse all that HTML and have it magically show up in the same place and you can do that sometimes but to me the amount of trouble that you have to go through to make that work involves writing some extremely convoluted and complex HTML that's very sort of intimidating to make changes to because everything is like very linked together and I find that very quickly you'll also run into situations where it just proves to be impossible because the markup structure needs to be so different and you have to duplicate it anyways so my personal preference is not to try too hard to reuse markup when like things are in totally different places for totally different reasons I would rather duplicate it stick this in its own little container and one of the cool benefits of that is now if this flyout menu is its own sort of contained component say we wanted to swap it out for a different flyout menu like this one we could swap out the flyout menu without changing anything on mobile like we could still have this view on mobile and that have this flyout menu on desktop and we could easily like LEGO pieces sort of build that stuff together whereas if they're all like intermingle that's this gross HTML monstrosity then that's totally off the table so yeah I like to duplicate pretty liberally okay so we're gonna have like a two column grid here we're gonna have some here's another example right we got aspera graph text we could just like conditionally hide that but that's yeah no thank you so let's let's grab these dude we'll wrap these in a pee tag we'll put another P tag here let's just do like some lorem ipsum to start probably can be even shorter texts than that all right so you can see what I was kind of talking about before the fear that I had of needing to add some new with utilities we will we'll figure that out though I think I think we can probably make it work all right so if we whoops once I just do something let's grab this content oops well cut that we'll put it here just for the title pull this down well just get rid of this actually we'll use that for spacing down this P tag I'm guessing this is like slightly smaller text what was this this is 16 this is 14 so we'll go text SM letting 5 text gray 500 yeah we're working on a thing for styling like markdown in telland eventually this is telling CSS typography plug-in this is not even remotely ready this is kind of my thing yeah this is like example content and what it kind of looks like by default all you have to do is just add like one class now again this isn't even published on NPM there's no versions it's totally unusable but I am kind of just experimenting and exploring ways to make this good I'm kind of dogfooding it on our documentation pages so these documentation pages are all built that way so this is just using a single class that I stuck on the parent and then everything else kind of styles itself fairly sensibly so we'll probably put something out like that the hard part is coming up with the API for customizing it that's reasonable that's not just like writing CSS but we'll get that figured out I don't think the two menus have any real accessibility consequences as long as one of them is hidden the screen readers won't announce things that have display:none on them but I'll double-check that against we have a friend of ours who has been doing some accessibility consulting for us kind of helping us out so basically when I publish new components she kind of goes through them audits them lets me know if I miss mess anything up and we fix it and put it out there so we're always trying to make that stuff as good as possible and it's nice because I'm learning a lot too because I'm not an expert there either all right so let's see we got a four pixel gap so let's go up to this empty class after we will do space y1 and now we got to get all this stuff like working so this is what I'm going to do to start just as like a really kind of gross hack here we're just going to add an inline style to get this rendering correctly and then I will figure out the the right tail windy way to do this kind of after the fact but at least we can kind of get something going here okay so let's take this we'll make this a grid grid calls too thirty two so that's gonna be row gap eight well Steve actually you can see he's actually thought about this gentleman looks like we can just use gap eight okay now we need to get these icons in the right spot so we will grab all these basically we can give her this items Center and make it a item start and then we might have to do a little bit of finagling to get things right but these are probably already aligned yeah they are so done done deal so that's looking pretty good when is it a good idea to use grid instead of flex I use grids for grids and flex for everything else basically if I'm making something that literally is a grid great is really good for that especially the way it's set up until wind you can do some much crazier fancier stuff with grid if you're just using raw CSS what we expose through tail wind is like fairly simplified but for just like straight up grids I think CSO squared is great if you are doing something like this where you gotta like something over here then something over here and they're different widths and stuff I find flexbox works a little bit nicer for that you don't things can get weird otherwise especially with the utilities it's hard to have like columns that are different widths and stuff if you have things that need to wrap like so you have a list of tags and they need to wrap flexbox is definitely the right solution for that because in CSS grid the long the widest column determines the widths the width of everything inside of it so if you want things to wrap but have kind of different widths you can't really do that with CSS grid I'm so they're both really great tools and very complementary we're hoping to do figma file at some point but so much of the original work that we did was very sloppy and we did a lot of the design in the browser so Steve has been I mean our workflow has never been to create really polished figma files so Steve is trying to come up with some ideas for how to do that and I will see how we'd like to get something out there because it's a common request but can't promise when okay so let's just get some as content in here I'm gonna put periods at the end hopefully this content isn't stolen from someone else's website oops can I get these in a funky order where's the security one oh yeah like you'd see like Steve's kind of got down and down whereas ours go left right left right left right we just change the order to match that okay okay so let's just do this bottom chunk so where are those chunks it's gonna be a div after this one looks like we got 24 on vertical and 48 on sides so px py 6 P X 8 is that what I saw yeah this is gonna be B G gray I guess there's guessing this is 50 yeah 50 this will be like a big link enterprise power your entire team with even more advanced tools okay so this is watts to we'll do block on this but it probably doesn't need to be full with and maybe it should be like separate links to just go to the same place but just get it kind of looking right and then think about that and we'll put the badge I guess next to that to stuff to go find one if I try to use them Mac's with screen MD the problem is because it's nested in something else to get like the relative positioning correct it will get all kind of janky so I'll show you what I mean if you see here the suggestion is to do something like Max with let's see I think we can just use one of these like what's 768 divided by 4 R divided by 16 48 so do we have a 40 a ram yeah I would use this one probably and what you'll see is like it still doesn't care because it's limited to the width of the parent element that's what it's kind of based on so even if we say like with full now it's like gonna be the full width of the parent element which is you know like it's nested in this div so it's trying to force itself to fit in that div I think there's like a way to do I don't think it'll work for this you can do stuff like with max content but the problem with this is um I wonder if there's a way to use with Max content but also like allow these to rap I don't know like what is with min content do like that's a disaster um yeah these are kind of newer CSS features that I haven't played with much fit content max content and min content they just don't really care yeah so this one is tough I think um I think to make this work we'd want to do like seven sixty eight divided by four is like 192 which is the size that doesn't exist in Intel and who with max content with max with utilities 400 you might be onto something you clever bastard yeah that's that is a good hack that is a really good hack huh so what we need is a width max content in tow and yeah okay God okay I knew I liked to do these streams for a reason I got a genius in the chat thank you all right I was that's great that's a good trick so let's grab let's grab a badge here what do we got for the font size here at 12 so this is one of the small badges funny thing is I think it's not quite this badge let's grab this into go one and just see I guess we'll put that there and just see what happens it's not gonna be right but maybe I should put it not in the completely wrong spot I'm gonna make this a div screw y'all all right so what's the height of this this is 20 and then Steve's design here he's kind of got a 24 pixel one so what does he got to do that he's got a line height of 20 then like a padding up to so I'm sorry line I have 20 padding of 2 pixels per side so yeah so I guess if we just said letting 5 on this died pretty much do that and it looks good new he's got that centered the distance when the badge to the thing is 12 let's do the old span of Rio here I can't put a P in an a tag that's interesting or I can't put an A you sure canapé tag in an a tag Jesus all right let's look at the old cache in HTML 4 you could not in HTML 5 a elements may contain P elements but browsers are a bit flaky and you have to set the a to display block yeah okay so this is fine we're allowed to do it get with the times that's out a little more padding here okay so we'll do a flex items Center on this and what's the width of this 51 I'm not saying that we need to match it exactly but I'd like to be in the right ballpark okay so let's close what do we say that gap was 12 3 let's move this stuff here now since this has a line height on it we should probably make this a non a span probably we should whatever let's all can work flex will solve our problems okay now what do we got for the gap from here to here four pi to 24 so yeah okay so that's nice and simple space y1 okay looking good so this is pretty good this we might not want to do like we might want to this we might want to long term do the old style equals with Max content sort of deal right if this existed in toind and now in theory you can see that the link is only as wide as it needs to be so now like this part isn't like clickable but all this is again maybe this should be a link and this should be linked separately so that like even this area doesn't have to be clickable but I'm gonna I'm gonna come back to this and make this work when we actually have some real stuff so I have to do a call in five minutes but let's see if we can mmm this arrow thing I think this is going to be a tomorrow problem but we can probably bump this down a little bit and kind of offset it to the left kind of show you some tricks for that so where is our thing here where are you okay so basically this thing we want to say absolute if we look at how much space is between this and this is what 28 ish I mean I think that exists right that's like seven so we could say like top seven that's probably a thing oh that didn't oh you know why because that's like top from the whole thing from the top of that element so we would actually want to do mt7 that seems like really far away that seemed like about right I guess it is right just because we don't have that like arrow okay and then what do we got like from the edges here we've got doot - lets go - width of 23 so I'll call that 24 so we could say like- ml6 all right and that kind of gets us in like the right ballpark for that I'm now getting this arrow again in that exact right spot is going to be a very borderline impossible thing to solve in a generic way but yeah why don't we do another stream tomorrow and I'll do like this other one where we even building with the right one yeah okay let's do this other one which is kind of simpler I'll curse Steve for doing this freaking lined up arrow thing all the time because that is nightmare material and yeah we'll do another one probably like tomorrow morning or something I'll just like get right right back into this cool alright well I'm gonna go so hopefully that was fun I always love kind of hacking on these streams glad we came up with some cool new tricks and yeah subscribe to the channel if you want to get notifications every time I do these streams knots about Twitter or otherwise too and I'll be back with another one tomorrow with any luck alright see you folks

Channel: Adam Wathan

Views: 5,514

Rating: 5 out of 5

Keywords:

Id: 0o8Co529t4o

Length: 85min 46sec (5146 seconds)

Published: Thu Apr 23 2020