Building an Inbox UI with Tailwind CSS

okay so back doing some streaming haven't done some streaming a little while so I saw Steve posted a screenshot of this design he's been working on for cello and UI yesterday and I thought it would be fun to build it live on the stream so let me get to work just making sure that I don't have sound going on the other computer alright so yes he's been working on this this thing it's designed for this project we've been working on telling you I and which is it's gonna be this big like official two and CSS component directory with all sorts of really nice stuff Steve's designed implemented you know by me so that'll be pretty cool hopefully that'll be valuable to people so you can sign up here if you haven't already and you're interested in learning more about it so yeah we're gonna be building this and see how it turns out so I'm trying to think where to start in terms of kind of explaining things so I think maybe be cool to walk through the code base a little bit so we have this um it's a laravel app and this is what it kind of looks like on the inside I'm you know you can come in two different sections and sort of see different components and you know flip over and grab the code for that component everything's just using tailwind defaults stuff no custom config as much as possible at least any changes I make to the config I'll probably include those changes with an actual tail and CSS update because I want this to be really easy to use without a bunch of customizing going on um so there's this cool little widget here we can sort of like preview what it looks like it all the different screen sizes are just kind of neat so the way that this all works under the hood is I have this components directory on my laravel lab which is just the components that are so far in the project so like this component here this card with image testimonial signing a registration form if you go to forms sign and registration a card with image testimonial here's the component it's we actually do them as liquid template it's just to get decent syntax highlighting so that we can have some yeah more formatting at the top for metadata and then some actual stuff down below in this template tag which is where like the actual component lives so we can stick some metadata on that to telling you I we're hoping to release an early version of it first week or two of December we haven't got it all figured out yet but like the plan is to we've had so many people who want early access that I think we're just going to wait til we hit a reasonable critical mass of components enough stuff that people aren't going to be disappointed and then we'll open it up and then just keep adding new stuff to it constantly so people will be able to like request what's missing send us examples from projects they've worked on or sites that they like and you know we can design and implement similar stuff we're hoping for it to be like a pretty pretty long-term project for us not in terms of like how long it takes until it's valuable to people but in terms of where our focus is gonna be for a long time it's something that we want to work on for you know at least a year or two before we find a new project to work on or something so yeah we're hoping to stay busy with it for quite a while so anyways all that to say to get started I've got this little URL that's kind of like a secret URL that only works in development mode that's just like a really simple table of contents of all the components in here so what I'm gonna do is I'm just going to scaffold out a new component so if we just go like artists and make components we don't actually have a category for this yet so I'm just gonna put in junk here and we'll just call this like inbox layout and then we'll just go and change the file name and stuff for what we need to do in this case so since this is gonna be in like a new category we've created this new category of page layouts I will move this file and we'll call it page layouts application UI cuz it's an application UI layout and we'll call it inbox layout that's good so this will be named inbox let's publish that we'll just publish it today so that actually shows up in the UI for myself at least or maybe was leave it as null actually because these sneaky people are gonna memorize this UUID and find a way to access this and we'll put it in page layouts application UI and we need to create a template tag here the scaffolding command is a little out of date with some changes that we've made with some of the syntax so this is gonna need a data data title I think let's see elements let's see a form sign in we'll just look look at one of these data title data preview so data title it's gonna be HTML did a preview true and this is this is for some functionality that we've been working on we're a single component can have multiple files so if we ever wanted to have like here's an example in static HTML here's like the same example with a little bit of view or JavaScript to show you how it works interactively we can kind of provide both examples in the same component so that we have this anyways we should be able to refresh this and see page layouts application UI so here we go string could not be parsed as HTML wonder why that would be probably because there's nothing inside of it should be okay now okay all right so we've got a blank canvas here and yeah telling you I is not gonna be free it's gonna be a commercial product I haven't figured out the exact pricing yet but our plan is something like it's gonna be like a one-time purchase we're not going to do subscription or anything annoying like that and it's probably gonna be comparable to what you might pay for like a really high quality theme so don't know the exact numbers yet I don't want to give out a number and then feel like hell to it or whatever but yeah I think price of like a really high quality theme but with a very permissive license you can use on multiple projects use it for commercial projects whatever I'm only using v/s code because I can't get prettier to format on safe and sublime and that's too bad but we'll see sublime is amazing but it does feel like slowly over time as new tooling and stuff comes out it's just not some like people aren't building plug-ins for sublime that work as well for those new tools as they do another stuff which is sad but yeah ok so let's build this thing so the way that I'm gonna start is just by sort of cutting up the different sections so I think of like this top bar as kind of a chunk this sidebar as a chunk and then probably this area as a chunk that will split up into two chunks as well because you can imagine that if you flipped over to say like some other side bar element here like this whole section might change so I think it makes sense to split that up so let's just start by putting together some basic chunks so we're gonna have like a header here we're gonna have like this sidebar area so we'll just put that in a div I guess it could be like a nav but maybe the nav will be the contents inside of it and I will sort of have like our guess our main area and then inside there will have a div and inside there will have a div and that to me feels like the main chunks of the page so let's start with maybe this top section here so we're gonna have and for what it's worth like this is the first time I've even thought about trying to build this so this is all just like flying by the seat of our pants here so we'll have a div that holds this chunk they don't have a div that holds this chunk and then inside of this div we're gonna have a div for the left half and a div for the right half and here we're gonna have an image and we're gonna have some text so we'll do like Monica White and we're gonna have a chevron it's really this is probably gonna be all on a button and then we'll grab a chevron from Steve over here copy as SVG I think he's using a stroke for these icons which is different than how we've done things in the past so we're kind of interesting to play with here so let's grab that paste that in okay see how it turns out that's the background so we don't need that doesn't know there's a stroke here so let's get rid of this we'll get rid of the fill well add a class of stroke current stroke or text gray let's just you text like green 500 or something and we'll give it a size maybe of like h6w six I want to see if we can see this show up oh yeah that looks kind of weird it didn't quite work the way I expected it to if you notice there's like a weird thing going on so maybe we need to do fill and on here okay well and then we need to get the [Music] avatar that was used so sometimes Steve leaves the the way imports the image sometimes sounds like an identifier which is nice because then I can just do this I'm like unsplash and see what I can find didn't work maybe if I search for this do we get anything no all right so we'll just do like portrait and if I don't find the exact one that he used and just like a couple seconds portrait woman just to do ideally I would just use the one that he's using because it makes it easier for me to compare my design against well he's got it so it's just see if we recognize it if not then we'll just grab some other one that looks like a decent avatar photo it doesn't look like we're gonna find it so yeah too bad too bad okay so let's just grab some other random one it looks like someone being fairly normal this one seems fine here's a kind of a cool trick that you can do with unsplash so we don't need an image to be huge or you don't know waste people's bandwidth when they're looking at this so what I often do is I go here and I see okay well how big is this thing thirty-six so like I'm retina screens that's gonna be 72 so we can either do 72 or maybe we can even do 36 times 3 because I think like some iPads have you know even higher resolution or maybe we can even just do times 4 because why not because 144 is kind of like a good number so we can just use like the query string here to change a bunch of stuff so we can do that at 144 and then if we want to focus on the person's face we can go fit face area and then it'll just show the person's face and then we can say like face pad equals 2 I think yeah all right isn't that cool and then we could do like 2.5 maybe we do like face pad 3 maybe face pad 4 yeah I mean that seems like it'll probably be fine so let's just grab this and then we can stick this in here I don't think this needs an alt text because we got like text right here explaining the same thing all right so Steve had this as what was it again 36 divided by 4 that's h 9 w 9 which talen doesn't have so we'll just have to go with slightly bigger or slightly smaller straight w 8 I'll go around it pull down on this button will give it a class of flex mmm doesn't really matter if it's flex or inline flex really let's just see okay and we got to make sure that the image doesn't get distorted so let's go objects cover all right and we're gonna need a background color on this whole div of gray 800 so we'll just go class equals BG gray 800 and then for this other section we're gonna want 700 sometimes we'll just do that while we're here okay and then we're gonna want to do flex on this okay I'm sort of surprised we're not seeing the background color but it could just be something important really yeah okay so we just need to do like um let's do a flex no shrink on this one since we don't want this to get to storage at all so flex shrink 0 we're gonna probably give this an explicit width because we needed to match the sidebar but we'll get to that later and this will do flex 1 so it fills the rest of the space okay so there we go need some padding so usually I will just like a thing that you can do what is it just like a like a key that you can hold that I'll show you the distances around something the two keys what's the modifier figma modifier measure distance there's a thing it's a way to do it they say alts but I don't see that working okay sixteen pixels on the edge that's cool alright so I learned how to do that now so that means we want like px px for on this diff so put that maybe here and then for why it'll be based on this as well I need to get this thirteen so that's really more like twelve so we'll call that three all right I wonder why there's space there I think we need to make this flex instead because it's getting line height okay and then we'll do item Center little style some of this text so this is 14 medium and white so this will be text small font medium text white RH and stir some space so if we check this out that's 15 so it's basically four until when terminology so we'll give that an ml four and then we're gonna have to figure out the distance for the Chevron to the Chevron doesn't look centered I'm gonna think about why is it possibly because let's see it's probably centered in the artboard and like kind of shouldn't be maybe I don't know like I wonder if this should be like shifted down a pixel and this one should be shifted up a pixel or something like visually centered optically centered I think we'll just roll with it though it'll probably won't look so bad once we have like the considerable space so that's 49 plus you got to figure out that the size the icon is actually bigger than that so it's probably more like 40 so let's say that's ml 10 ml that's in and what color was that gray 400 which I wind I would recommend don't use pseudo elements just use real elements okay so that'll have to do I mean it's fine suits Steve thinks later alright let's do some nav stuff so maybe we'll stick a little nav item in here actually this hmm yeah well leave a div there we'll put the nav inside the div treat the div is kind of a container and the nav is the contents so we're gonna have some links here for links mailbox customers reporting manage so now box customers reporting what is it again this one manage all right and the default state of these is text small text white font medium so let's do all those at once text small text white font medium and this will have to be flex and we'll probably make these inline-block so we can do padding and stuff on them properly now let's look at this so that's 12 and 6 right so that's going to be px 3 py 2 and probably we're gonna have like either letting tight or letting none like we can kind of see like what's the size of this this is 30 tall so if we look here and we check to see that's 33 so we could just go with the probably normal line high and py 1 is gonna get us kind of close 29 the only alternatives to go like letting none if we want to get like bang on man we'll just do that I usually try to avoid using line-height as like a hack for getting the height and proper who's this troll in the chat I love it okay and let's fix this so we get better formatting okay and let's do the active state I guess for the mailbox one so that's gonna have a background of gray 800 we'll just put that here all right I kicked that guy out of the chat all right so we're gonna want Ram two corners on that what did Steve have on that eight so that's gonna be rounded to LG so we'll just do that for all of them I think because we're probably gonna want like a hover state that's gonna want to behave the same way I'm using browsersync whatever is built into laravel mix okay so now this is gonna be flex to item Center justify between that didn't Center right that's because of that's not being the full height so let's think let's think let's think let's just get rid of this unnecessary wrapper element flex 1bg gray 700 I love that over here get rid of that get rid of what did I get rid of div nav just has to go up this can go save all right all right cool so we need some padding on this thing what's the distance 24 okay so that's basic my 1/2 6 so we'll just do let's think do we want to do padding on this whole thing or just padding on this element let's do pounding on the whole thing no good argument why but it seems okay all right and then on this side we have a search in a couple icons so put an input here and then those are gonna be buttons with icons in them I will go grab those icons so we've got a bell into question mark so let's find Steve's Bell and question mark did it did it did it it it how fast can I find my blind where is the Bell there's also a chance he doesn't have it here but I swear that he did feel like I'm there's the question mark okay so there's one the bell is right there okay holy smokes I am blind as a bat okay all right let's go and put in what order within here Bell then question mark okay so this will be the question mark we can get rid of this background this will be fill none that's fine this fill can go this stroke can go mmm why is this one have a fill what is this path I wonder that probably the dot at the bottom of the question mark alright sorry Steve we're gonna do something different with your icon here okay so we're gonna take this icon we're gonna group these we're going to outline them and we're going to flatten em in I'll close the window now I'm gonna lose my undo state Steve's gonna be mad that I messed with his icon do I yeah the undo state's gone Steve's gonna be so pissed okay so now it is outlined so that's okay so if I grab this and you paste it in here then I can just treat it as like a fully outlined icon instead of a stroke to icon it's nicely everything is using a fill instead of a stroke you can get rid of those I've really would be surprised if I need these you can get rid of this fill we can say class equals fill currents and what was the text color on this gray 400 and then the dimensions are eighteen by eighteen so I'm curious what size is this twenty by twenty so it's gonna be slightly smaller than twenty-four so probably h5w five and what does that give us yeah I mean that's something all right so then we'll do the same thing for the bell icon so this is currently a stroke as well so we'll just group these outline flattened copy and then this one I'll undo so Steve doesn't get over a G at me that's an animal and let stick this in here just save and get Auto formatting going this can probably go and then this is just gonna be the same classes as the other one let's carry this fill okay and now we have two icons and maybe we'll do like a hover thing or something so actually let's take these buttons and we'll go class is text gray 400 hover text gray 200 or something like that and then we'll just get rid of these ones so it matched based on the button so now we get like a little hover style what are you doing right there with the icons there's no really no real issue with them just Steve designs man figma I need to export them from figma figma exports them with a bunch of like metadata and attributes that I don't actually need in the code I want to be able to use like talents utilities to style them so I remove any like hard-coded sizes or colors that come from the design tool and then just use CSS to apply those instead all right okay let's do this search input so this is gonna have a background color of green 900 it's gonna have small 400 text and probably border radius of 8 didn't mean to have that okay so don't need this don't need input type of text this would probably be input type search but if I remember right you can't style input type search properly in many browsers so most people just don't do it that way you know text small this is a placeholder so we can say placeholder gray 400 text white probably and then we'll get this magnifying glass icon let's see if we can find it faster this time do-do-do-do-do-do there it is this is probably yeah it's stroked so we'll do outline stroke flatten copy as SVG undo back here to just grab that and this input is actually going to need to be in a when we get a span so we can absolutely position things properly I'm still getting used to using prettier for everything I still try to like format things myself when I don't need to so we'll just grab these kind of styles I think this will be text great 400 will make this class relative input we're gonna say with full probably you block let's just see what happens okay so this is gonna be absolute and actually I put this in a spin and position to spin absolutely instead so we can use padding to position this properly so if your absolute here in set y 0 left 0 and then we're gonna want to give this Y do not see that I would have expected we could see it okay so we have this let's make sure that we're doing our fluxbox stuff here first looks item center alright progress what is the actual color Steve used without that looks too light now 500 okay rounded algae not rounded full on the box yeah good call okay so what does that give us okay so let's do some padding and stuff so that is 12 from the edge but it's probably actually more like I will call it 12 but I think it's not actually gonna be quite 12 so we'll do like a PL 3 here to get that moved over PL 2 off the eyeball this I think and then for the vertical padding we'll probably want to do that here like a py 1 or something what am i doing it's cuz this is needs to be not a span let's make this a div oh the input needs to huh no I'm still surprised that this isn't because this is just taller I guess that's okay so let's do it up some placeholder text here and then we can actually like figure out some stuff okay so let's just do the padding on this element so we'll start with like px for like py 2 and just see what happens that's too big py 1 letting tight see what Steve's actual height on this is 40 so we could just like measure the height you just don't really love that approach this is only 25 tall okay so we have quite a bit of room to play actually it still seems like huge even though that's only 37 tall is that really how tall it is and Steve's thing and I guess so hmm okay that's fine and we'll have to change us to pr4 but with like PL 12 at least probably PL 610 yep yep 8 mm 10 is 10 gonna be the one and then we'll have to Center this magnifying glass so this will end up being blacks items Center and tough one I feel like pl8 is not enough but PL 10 is too much is 8 closer at least I do have a 9 added but I've been trying to resist using it it's it's unfortunately good so we'll have to use 9 ok so then his is wider so we're gonna want to give ours a width let's just see like what his width is 260 I think we have a 256 in Thailand so we could do on this we could say like with W 50 64 I think yeah and then we can add some space between those so that's 31 which is really when you account for the padding probably more like 28 which I don't think we really have so we'll just have to try 6 and 8 and see which one looks best let's try with 6 to start on both of these yeah I'll probably add nine native to tell and like anything that I'm using here I'm gonna end up including Intel one by default so that people don't have to customize their tell and UI stuff mmm I think we need to go try five maybe maybe even like four on this one here I'm feel like I'm kind of deviating from Steve's design just kind of eyeballing it but I think that actually looks good we probably there's basically zero chance that we get to making this responsive today by the way because we have so much to build still let's do some harbor states for this maybe we'll do like a slightly lighter background on however so let's just grab these I'll say like hover BG gray 600 really is that the next one 700 that's 700 was the background already Oh yikes - and what a joke so it's the jump from 600 to 700 in tailwind is significant that's what I'm learning I guess we could try 800 you know bummer 600 is probably the best one we could do something fancy with opacity but I don't really want to do that but this kind of tells me that we should probably have a little bit of space between each one so why don't we do that for these like ml2 or something yeah something like that seems okay for this width let's keep it out like toe ones like 1280 break point maybe or just like as long as it's yeah I don't know just type in 1280 and just relax here yep okay cool I'll add transitions to toe and before toe and UI is released I'm still trying to set up a a call with a guy that I met who's really good at the animation to get some help fine-tuning some values so I'm kind of postponing merging anything in until I've worked on perfecting some easing curves with this guy okay so what Steve got for like the width on this where did we even get our width from is it just happening based on the width of the button I think it is based on our margin and stuff so this is 240 fifty six times four is 224 so we need to go 256 or to 24 on this thing to 24 it's 224 going to be noticeably different like I think we're gonna probably want to do 256 all right so let's go up to this div will give us a width of 64 and then we'll probably rework how this button works so that this is just always pinned to the right so we actually don't really actually don't really need this like crazy margin here like maybe we'll just give her like a ml6 or something so that like yeah we don't even need that much if you wanted to imagine like okay well how should this look in a world where this was in a smaller space what's like the minimum gap necessary between these things were to look good I feel like it's probably something more like that but we'll stretch it out so what we'll do is we'll say I guess ml Otto would do it as long as this button was full width so if we go block with full yeah and then here it's almost like you'd want to do mx4 in this case even though that kind of usually I try to just do left margins and top margins but the reason I'm doing this is that so that we can use ml auto here but they're still going to be at least a gap of four on the side because that's what we don't know too so we can say m l4 m r2 and that way there's always going to be at least a gap of two on the side but it's gonna push itself out of at the end using ml Auto so another way we could do this is by wrapping this in another span and then using justify between but this will be fine okay so now let's add our I don't know what about yeah yeah should we do like some cool focus style let's do a cool focus style on the input let's say focus BG white focus text gray 900 and what does that give us do and we'll change the change the placeholder color our focus to focus placeholder gray 700 or 600 maybe no 600 and we'll get rid of the get rid of the stupid glow because now that we have a proper focus state I think that's fine okay I like that let's add our sidebar all right so well I have this sidebar we're going to make the sidebar the same width as that button at the top so we're going to give this a class of W 64 BG gray 100 and I'm trying to think about how we want this UI to work like do we want I'm guessing like we're probably gonna want this to be like a squirrel region this to be a squirrel region and this to be a squirrel region so I think what we'll do is we'll take this div we'll give this a height that matches the screen height flex flex call and then this div that we're gonna have to have a negative here actually that holds both these sections and this will be flex one so that it stretches and then this header is gonna have to be flexed ring zero to make sure that it doesn't get compressed but now we should be able to see this div is like the full height and now if we give this display of flex two we should see we get this new sidebar up here so that's good and then this has no background it's just like that BG gray 200 at the back so I think that's where it's coming from so we'll probably give the content area that background color just because and then we can kind of put in some content for this stuff it's freaking toasty in my office here all right so [Music] let's add some stuff here okay so we're gonna have a knife here and this is probably like technically like an h2 because I've been looking at how a lot of apps do they're heading hierarchy like apps that have a strong accessibility focus at least and a lot of them will use an h1 that's sort of like the site name that's like invisible so that would make this an h2 if we wanted to do it that way so let's say mailboxes and want some links here so I'll have nav four in box that's gonna have all sorts of junk inside of it so let's just do one of these first and then we can copy it for the other ones okay so first of all let's do this mailboxes text so it's going to be text extra small font semi bold text grade 600 text extra small fonts and I bold text gray 600 okay it's gonna be uppercase probably tracking wider maybe only tracking wide yeah it looks too wide yeah that's better okay so then we have some padding I think we'll use negative margin to get these styles working so 24 so that's what six what was the vertical padding 30 plus you've got to figure and there's some line height so we'll see see how it goes let's just start with p6 on this around the board yeah we can get awesome talent CSS linked on the site message me about it on discord and we'll figure out a place for it I feel like we could probably find a place for that sort of thing in like the resources section I like the community section or something yeah okay so now what's next this inbox thing okay so let's grab this inbox icon so first we can find it where is it - to boot here BAM alright well zoom in here we will outline flatten copy SVG undo so Steve can edit the stroke later if he wants our IP question mark icon grab this okay so we're gonna have this delete delete delete delete and then we're gonna have some text it says inbox we're gonna have something over there that kind of tells me that we're gonna have a span probably that's gonna wrap up these two so we can sort of style these as a group and since we're probably we're gonna want to be able to stand style of our inbox we'll probably have a spin there and then we'll have a span over here that contains this badge so that's gonna just have the number six in it all right so this is tech small font medium text grade 900 so we'll probably do the text small up here font medium do the color on here cuz we're gonna want it style icons differently and this icon is gonna be 700 so that'll be fill current text gray 700 H 16 so it's probably gonna be 550 count for the padding built into the icon I see how this icon is like it's inset a little bit from the text Oh fine Steve does out here too okay so that's fine that pleases me let's bump these up to six cuz Steve's looks a little bigger than ours that'll have to be close enough all right so let's do we'll do like a flex item Center on this bad boy this span will be like an inline flex I don't know it doesn't even matter because it's in a Flex container will do they justify between to push the badge off to the right will add some space next to this text what does that do for us too much that looks reasonable and here we've got text extra small gray 700 semi bold Oh OOP wrong one text excess font semi bold text grace 700 so what I said yeah where is it 700 and then we've got this background which is 300 so we're gonna want to do a BG gray 300 around it full cause it's like a pill shape and we're gonna have to add some padding for sure probably like a px 4 is that too much and it looks like a tiny bit too much then probably a py 1 probably an inline block so that padding works properly mmm probably letting tight letting none hmm what do we got to do to get that to look right let's measure 20 by 36 ours is not even 32 but it is 20 okay so maybe if we bump up the padding that will help 39 hmm here's a question would we want the width to change depending on how much text is in there I feel like probably know sometimes we could probably give it a fixed width so we can go like w-9 text center no padding okay so I guess we'll just roll with that and then we're gonna want a background of gray 200 on the whole selected item okay with a rounded full I think and I think we need to do some negative margin a negative mx4 is that gonna be too much yeah negative mx3 probably and then like obviously we need padding - what's it that's a 10 and it's 24 so that's a 14 pixel difference which is like a 3 ish so also do like a px 3 on this and probably like a py at least a py 1 oh no Steve's not using a fully rounded here he's just using rounded LG ok no problem this is probably impossible to see what I'm doing on a stream because I have subtle the contrast differences all right so let's add a bit of margin here I'm gonna wrap all these links well I guess there's only one so far gonna wrap it in a div so that we can style the div with some spacing instead of just arbitrarily putting it on the one link that looks like too much how's that hmm probably go a hair more all right so there's that so now if we just clone that a few more times then replace some content we should be able to kind of get something decent here so how many total does Steve have here one two three four five more all right so now I got a bunch of inboxes probably there's some space between them yeah so let's do that so we'll just kind of grab this two three four did I miss one no okay mt4 to just a guess we can always change that okay so let's none of the other ones are going to have a background color so why don't we just make that like a hover background color for all these ones okay and we need a flag where's the flag there it is probably need to fill er eyes this outline flatten copy SVG SVG oh and I think we'll probably just need to grab the path from inside of it even just like this D see if that gives us a flag yep we'll have to change the colors on Hayes too but we'll do that and kind of last so then we need this like drafts icon pencil and pad where are ya there you go I don't line flattened copy upward SVG Oh oops before I forget I should undo my stuff so I'm not making Steve angry yeah Oh was I able to get this back to that's partially a stroke yeah okay yeah okay so now we're on this one so we can just grab the path contents again since all the classes and everything or otherwise the same what does that get us okay we got the pad now we need this people icon so there's this one which isn't the one that Steve used so just you have another one in this set or am I gonna have to export that let's see here it is I said outline stroke okay one stroke fun alright this is really monotonous imagine how much better this would be if I just had all these icons prepared but this is my day this is what I do I literally export and manipulate SVG's all day basically alright two more to go let's see we can do them quick all right so we need to check mark I know where that one is because I was looking at that earlier I ones up here I don't line flatten copy SVG paste into SVG Oh juju juju copy head back over to code jump down here paste this in grab the path copy the path replace the path scroll back over delete this stuff head back to figma undo all my changes head back here see that we need the kind of like box icon thing so where's that one I feel like I saw that over on this side somewhere where's like the box this thing all right so we'll zoom in here we'll grab this outline of flatten copy SVG on copy SPG undo for a while SVG Oh paste copy back to code scroll down grab the D give it the D see what we get all right now we can change some text so we need to change this to flagged drafts assigned clothes junk flanked drafts signed closed chunk all right now we need some colors so this is going to be gray 700 and this is gonna be great 500 so let's just start here if we just grab this I should get us a little closer then if we grab this one and then we can just kind of go through and like delete the badge for the ones that don't need badges so what did Steve do there he had a badge for drafts and assigned so we can get rid of the badge for the other ones so no badge no badge this was like I think one into and then flags can have no badge - is this truly prettier to you I don't know but we accept it it's not needed in figma it's just like I want to I want to work with with outlined SVG's so I can use the fill attribute instead of the stroke attribute and Steve Illustrated all these icons using strokes so you can see here like he could change the width of the stroke right so what I've been doing is I've been taking this outlining it so now there's no longer a stroke and it's actually just like a solid shape with a background so this way I'm using the fill attribute instead of the stroke attribute which doesn't really matter but it's been convenient for me because at least then it's consistent everywhere instead of having some things that are fill some things that are stroke you can't make everything with only strokes but you can make everything with only fills so if I normalize the fills it just makes my job like a little bit more straightforward all right so this looks like pretty sick I think let's compare that to figma this is kind of my workflow a lot of time I just kind of take this and I put it near the edge and then I just kind of like put it here and then just kind of look to see okay so Steve's got my obviously with a more wide space so we can just add looks like we can actually a little bit of vertical padding and probably a little bit of margin to each one of these so let's just grab this we'll just select all those actually select all these now let's see so that actually got us like much closer I would say like that's actually probably hmm it's actually maybe too much but I can't think of a way to because the icon is big it's kind of like just the way it has to be because we don't have like a py 1.5 and we can't like cheat it with line height either so we have to just decide how we want to do it hmm Steve why have you done this to me do we want the bigger click area or do we just want to use margin I mean like this is pretty close in terms of the overall shape it's just these these friggin click targets a huge I don't know I'll leave it like that maybe Steve will like it all right now I got this folder section at the bottom so I'm just going to start by grabbing like this and folders ah don't wait okay and we'll do like an MT for here at least probably six okay maybe even eight yeah that's good and then we've just got a couple links here so let's maximize this again and bring back the UI so we can see things let's see so we've got text small gray 700 medium so let's just get these names and refunds discounts and bugs three hundred sixty ninety people watch and have the patience to watch this crap you've earned my respect all right um do some spacing between those let's see you this is like nineteen so that's with line-height it's probably like sixteen so we'll just do like a mt4 and we'll get rid of the first one um what Steve have here it looks you think this gap is a little bit more than no it's the same interesting okay so I mean like what we have here I guess is pretty close unless this is this is empty three yeah okay so let's change that to empty for to any something looks a little funky all right well make it so like this squirrels independently I think let's move this off to the right and see as useful to have here how much width do we have this is still wide enough okay cool so moving right along whoo probably we want some sort of hover State for these but I think it'll be more interesting for us to like get some of this other stuff in okay so not in the content area we've got two more columns this column is 319 unfortunate we'll figure it out though okay so class equals this is gonna be flex we're gonna have this sorted by date thing so we'll just do a div here we'll just say sorted imagine I could spell we have this Chevron which will just copy from here this one was using a stroke yeah let's get the non stroke one so there's our Chevron's do the same thing as before outline flat and copy SVG undo undo undo undo back to SVG oh paste dude crab so let's just grab this paste this here delete this save and this can be fill current this can go away this can go go go oh then we can copy this should be the same up there yep okay so sorted by dates I'm gonna have a thing over here this is text probably extra small so one size 12 semi bold 600 I'll just do that here I guess text extra small fonts on my bold text gray 600 is this particular UI going to be open sourced yeah I might just like put up the HTML for this one not totally sure we are gonna make a bunch of the stuff I'm free either way and since I built this one on the stream again I don't see why not I might not do it right away I'll talk to Steve about it first and make sure that he's comfortable with it but yeah I think that would be okay what am I looking at here okay so we this is gonna be a Flex container we're gonna have a thing here this will probably be a button since it has to like change when you click it I'm not sure what this button is supposed to do refresh or something maybe seems cool it'll be a button though also so let's make this a div move this up oh okay button this button will be a Flex container the chevron is gonna have to be a much different color great 500 see what the size looks like I mean I don't know seems decent really yeah it looks like Stevie is the same Chevron I'm both okay so let's find this clickety line II icon thing clickety lines sort of sending oh yeah I guess that makes sense outline flatten copies SVG undo the crap of things all right there's SVG stuff it sure is tiresome isn't it delete delete delete delete delete what's the general size of this 20 so probably 24 so h6w 6 grey 500 so each 636 fill currents next gray 500 okay this is gonna have to be a flex container and this is gonna need a width let's just start with like with 64 and I guess 65 is not a thing obviously I think this will probably be and it is a little bit narrow poo let's go with width full max width excess I feel like this trick doesn't work in flux containers flux grow what are we doing here flex with fall I get R it is what happens this what happens do I need to do flex one on this one maybe for this to work I'm surprised by what I'm seeing whoever this I really would have thought that by giving this a max width and telling it to grow hmm just for argument's sake let's just do like BG read 500 here is it because this doesn't have flex one all right so we might not even need to have this yeah we do do we need with full no yeah so let's keep all those just to be safe this looks like a good size to me I don't know yeah it's kind of similar to Steve's it kind of comes like to a reporting section ish all right so what Steve got going on here he's got like some borders how should we do these borders I kind of feel like we should do a border on this element I support it on the outside so we can't so we'll do a border on the inside of this element I guess I'll just do a border on the left and right of this whole element so it's got a one pixel border and it is gray 300 okay so this div is gonna have border I'll order are all right and it looks like we got some padding here of like X 4 PX 4 py to I don't know just start with a guess sigh this UI for a second do the old the old tester Oni you know it looks like pretty close really okay I will give every one of these no we'll give this a bottom border because you can imagine it that this squirrels on its own and you'd want that border to stay there so this will have a bottom border border B okay and then let's style one of these little inbox things we'll start with like the inactive state and go from there so after this we're gonna have a div it's gonna have a bunch of crap in it I guess these are all going to be big links so it will be a block link with BG white and then we're gonna have a here's like a semantic HTML question for people in case anyone is really opinionated I never know what element to use for things that are like just pieces of text to arm paragraphs like would you use a P tag for this and this and this and this or would you just like put this right inside of a span right inside of a div I don't know any appreciate any opinions on that and curious what people do I think you can do div inside of an anchor tag let's look that up can you put a div in an anchor yeah html5 says it's cool all right perfect so we'll do a div here we'll do a span we'll do another spin I'll just kind of do it simple here so we'll do Gloria Robertson two days ago Steve's coming over to hang out at three o'clock so in an hour so let's see how much further we can get all right Tex small semi bold gray nine hundred what does that give us okay and then this is probably same thing but regular 600 here's like a thing that's truly not prettier but the fix is to just add some white space okay padding what do we got distance to here 27 awkward call it's we'll call it 24 story Steven P n x6 and why is probably gonna be like two maybe three at the most let's start with three okay and now this div is gonna be flex justify between I just really rely on autocomplete okay and then we're gonna have another kind of section underneath I'll just say refund yeah I am curious like if anyone has like get opinions on the best way to mark up like this element in particular just looking through the chat here no one seems to have a couple people have some opinions but yeah span P someone sang with some space between us like on this tax that I missed I think tiny bit maybe yeah I could do a little bit more space there let's do it oh yeah wait Auto here so let's try like to see what we get one yeah like that alright we'll just go with a p for this and a p for this to just pee everywhere this is pretty dark doing like multi-line clamped text in HTML is basically truly a horrible thing to want to try and do so we'll just pretend that you're doing that somewhere else so this is text small text grey 900 and this is text small text great 600 okay I mean this is already like not looking too bad really what do we got for spacing differences well definitely a little bit above this paragraph maybe above the other stuff to just grab this and I mean like that's pretty close really I think I would be comfortable calling that done like maybe we add a little bit more bottom padding so maybe it's like PT 3 PB 4 I always feel a little uncomfortable having like asymmetrical padding but yeah like that looks blood looks pretty good okay so here's what I think we should do I'm thinking maybe we do I just copy and paste as a bunch of times and then like we work on the scrolling we don't really care about the Zacks of state and then move on to this and maybe come back to the active state or should we just plow through it I'm gonna do let me just add a border to the top of those for a second and we'll duplicate it a few times just get like enough for it's a wrap yeah okay all right so let's get some scrolling stuff working like let's get it so that if we were on this screen size like the sidebar and stuff what I'll scroll independently this is always a fun exercise and personal torture so sometimes it's easy sometimes it's like a total nightmare so let's just try overflow why Auto and overflow hidden here okay so there's that one that wasn't so bad and then for the list of messages that's gonna be this div overflow why Otto is this just gonna work maybe no that's not gonna work so we'll have to go up to this div and just add overflow:hidden and see what the hell happens nope okay so let's think this is usually like the pattern you just like start going up the tree adding overflow:hidden until it starts magically working hmm our go ahead I would have thought this would have worked scrolling stuff is a nightmare okay so this does not scroll this Scrolls so what is the difference I mean let's say that we changed this to overflow why Auto it's not gonna give us the behavior we want but do we get something okay so so that's like progress right if I get rid of it on this one so say it was get rid of it here does this still scroll yeah so that's like that's promising okay so let's think I feel like I should be able to get rid of this out of here and have it just work but it doesn't so maybe we need to take this I don't need to make this flex flex call and make this flex one and give this flex ring zero and then what do you think happens now fellas do you think it works huh why I could not confidently tell you so let's recreate our steps here so we don't need this overflow:hidden we do need this wrapper element to be a flex container in the column direction flex flex call we need this to be flexed shrinks zero so it never gets squished we need this to be flex one so it kind of is forced to the right heights and yeah now we're in business so there's our stupid scrolling stuff let's do this section now me a do I have to export icons again okay well put colors bro not sure what you mean that's very confusing sentence yeah you could make this sort button position sticky that's definitely a way to do it I mean this seems fine though although it probably doesn't work in any browsers okay so let's add a div for the icon bar a div for the title maybe like a div that holds kind of both of them div div div div div ative then here we're gonna have a couple divs - I think technically you could call these articles emails are kind of valid on their own all right back to the email or the icon song-and-dance so we need a back icon and the tag icon copies SVG wait till the torturous work happens where me and Steve have to go through and like export all these icons in like a proper set for people to use that's when life gets really painful we have to spend like two full days just like doing the same thing I'm sure we could automate it but still torture where's the tag icon here group outline group flatten flatten outline outline group flatten remove the stroke one no stood in a different order sometimes you gotta do things in order outline that's what this is a dark situation what do we have to do here to get this to work let's get rid of the grouping maybe this is already a stroke so let's just outline this one why is that happening outline stroke that is not the way that that stroke should be getting out aligned what is happening with that sket our figma is nice because we can collaborate on it and it's cross platform and the performance is like 600 times better than sketch why would that not be outline a ball I wonder sometimes it's like something to do with the way that you have like this stuff setup you know but in this case it's like yeah so you can see like something's happening weird there but I don't know why this wouldn't like like if this one can it can be outlined what you can why would this one not be able to be outlined you know it's like the same thing so this is what we're gonna do we're just gonna accept that it's screwed up and treated as a special case and I'll make Steve fix it for me because he'll be able to figure it out so get rid of this get a stroke color go to the fill color just have to be this will need its own class Grimm I guess we'll do the stroke stuff on here to you so do fill currents text gray whatever the hell it is looks like 600 and this will be stroke current text gray 600 and that will just do the class like h6w 6 just kind of make sure that this is working at all yeah I mean it's down there it's fine okay that person icon which we already grabbed that for a sign so this was copy it from there and a folder icon folder folder folder folder so let's see see that one's fine it's just that tag sometimes with these things you just have to like redraw it again that'll just work and Steve's here is he gonna fix it what's he doing it's doing something I'm distracted what was I looking for we got a folder did I put that into SVG yo I think probably right I probably did it yeah it's here okay next is the dot dot dot so we'll just grab these ones so grab this Union outline one copy SVG face it in all right delete delete delete delete delete delete delete delete delete just grab this and stick it on each one of these just so we have like a decent starting points okay and what do we say it's 600 now all right so there's our icons we also have an up Chevron and a down Chevron so we can grab our down Chevron from up here somewhere and we'll grab our up Chevron as well head back to CSV geo paste that in delete this junk it's probably 600 copy paste save delete delete delete delete save alright we got some stuff so now we need to flexbox fi some stuff flex highness enter just five between top flex done item senator move all these extra g's up except for the last two top alexdodd items center these two up he's probably all have to be buttons too so that's dark these look like they need to be bigger what's going on with us - just someone being a annoying I'll kick them out get the hell out of here all right sorry about that looks like Steve's actually using a slightly different Chevron here I think it's got a different stroke I'm gonna have a stroke 5 to export or another SVG all right where those padding coming from yeah it's cuz I added that for no reason okay so this div is gonna have a background color of gray 100 okay we're gonna have some padding around it looks like six maybe on all sides maybe five and four looks aggressive these icons way bigger than Steve's or something no it does like a pretty big panel I guess let's do the old Missouri trick I mean I guess we look pretty close there really we're a little bit short even but I'm okay with that we need a bottom border of 300 which is the defaults so that's okay we need some space between these icons and we need to wrap each one and a stupid button what is the thing for that wrap button wrap button I think I can actually just you know this one wrap button red button button Oh rap but rap button okay now for any line-height problems occurring here I was worried that like when you put something in a button cuz they're gonna flex container it looks okay so I guess we'll just add a little bit of margin to the left of each one of those it looks like pretty considerable 32 which is probably more like closer to 24 really so mark 6 let's do class ml 6 yeah fat fingers then this was probably not as much but we'll see probably only like two for this one yeah it's annoying about the stroke versus Phil thing I'm gonna think about the best way to handle that at the end of the day these look crappy compared to what it looks like in Steve's design like it's the same stroke as here even though they're bigger which is nice but for now this will be OK for what we're doing okay so another chunk here with a white background let's do like the px5 so that it matches above and what did we say reply student discount this will probably be like a heading I guess [Music] and then we're Holika just like a section over here with two things in it 14:28 active badge flex items center justify between the old title bar trick and then we've got font size 20 so I think that's extra-large gray 900 okay vertical padding probably at least four all right seems good pretty close one thing I always like to check is what happens if like this is really long and has to wrap and look stupid you know like what would I want to happen what I wanted to wrap or what I wanted to just like truncate I feel like I probably want to truncate so I'm just gonna say truncate Oh hmm that's a bummer this is a problem let's see what happens if we add flex shrinks one to this nothing let's see what happens if we add flex shrinks zero to this okay so we gotta figure out a way for this to not shrink which using our little max-width trick like that's probably going to be hard we might need to give this a width of zero guys did they come any smarter than me with zero that's our secret sauce with zero man what a great little trick all right and then down here we'll say class equals flex shrink zero this will be 'text base gray 900 so that's probably it's probably already correct I think we should probably do a little bit of left margin here though just so things aren't like so close we'll figure this bad boy out yeah okay green 200 small green 900 semi bold class text small font semi bold text green 900 BG green 200 rounded full letting done px 2 py 1 just a guess huh that's pretty close I would say yeah I feel like that text is bigger than Steve's 14 it's okay what is the little roll with it we need some space though for sure okay so let's do uh I'm out for maybe ml3 I'm L - yeah I don't know seems fine especially like once you're out full screen like this looks like pretty dope I think looks pretty bro okay or make a progress let's let's move this to the bottom so we can I need a huge monitor I mean I did reduce the resolution for this stream so that isn't doing me any favors let's just keep that hidden maybe I'm will work on it this way okay so we're gonna have a shadow of what MD around this whole section I'm guessing it's the section that starts here yeah we can at the sides here what do you think do you see a shadow there I feel like I see a shadow there let's inspect if we get rid of this oh yeah there's a shadow on the sides Wolfe gruesome let's take this middle panel and give it a z-index relative all right oh no didn't work Oh wrong did I put it in the wrong spot I think I put it in the wrong spot if you want to hear yeah that looks like it did it no it didn't hmm this done needs okay so it's position:relative I mean let's give it a z-index and see so relative this shadow should not be poking out there if we give this relative you forgive this it's shadow back it's still poking out and give this a z0 something is behaving oddly here don't make don't make me do this don't make me type Z 20 oh no did that do it what happens if I get rid of the Z index just change it all yeah it seems to get even like worse what the heck it's just in this section am i okay here's the real question am I just like losing my mind because I swear that I am seeing a shadow appear right here so why would that be happening this element is positioned above this one like so just for curiosity's sake say give us like a negative margin left of 16 okay so this is this will be a good way to like quickly verify what's going on somehow it's showing up on top of the thing behind it so if I give this like a is that the problem okay good catch okay so if we give this an explicit BG GRA 200 and yeah that looks like a fixed it right buddy you're a legend okay that's what I'm talking about teamwork unreal okay let's add a card let's do a little bit of a padding here what do we got it's like ten awkward one Steve that's okay class p3 and double make a card okay so we'll just do a little class equals B G white rounded LG shadow something like that this will be like I'm t2 probably something like that still can't see them so we should put some content in them so we'll just go like I don't know if this is technically a heading I'm gonna call it a div with a P tag in it that says span Joe Armstrong span wrote and then over here we'll have a div the span and an image and we'll have yesterday 7:24 a.m. we'll see if we can find that dudes face I'll just pick like a different portrait portrait man something that's like decently avatar ish looking let's go with this guy I like though this guy's got a good smirk strong smirk 36 what do we do 144 for the other one let's do 144 we'll go fit face area and face pad equals like 4 we used last time kind of depends on the image but we'll just see what we get then we can go with like a lighter face pad maybe like a 32.5 this looks like the guy that I want to be running my customer support inbox just doesn't seem like he gives a that's what I want h9 w9 rounded full object cover something like that there is okay and text small text grade 600 all right and then we got some a lot of flex eNOS happening here so they flex item center justify between I will do flex item Center okay and then we'll do some significant padding here so that's 40 so that's 10 on the left and right probably and then 27 so we'll just eyeball that so these articles are gonna have like PX 10px probably something like that it's not too much it's good these font sizes right first and then we'll see you so there's gonna be text large semi bold and then it's going to be nine hundred and 600 600 okay we need some space next to the avatar a little bit more maybe so this looks like without dev tools it's a little easier to judge the spacing okay and then we're gonna have a paragraph here I guess I'll just put it in in dev will just do let's grab this text right now oh whoops and this will have like an MT six probably or something and this is great 800 text small you can imagine that like this is gonna be like HTML with multiple paragraphs and stuff oops I mean looks like we need some more pounding at the bottom I can do that pt6 pb8 maybe peanut butter and eight okay and then we'll just duplicate all these contents just see like do we get like something somewhat sensible looking forgot my padding on this article so we'll just do this doot doot doot doot doot say dude mt2 how's that compared to steve's that's pretty close maybe he's got a tiny bit more padding between them let's test something someone's saying I might have done something messed up seems to work okay all right so let's um replace Joe with some other messages here grab Monica's avatar again I'll throw Monica down and into message 2 and we'll say Monica White okay and let's just dump a some more content in there because we can just do some alarm if some crap like Steve did here expand out out delete pastes P dag be tagged I'll have to do some this is going to be like not an accurate representation of what this would look like in a real help desk or inbox app because you have to have some sort of class that you'd stick here that's kind of like email content you know so that it like styled a lot of contents because they'd be coming from the database but we'll just kind of cheat a little bit for now 900 800 do we set it to 800 yeah we did looks lighter and fit more for some reason and then just not bold it's probably semi bold yeah that's probably the one I'm noticing okay then Joe can say some alarm up some stuff to you I guess copy these lines prettier he's not adjusting my stuff shouldn't this be indenting what's going on here prettier unexpected character ah okay P that messed up everywhere they're just there all right cool alright so let's get this section to scroll to and then I think I don't think I'll probably wrap it up so let's see this is always easier to just do it in dev tools and figure out what on earth you need to do to get it working so we got this main section this section works this section I think we're gonna have to go flex flex call and then I think I'm here we're gonna want to go flex shrink zero down here we're gonna want to go flex one overflow why done oh we got a little bit of gruesomeness going on here when he is the index on this relative done okay let's get that going here so this needed flex one over four why auto this container with the shadow needed position:relative so that it's at higher in the z-index this thing needed to be flax flex call and I think that was it yeah alright so here's our little inbox app pretty cool we'd built that in I don't know 100 years how long did this take like two two hours two and a half hours two hours and 15 minutes less than two hours in 15 minutes mm 10 minutes all right so that is as far as I'm gonna go because that was a lot of work but I'm gonna turn doubt pretty sweet like I think if you logged into something and it looked like this you would feel like wow this is like a real app so there you go so I probably am I clean it up a little bit do you like the active States and stuff I do have more work to do on this because we're going to be including it in town would you I and you know what I'll probably do is I'll take the code for this and I'll put it on the tail and you I website we have like some places where we've been putting some sneaky previews for people so I'll send this out via the tail when do I like newsletter I'll send it out this week probably like Thursday or something so if you want so the code for this and you want to keep informed about tell and you I sign up here and I'll shoot out a link with the code later this week so that is it hope you learned a thing or two hope you enjoyed watching me export SVG's over and over and over again for 2 hours yeah I'm probably gonna do these more often because it's kind of fun to do I got to do this work anyway so might as well do it on a stream it's not like I work any slower so yeah hope that was cool hope you enjoyed it and catch it the next one thanks for 1 yeah

Channel: Adam Wathan

Views: 53,062

Rating: 4.9605026 out of 5

Keywords:

Id: 6xgMkGMIudE

Length: 129min 14sec (7754 seconds)

Published: Tue Nov 05 2019