Building Workcation with Tailwind CSS (Part 1)

okay how everybody so I'm just gonna wait a second here make sure that everything actually seems to be working properly cuz I got my second monitor or my other computer actually over here that I kind of used to double-check that the stream is working and it looks like it is so this one I can pay attention to chat and stuff while still doing some work so basically today what I'm gonna be working on is me and Steve are sort of planning out this this free tailwind course that I want to put up on the tail end dockside just kind of help people learn to and especially people who aren't like super great at CSS so something like bootstrap it's a little bit easier to make stuff even if you're not super experienced with CSS worse because tell when to so low level a lot of times people just don't even know how to solve a particular problem when all you have is like really low level primitives like you know absolute positioning and flexbox and whatever so what me and Steve did is we kind of designed this this app called work ation which is kind of like at Airbnb sort of app and what I want to do today is try and build a bunch of it to sort of learn for myself where some of the challenges are and what's gonna be easy and what's gonna be hard because we just kind of designed all this in figma just to kind of do it kind of quickly and I haven't actually built any of it with telland at all yet so what this stream is basically gonna be in and maybe future streams too as I kind of hammer through all this stuff it's just kind of following along as I build this out for the first time and and learn kind of what's necessary is to pull it off so it won't quite be what the course is gonna be the course is gonna be a much more polished version of this but should still be pretty interesting and pretty fun to watch me stumble through using my own framework story that I talked to slow everybody everyone's complaining in the chat already really sad ok so anyways we got this app we mean Steve designed it at a bunch of different layouts so we've got like the regular desktop view here which is sort of 1280 pixel breakpoint it's got this sidebar and the idea here is that this sidebar area like inside here would be scrollable if the window got shorter so that'll make for some interesting things that we have to do with tail wind we have some sort of overlapping cards which is kind of an interesting tale and challenge in some way it's not really a challenge but just kind of an interesting thing we got some custom form elements I will be working with a bunch of icons and SVG's and stuff and we even have like you know it's a pretty interesting responsive stuff so this sidebar actually becomes like a collapsible horizontal filter menu the idea would be that normally you only kind of see like this much and this menu can expand to show this stuff and when you click the filters button that expands to show this stuff so I've created a blank vcli app and we're going to use that just kind of scaffold this out because it's kind of a nice little development environment and if we want to extract some components or we want to do some interactivity or anything that's gonna be really easy so I'll show you what I got so I just created a blank vcli project I haven't even installed tail under anything yet so let's start by doing that so first things first we'll do yarn and sew and CSS and while that's running and gonna create a post CSS config file so we'll create a new fire go post CSS config Dutch is head over to our package out J's on because I think we already have opposed to ESS config here but I'd rather do it in a separate file so let's do modules on exports equals plugins array and in here we will require so in CSS and we'll pull an autoprefixer to which vcli kind of has by defaults so we don't really have to worry about installing it ourselves okay so we got two and now we just have to kind of actually set it up to use it so it's a couple different ways you can do this depending on how much custom.css you plan to write but I think we'll start by just doing it in the app W component so if we just take this style block we can just dump in Tallin base San Juan components so many utilities and view will automatically process all your style blocks with post CSS so things will just kind of work so we'll keep this hello world component even though we're not actually gonna use it in case just so that when we commit this project we don't lose the components folder so let's just clear this out since this view app doesn't actually need any behavior yet and we're just kind of start doing some stuff up here so first things first why don't we just like test that the the talent feels like it's working so we can just create like an h1 it's like Hello from zelans add a class to it maybe like text 6xl font bold text purple 500 or something and let's just start up the view CLI server different tools you serve or dev I never remember which one it is cool a little tip if you use a yarn anyways you can just say yarn run and it'll actually give you a list of all the commands that are available in your package JSON file okay so there we go looks like Gellin is working all right so sort of a what I think is the easiest workflow I would tell ones because all of the responsive CSS stuff works mobile first like you kind of layer everything on top with the unprefixed utilities apply to all screens and the sm prefect ones apply to small and up the medium applies to medium and up I think the smoothest development experience is to design or implement the mobile version first so let's start by just trying to implement this screen here and see where we get with that and then just kind of work through that a little bit at a time so I think we're gonna have to do a bunch of work to kind of grab these assets and stuff out of here so why don't we start by just getting like kind of the basic blocks into place and then we can like export this logo and optimize it and stuff like that and export maybe these icons and just see if we can get everything kind of working so this is what I'm gonna do see if we can see if we can make this work in terms of space since we're designing the mobile one we can turn on responsive design mode here maybe go to like a iPhone what wonder what dimensions we did for this one it would be nice if we just design it at this exact to mention 375 so that's like a regular iPhone 7 sort of size now we might want to just get rid of the dev tools for a second maybe we can go to the right I'm trying to figure out a way that we can get this at 100% and still fit the dev tools a little bit so that we can do some tinkering there if necessary okay so this seems kind of like a good start and we'll just keep our editor over here at kind of 50% size and work from there let's get rid of this UI okay so the first thing that we should do here is just kind of create the basic building blocks for this thing so I'm gonna start with I guess like a header element that we can use for probably both no because this ends up being a sidebar so we'll just use the header element for the top section and then for the sidebar there's probably a more semantic element we can use maybe a section and then for the other area we'll use main something I've been really interested in lately is learning how to use HTML properly because you like as stupid as it sounds I am NOT an expert in knowing the exact right places to use like an aside tag or an article tag or you know are you allowed to have multiple H ones on a page those sorts of things so I've been kind of digging into that lately which has been kind of interesting so we're gonna try and do things right in that regard here as well so we've kind of got the basic building blocks in place here this header is gonna have the background of the darkest gray until one I think and the way that we have this stuff set up in figma Steve's created like layer styles for everything so you can actually see he's got all the tail when colors in figma so as long as he's designing with these colors it makes it easy for me to just reference to see okay so he's using grey 900 so we'll just do BG gray 900 here this section is going to be BG gray 800 and I don't know I don't know when you're allowed to use an aside element I'm not sure if an aside element should be used for sidebars or if it's for secondary content that's not important never I'm sure and then for this main section which I guess is actually the whole page I think he's gone BG gray yeah 100 that kind of surprises me for some reason I thought on the larger screen sizes it is BG gray 200 let's see yeah it's PG gray 200 over there so I think we should stick with BG gray 200 this is probably a little bit of a slip-up it's gonna look basically the same anyways alright so we'll make the whole app BG gray 200 another thing that we should do if we want things to look pretty similar now it's steves actually using a different font here but we're gonna use the system font to start by default all these design tools they render text as anti-aliased instead of sub-pixel anti-aliased so we should probably do that to have it'll make it a little bit easier for us to compare what we're doing with the design to see if it actually feels correct okay so this isn't really gonna look like anything yet but if we drop some text in here and like work ation yeah so we got hot reloading enabled and all that stuff so that way we can make little changes and things should update pretty quickly now they're actually updating a little bit slower than I expected and I'm wondering if that's because of how we have things set up here it's probably recompiling the CSS every time so why don't we try a different approach so in assets let's create a new file we'll call a CSS slash chowin does CSS and I'm just gonna grab this stuff and pull it into here have you hear my kid crying in the background cuz she's very grumpy today and then here if I'm not mistaken I think vu let's you dude like a source tag on style attributes kind of like you can with script tags so we could go dot slash asset slash t SS / tail and just dot CSS let's see okay so things seem to still be working and I'm curious if this updates faster now that it's in a separate file yeah it updates way faster so now view is smart enough to not recompile the CSS because that's in a separate file and it we're only changing this component so it saves view a lot of work which is kind of nice all right cool so we kind of got in place here we're gonna have like an input and filters button so I don't he's kind of like drop those in as like little placeholders we don't need to type on that and this will just be a button don't say filters it'll have an icon eventually placeholder here we'll just say search by keywords and this is gonna have an icon next to it at some point too but we're just kind of getting the the basic bones in place here so Los Angeles here isn't maybe an h1 but we actually don't have an h1 on the page and we probably should but we can leave that for later I think it's probably okay to make it like an h2 maybe it should actually be like an h3 I think it should be an h3 and eventually because what I'd like to do based on some of the research that I've been doing about how to use headings properly is um for web apps what's kind of recommended is that you have an h1 for like the site and then each section kind of gets its own title as an h2 and you use like visually hidden helpers to kind of just hide these they appear in the document outline but they don't actually appear on the screen and that makes it easier for screen readers to kind of jump to the different sections of your page so we actually might have an h2 for the main section that's hidden that kind of says like search results or something even though we don't actually show it and then Los Angeles it's gonna be like an h3 under there so we'll I'm just gonna get some of this content in here live like the stars in these luxurious Southern California estates and then we're gonna have a bunch of these cards so let's not get into the cards yet we'll work on just getting this header stuff styled so here we go looking pretty fantastic so let's go ahead and get this logo exported so I'm just gonna grab the logo I'm gonna paste it somewhere else and let's see so it looks like it's 187 but whatever I think we can probably just kind of eyeball the size of it I find that some sometimes the best way to go when you have weird shapes that kind of poke out by a pixel or two in some places so we'll just give it a background just so we can see what we're doing and let's see probably if you want to go right to the edge something like that is good and then we can oh crap you can shrink this down see if we can make it one shorter we're gonna have to get rid of these constraints maybe oh no that seems okay something that's always confused me with figma is when you resize things they kind of move in unexpected ways sometimes let's just set this height to 32 pixels and then we'll move the logo up a pixel so we got a like a little bit of breathing room around everything and then we can resize this too like there that seems like it'll probably be fine now one thing is I think this is actually using a font but we can flatten this to outlines it's gonna be a little bit tricky actually because I think once we do this we're going to lose that color which we do so we'll duplicate this layer and then we'll edit it so the first version will just have just the work part and then the seconds the second copy we'll just have the keishon part and this way we can style the the color on this the way we want I think he's using a indigo 300 yeah so this should be okay this should kind of do what we want so we can probably ungroup this because we're just gonna export the whole frame so we don't want to show the background color in the export we're going to export it as an SVG and sometimes I wanted to actually kind of copy this as an SVG I can let's see if it better so now if we go to SVG oMG this is a tool for SVG optimisation that I use all the time we can grab the SVG and then we can work on getting this into the actual app so here where we have this header we're gonna throw the SVG in there and okay so it shows up it's obviously not like the right size or anything but we can figure out kind of the size that we want based on here so I think we exported at 32 all right which is pretty reasonable which is 2r M which is going to be a height of 8 into and so if you do like a class here we can do h 8w Auto one thing that sucks about sizing SVG's actually that aren't square is that you can't do Auto Heights or Auto widths in I 11 but I think we just won't support I 11 as that's on it sounds pretty good to me so there we go that's kind of like the right dimensions now we're gonna need some padding so let's just go back to like our regular view here let's see how does this work again so looks like Steve's got was 17 pixels of padding on the side just cuz he's sloppy so we'll make that 16 which is a ram so what we're gonna want to do here is do some horizontal padding on this elements like PX 4 and then what do we got here it's got 14 on the top so we can either do 16 or 12 I think 12 will be okay because we actually made the image 2 pixels taller than it needed to be so 12 is going to be py 3 because that's 3/4 of our REM essentially get us yeah pretty close in terms of the kind of position of things okay so next is this hamburger icon so we'll grab that too so Steve's got it here I think he probably has this um exported already somewhere that I could probably grab so let me see I have a I can grab some stuff from the refactoring UI I con set he's probably got something called menu here yeah perfect so we'll just grab this menu icon and we'll slam that over here which probably put it in a button since it needs to be clickable and I'm not sure what the view box is on this in terms of like it's drawn in the 24 by 24 artboard but I'm not sure how Steve sized it so let's just give it some classes and see what we get so let's start with let's think I don't know I'll just do like H 6 w 6 just kind of arbitrary and see what the dimensions look like what's the bug here duplicate attribute class okay to get rid of class and we don't need the classes on the actual path either okay so there it is down there it actually kind of looks like there's some weird pixel rounding so let's see what color Steve is using for gray 500 so until when we can style has Fiji's by using the text color utilities so we set the fill of this to be the current color then we can use text gray 500 which sets the current color to gray and then we should see it kind of working like that so we want to slam this all the way to the right so the easiest way to do that is with flux box so what I'm going to do is I'm going to make this header Flex container and that should get these side-by-side essentially and now if we want to put this all the way to the right we can use justify content to space between so if we do justify between that should slam it all the way to the right ooh took a little bit of a surprising it's the prising results I wonder why it's off-screen so in this case we can something I do to debug stuff like this I'll just add a one pixel red-eye line to everything on the screen I won't books a little solid red and then we can try and find out like what's causing this to be too wide and it's actually not really clear to me what's causing this to be too wide if we just take this button away still too wide hmm is it this section still to whine is it the P tag still too wide is it this tag still too wide is it this SVG something about this SVG what on earth is going on the only thing you can think is this w Otto is somehow causing a problem we just made this like five Ram arbitrarily no it's still uh still happening but yeah I was about to try that too we wrap this Regina div see what happens probably we'll fix everything no it doesn't Wow this is a surprising turn of events if we just put like hello in here and we just comment this out look we still have horizontal scrolling hmm no we are there's a there's a root cause to this like we don't need to try and treat the symptoms here there's something funky going on that is making things behave in a non sane way look it's still too wide so that's 375 by 48 375 by 48 this could just be like a weird responsive design mode thing and yep so it turns out it was fine all along and it was just the browser bugging out as you can see man technology alright so we want to Center this with the logo so I'm gonna set this not to be mobile by the way it's not not changeable if we get a responsive and we go 375 we can say and they're supposed to be a thing that shows me the device type yeah just um okay all right well that was a waste of time so if we want to Center this we can just do items Center and those should become centered but they're not becoming centered because because why because this button needs to what's the height of the button 24 by 24 maybe it is centered just seems surprising to me that I didn't have to do anything to make it centered items start items end I'm Center yeah I guess it is centered that's weird that uh it just was magically centered that seems unlikely to be honest I'm gonna wrap this in a div anyways because I kind of liked the idea if there being a container for the left section and a container for the right section really honestly - so now centering these divs doesn't really make a difference because this div is kind of full height so we can fix that by doing something like actually you know what I'm a little bit surprised that that is 30 pixels tall this is 32 pixels tall this is 30 pixels tall it's cuz the button has line height probably we could probably just make this flex and I'll probably solve all our problems yeah okay cool all right so we kind of got the outline of that in place now we can kind of work on I wish I could is there anything for me to hide the layers panel yes perfect so say we can still see our styles but we don't actually need the layers all right so let's work on this input okay so we'll go to class it's going to be the darkest background so it's gonna be BG gray 900 we're probably gonna want to have like text white now the place will become doesn't match perfectly but I'll have to think about how we want to solve that I think he's using a pixel border radius so let's round it LG and we should probably add the same padding to this box that we have on the other one although it looks like there's probably less 10 Steve Steve Steve killing me with these random values all right so we'll start with px 4 py 3 so it's gonna be a little bit taller than the design I think it'll probably work out okay though admittedly that 10 pixels thing does look nice here Steve has like a less of a padding here I'm gonna call that an accident um but that's okay so for this input we're gonna want some padding and stuff to you so I think we can just kind of start by playing this stuff by ear just kind of eyeballing and get get it looking nice we're gonna want the input in the button kind of spread left and right kind of like we did before so we'll make this we'll do the same sort of thing with Flex justify between okay so we've got this kind of search things sort of generally in place got this magnifying glass so let's see if we can find that it's probably in here as search yeah so we'll grab the search icon okay so let's work through how we can actually get this icon appearing next to the desktop or start next to the input so we can't actually put the icon in the input of course right the best we can do is sort of put it near the input and so I'm gonna get rays classes cuz we're just gonna add our own and this primary class can go secondary can go yeah but we are gonna want like a container for this stuff so I'm gonna wrap these in a div and then we're going to use like absolute positioning to sort of get things in the right spot so we're gonna make this relative so that we can position this SVG absolutely within it and I'm gonna wrap the SVG native to for reasons I'll explain in a second so we're gonna take this div and we're gonna make a position:absolute and we're gonna say that this div should be pinned to the top and bottom of the parent which we can do with in set y 0 and it should be pinned to the left to treat it with left 0 so this SVG we're gonna give it like h6w 6 maybe fill current and then like text gray 500 just something see if we can get showing up so one thing that kind of sucks about this SVG is this the inside isn't cut out so it's not meant to show the background color which is kind of annoying to me so this is what we're gonna do we're gonna we're gonna edit Steve's SVG and we exported ourselves alright so let's bring it back our layers panel here so we've got the magnifying glass now if we just hide this what do we get yeah so if we give us a different color what do we even get like what's what's the reason this even exists okay so we're just gonna delete this and we're just gonna export this SVG without that part won't go and reoptimize it once use this one instead okay so we can get rid of this fill and all the classes are gone already so now we'll just go back to h6 w6 fill current text gray 500 it's catching up on chat here I haven't really been reading yeah so you can copy the SVG out of figma but the problem is this SVG is a 20 by 20 square right because it's just the path of the SVG but we want the whole icon system to be drawn on the same size artboard so one thing problem that you run into if you just like copy this as an SVG say your icons are in different size view boxes the way that me and Steve designed all these icons is no matter the shape of the icon like if I throw all these in here you'll see they are all on a 24 by 24 pixel view box so they're all drawn on that artboard so one difference that you'll notice between like so here's like this twenty by twenty magnifying glass right and it goes all the way to the edge the one that I just exported is 24 by 24 and the icon is like centered within it and Steve kind of visually balanced everything to make the icons all cohesive and work well together and the benefit here of having everything on the same size artboard is that when I use utilities like h6w 6 I can use the same size on any icon and those icons are going to be rendered at the correct relative size to each other right so you can imagine that certain icons just don't take up as much space like for example this remove icon it's not even square it's going to be like 12 pixels by 2 pixels or something right which makes it very hard to size with tailwind utilities because we can't maintain the correct aspect ratio but if the icon is exported in a 24 pixel by 24 pixel artboard then I can always size everything as a square and size 6 always means the same thing like if I put this remove icon next to like whatever this shield icon or whatever and I give them both the same utilities they're gonna look proportional they're gonna look correct whereas if I exported them at the bare minimum view box size for the actual contents then making the remove icon h6 is gonna make this bar 6 tall so it's gonna be way bigger icon than any of the other icons so we always make sure that we're always draw and export our icons on square artboards that are always the same size because it makes it a lot easier to work with them okay so anyways we've kind of got the start of this in place looks like 600 or 500 it's a little too much 600 is probably good does this have some transparency on it something about that looks a little funky I think it's the text that has the transparency on it because there's definitely no transparency on this if I make this like text read 500 yeah weird it must be looks like the placeholder is sitting on top that's bizarre that the placeholder is drawn on top but the text is drawn underneath truly odd but that's okay it doesn't really matter to us okay so we need to give this in the right spot so the reason that I used a div here to wrap the SVG historically what you might have done right is you might have like put this SVG in the right spot and something that I used to do in the past I know other people have done is you just tinker with these values right you have like top two pixels or whatever sorry say this like a position:relative and you're just like you're just kind of like manipulate this with these like very hard coded values like left four pixels and just kind of like get it where you want it to be like how many times have you had these like weird values in your code because you're just trying to like position an icon so the way that I prefer to do it is to try and do it in a more declarative kind of like reactive way so instead of just like specifying the exact offset what I'd rather do is create a div that wraps it and see how this div is the full height of the input by making it the full height of the input I can set it to display flex and then just tell it to automatically Center anything inside of itself and now that magnifying glass is perfectly centered so whereas with the other solution of top seven pixels if the input got taller the magnifying glass wouldn't be centered anymore right it would always be seven pixels from the top which is useless in this case if we were to change the height of this to like ten pixels or whatever and it's how I see actually this is a bad example because we're not changing the height of the element that has the background color I'm say we were to change the height of this to like 20 pixels you can see as this grows the magnifying glass always stays centered so it's a much more accurate way of sort of telling the browser how you want it to be positioned by giving it like the right constraints in the right relative place okay so now to get a position to the left what I would do is I would add some left padding to this div so we can start with maybe like pl2 and kind of see like where's Steve have the he's got an insect quite a bit so I think we're probably gonna want to like at least pl3 let's start with pl3 and then update the placeholder positioning and see how it looks so see how we have px4 on the input here that's basically see me what the same padding on the left and right we actually want the padding on the left to be a lot more now because the fact that we have to account for the magnifying glass so if we want to like just do it mathematically in our heads right we could think well this is set to 6 this is set to 3 3 plus 6 is 9 plus we would want probably this original padding of four next to the 9 that's like 13 so we probably want like 12 or something close to 12 and if I'm smart yeah that's pretty pretty close to looking good I would say like Steve has it a little bit tighter so we could try 10 and like that's probably not too bad yeah I think that I think that looks pretty good now we can't style the placeholder color directly with tailwind so that can be a problem for future us because it is something that probably would be good to handle but for now we'll just kind of let this be like that okay so one thing that would be kind of cool maybe is to come up with some sort of focus styling for this that isn't as crappy as that I'm not sure what the best way to do it would be we could like lighten the background slightly you know so we could say like focus outline:none to get rid of the ugly browser one and just do like 800 or we could yeah that's not gonna work or we could like totally invert the whole thing and we could like set it to white now this might be like too aggressive and we're gonna have to like change the placeholder color to you let's just see what happens if we go like focus text gray nine hundred I think that's actually not too bad it's a little bit of a high contrast extreme thing but I like it it's okay to remove the outline as long as you provide like a different focus style yeah yeah I think this is probably a pretty decent treatment here I kind of like that yeah someone was mentioning we should maybe have the padding on the right match the padding on the left right now we have way too much padding on the right yeah so this should be PL ten and then probably PR three or maybe PR 4 optic it's kind of eyeballing so this is with three that kind of feels like a little too tight for me with the magnifying glass because of the what we talked about before with the view box is a little bit bigger there's actually a little bit of extra space so I think four is probably gonna probably gonna be a good compromise here yeah that kind of feels like the right amount of padding on the right to me so I think I'm pretty good with on the size I'm not sure about I think like me and Steve had it kind of filling the available space but really that's just like a matter of determining what do we want the minimum size of the input to be um so anyways let's work on this little filters button so let's export this this icon now this is gonna be a bit of a challenge because Steve drew this right in figma and we don't have it on like the 24 pixel by 24 pixel art board so what I'm going to do is I'm going to paste it in and honestly this is actually probably fine this is probably centered in the same way because he all he probably did was take this menu icon and edit it a little bit let's just see is it centered yeah it's centered so I feel pretty comfortable just copying this 24 pixel version and throwing that on into SVG Oh grabbing that we got the background color we don't want the background color copy as SVG grab that will slam that inside the button and we can get rid of this film nun thing there's some artifacts kind of from SVG oh stuff that we don't need to keep that it doesn't know that we don't need to keep even this like Phil rule stuff I'm 99% sure because there's only one path it won't make a difference so let's see it looks like he's probably using the same size for this as he did for that which we made h6 so let's go with age 6 w 6 for this for color he's gone what does he gone for color here gray 500 so we can say Phil occurrence text gray 500 we can make this button inline flex probably so we get stuff next to each other I think the text where the button is probably white yeah so let's just wrap this in a span we'll give it a class of text white and for the font weight he's using medium so we'll go font medium and then we're gonna have a little bit of padding or a little bit of margin on the left here so why don't we start with like an ml - and see how that feels it's probably maybe a little bit too much try that and see how it ends up looking and yeah now we just go to this button so this is just a button that's gray 700 so we can go BG gray 700 looks like it's got rounded LG a pixel border radius and it's got a shadow on it which I'm pretty sure is just the tillens basic shadow okay so now we're going to need some horizontal padding so maybe we'll do PX 4 and that feels a little bit too much it looks pretty close on the right-hand side but the left-hand side is a little much again because of the view box size of the icon so let's go with pr4 and then maybe pl3 kind of like we did with the search and that looks pretty close I think so we have no focus state or hover State so why don't we try that I know in the design Steve has sort of like an active filter State that's like the lighter color I think we could do that for the hover state too so why don't we do however BG gray 600 yeah kind of feels decent and that for the focus state I think maybe we'll just do the same thing we'll just do focus outline:none we'll try the shadow outline this is kind of like a nicer looking focus ring that follows the border radius I think that's actually not too bad yeah seems okay to me I was gonna suggest we just do like the same hover color but because we're gonna use that for the active state too that makes it hard to know if it has it has focus once it's active so this will probably have to do okay so yeah we're just gonna focus on this mobile view for now like I'm trying to decide like okay should we jump to making this responsive bubble blah I think what's a better thing to do is just build this screen out and then we can work through the different sort of states where things are open or closed as well as the responsive stuff Tomin doesn't have any transitions functionality built in currently but it is something we're gonna cover in the course I'm doing it sort of custom because I think it's a good a good example of custom stuff in talent because you you are sort of expected to do custom stuff once in a while mobile you can't really have hover for mobile and there's no such thing maybe I'm misunderstanding your question though so if I am just let me know okay so let's see we'll do this Los Angeles stuff so we'll show the UI hide the layers thing again so this is going to be text gray 900 in font size 20 so text gray 900 text XL and I just kind of have these sizes memorized which it's probably a bit of an unfair advantage but you learn them pretty quick so this is gonna be text gray 600 what are we not for wait here regular regular yeah okay so for this main section we're probably gonna want the px4 as well and also some vertical padding I just don't know how much looks like actually more vertical padding like this is taller than what we had there so let's try py6 I feels like pretty close to me maybe could even go a little bit more I mean I said if we could like perfectly line these up so when we toggle back and forth we're seeing them truly the same but still it's pretty close okay alright so then we're gonna have like a section that contains all of the listings for that city so when we could div here and then inside of that div we're gonna have a div for this element it's gonna have an image and this is from unsplash I don't really know I wonder if I can if there's like meta details in the image maybe in like the layer list where I can I can more easily find where Steve got this image but no so we don't necessarily have to find the exact same one but I bet ya won't be that hard to find if we just search like modern home or something that's probably how Steve found it today it'd be nice if we could get the same image just because it's a little easier to compare our work and I don't want to export from figma I'd rather just the reference it from unsplash a modern house oh yeah this is getting us closer because I recognized some of those images we also did a Google reverse image search surprised I can't find it modern mansion sure Steve was searching for something like this to find it alright let's cheat well I still refuse to to actually export it from figma but I'm comfortable just kind of mask on it or was cropped in some way how do you get the original image that was used for this well let's just see when does it stop resizing something like the Hat now let's just export that quickly as a JPEG and then we'll just do images.google.com and see if this actually will find it see if it's smart enough oh he took you from air B&B maybe yeah so it's not from unsplash son of a gun you sure it's mine splash I don't think it's Ramon splash that's fine always a different one you think it's Ramon splash a it says Sun splashed in this file name this is probably a pretty boring part of its stream here we're probably losing people left and right just uh no hmm let's search house pool we're gonna find this damn image modern house pool all right this is stupid we should just pick a different image and move on but now I just let's pick an image that I think looks cool it actually is like a nice outdoor one Mediterranean house is that we think I'm gonna find it villa ah you're a genius we did it okay that is what I'm talking about teamwork okay all right let's get back to our design now I had to see you I find where we were working from all right so I need to memorize what this keyboard shortcut is for just hiding the layers panel beautiful okay all right who's in my file all you people what did you do you typed in the URL okay so we got this image we're gonna want to add some rounded corners to it probably the same as always just do you people literally just like type out this friggin ID to find this this mile you're killing me alright where's the shadow there's a shadow behind here I'm trying to figure out what layer it's on this one probably yeah so it's an MD shadow on the actual image so we'll add that alright so we got that MD shadow one tricky thing that we're gonna want to figure out eventually is like setting an exact aspect ratio which um we'll probably something that we figure out as in the course I'll probably use it as an example to write a custom plugin but for now we'll just maybe hard code and a height or something Steve's got a height of to 80 which is 17.5 REM which is 70 we have h 64 which is not quite there let's see but we can just use that in lieu of that value for now yeah object fit plus some aspect ratio helpers I'm gonna be good to go alright so we've got this image I'm gonna wrap the image in a div just in case we need to have a container for it because it's kind of like the image section and they kind of get this card section down below so let's think about how we want to make this card we use an H for for this modern home in city centre I never know what semantically this element should be should just be like a div with some stuff in it like a span that says Plus and then like a div with three beds it's just mid dot dot and that's the thing right two baths and then underneath here um I guess like a div with 1400 a week probably wrap this in a span and this in the span so we can stall them and then a div for the reviews look at the icons later alright so let's just kind of see here all right so let's just kind of get the bones in place so this div is gonna have a white background it's gonna have rounded corners it's gonna have some padding let's see probably the same pounding that we're using almost everywhere else so like PX 4 py 3 maybe something like that to start look at you people with your hands what are you doing all right can I hide you people somehow you're killing me here hmm oh I feel bad removing people you are looking at it just to learn just keep it cursors away from my UI so I could see what I'm doing cool so let's work on this general positioning maybe so this card has like an LG shadow on it that's why I'd like shadow LG and I'm trying to think like what's the best way to to bring the width in a little bit there's two ways I can think one way is to add like margin on the outside of the card another way is to put it in a container with horizontal padding for some reason that sounds better to me because of poor experiences with collapsing margins in the past so yeah that kind of brings it in nicely you can turn off the cursors in the view settings oh yeah get out of here all right that's nice thank you and then we want to pull this up so let's just do like a negative MT 16 or something I'll do like position:relative on this so that it has a z-index maybe probably 16 is gonna be fine we'll just have to kind of see how it ends up once we actually do the styling inside of it no one needs to apologize for looking at the figma file it's just joking around okay so let's look at this thing here so we got teal 200 teal 800 font weight medium and 12 okay so we're gonna say BG teal 200 texts teal 800 font medium upper case tracking wide text small text extra small my mistake and I think you might want to go with like a silly have your font weight because Steve's using this font graphic which is just like a little bit heavier than most other fonts at the same weight so let's try semi bold that looks a little more accurate and we can do the grounded full so we get what kind of like a pill look and we can do like px 2 maybe px 1 we're probably gonna want to give this like an inline block display at least yeah it's pretty close really we could go with a copy to in like a letting nun hope sorry py to that's too tall okay we could go with a py one letting none what was the lending normal that was - oh okay I guess we just weren't doing anything this is probably good okay so I will do the three beds two baths thing what do we got here still extra small grey six hundred texts excess text grey 600 font will go semi bold since we're converting that also needs to be uppercase tracking wide what's the is there another HTML entity for a fatter bullet it's just be ull is that like the fatter one yeah okay that's what we want okay so let's make this flex and need some margin here ml - at least this thick dot a real thing I think we need some more vertical padding on this go before all right so now this text text gray 900 font semi bold text LG yeah not the same font again but looks pretty good really it's actually pretty close is it actually rendering as the same font can't tell if I'm like blind or if graphic is like truly appearing very similar to San Francisco this looks like dangerously similar to me no it's different in some places actually yeah the M is a little different a lot of things are really similar though cool all right so that's pretty decent the space maybe a little bit of vertical margin maybe a little bit less alright so then here we've got nine hundred six hundred and probably it got tiny bit of margin on the left what do we have for font size here is a mixed 1614 this is gonna be text SM it should be baseline aligned already okay maybe a little bit of space above this div like empty one sort of thing and then we've got this reviews section at the bottom so this is 14 600 text SM text gray 600 and I guess we can do our stars now so the stars are going to be sort of tricky because one place where our little art board truck falls apart a little bit is when you want the icons to be like totally left aligned to the edge of everything else so you can see these are like eleven point five one pixels so that's kind of weird already I think we should still go with a 24 pixel art board I wonder if Steve has a star let's see yeah this looks like it's probably the same thing that he used to make the other stars so let's just grab this circle and delete it now you can see the dilemma right like if we want these stars to go all the way to the left this is gonna be a problem and I don't really want to have to like counteract that with like negative margin so I think we're probably better off making the star bigger so let's just link these for a second it's weird that it's a not square anyways we'll try this and see how it works out we might have to think of a slightly different solution if we don't like it okay so we get rid of the fill now what dimensions were these stars approximately they are 11 by 11 and that's probably gonna be hmm we'll just try I'm a ch3 w3 I think is gonna feel a little bit too small but we'll see color is teal 500 I think figma is the best UI design tool you can buy and it's free for most people's use cases it's extremely performant like it's incredible that it's a web app because it feels faster than Photoshop it feels faster than sketch it just works amazingly did you plan on maybe change some tips for other tags I'm trying to be pretty good with the with the semantics of things like you can see we know we're using a header for the actual header section we've got a section for the sidebar we're gonna main here we've been trying to use headings appropriately but for this thing I don't really know if I would use anything besides kind of like divs and spans to mark this up except for like where there's text I'm not sure if your can have like multiple header tags on a page I think they create a sectioning context or something which I don't know if you can have multiple headers I don't know something to to research but yeah I never really occurred to me to do it that way I'm gonna go to live check Simon on top chat here - I'm probably missing some stuff okay so there's our little star like literally little star I let's see if we make it a little bit bigger if that feels okay still I think that actually feels like a nice size to me and it doesn't feel like it's inset too much so maybe this will actually work out okay so we have a little bit of a gap that we gotta add maybe like an empty - maybe more that's probably good and we have what five stars so we're gonna want to do flex items Center for this probably and then we'll probably wrap this in a span so that we can give this a little bit of a little extra left margin yeah getting in my window management all messed up here looks like pretty close really anything about this that we don't like also looking at the spacing oh no I think that's a I think that's pretty good so we've been going for a while so I don't think I'm gonna I don't think I'm gonna go too much longer because there's some other stuff I want to do but I think what I'll probably do is I'll probably stream for like an hour like every day as I work on this cuz kind of my main project for this week is building out this UI and kind of getting it all done so I can kind of cut it up after the fact and figure out okay what order should we build things in for the course um you know should we go all the way with this or should I save some of that for a later lesson but yeah my main priority right now is just kind of getting everything built so I think I might as well just build at all live so people can kind of follow along if they're interested and then once we got I'll figure it out next week hopefully I'll I'll start working on the actual course videos and bang that out and hopefully probably week and a half or something get those edited and then get them up so maybe the last thing that we'll do is make sure that this gray area this is full height so a couple oh yeah photo is further down good call so we need a little bit of top margin here let's just do that quickly mg4 me come on there we go maybe MT I don't really like using mt5 for things that's probably good I like how that looks ok so the last thing I want to do maybe before we stop for today and save some more stuff for the rest of the week is get this gray area to be full height two ways I can think to do that one is we could just go to like our HTML and we can add like a class here we could just say BG gray 200 I think yeah now the whole body will always be that color but with these like s.p.a sort of apps it's not always the best idea I think to be mucking around with your public template because a lot of apps you actually don't even have access to it I'll explain the margin thing in a second don't let me forget the way that we could do that in this case though that I like to do is just sound like a min height on the octave so if we set the min height to be at least as tall as the screen that'll kind of be enough oh we get to go cool okay so the question was any reason you prefer top margin over bottom so I used to use bottom margin a lot more and then my buddy Sam kind of convinced me and I've read some stuff about this sense too that it makes a lot of sense to try and always use either only bottom margins and right margins or only left margins and top margins so that like your margins are always declared in the same direction that avoids like weird collapsing margin problems and stuff where you have like a bottom margin on one thing at a top margin on another and they combine so you can get unexpected results if you're mixing margins the reason that I was convinced to always use left margins and top margins is that when you use a bottom margin you're actually affecting by declaring a bottom margin on this element I'm affecting the position of this element right like I'm saying anything that comes after this should be moved by six units but by using a top margin this is actually affecting the element that it's declared on the saying move me down by this amount and I really like the idea of all my declarations on an element affecting that element instead of affecting surrounding elements so by adding a margin top to this it's actually moving this div whereas adding a margin bottom here doesn't move this tag it moves this tag so it doesn't really make a difference and ideals I still do use bottom margins for certain things one example would be like say you have like a conditional thing that was shown only if there was an error like see he had like a V if you no errors or something and had like a warning message here I would put like a bottom margin on this because this shouldn't have to know that this ever exists you know I mean this should sort of like be declared based on this element not based on whether this element is there so if this is going to pop into the Dom then I'm going to make sure it creates room for itself but generally I prefer to use top margins and left margins these days and again it doesn't actually matter that much I think what matters more is that you use like either bottom and right or top and left but it makes sense to me sort of from a mental model perspective that a margin should affect the element that I'm adding it to so I this has only been a recent change I didn't start doing this until probably a few months ago but it's kind of become second nature now so it's just yeah it's just I never think about it I never just decide am I using left or am I using right or am i using top or am I using bottom I just have a rule always use top always use left unless it's a dynamically inserted element that needs to create space for itself and that's just one less thing to think about so yeah I think that's probably a good place to stop for today and I'll probably do another one tomorrow and we can maybe work on getting like some of these menus to work or working on some of the responsive stuff so hopefully that was interesting hopefully there's a couple cool tricks in there and yeah thanks everyone see ya to the next dream

Channel: Adam Wathan

Views: 46,945

Rating: 4.9779491 out of 5

Keywords:

Id: 0aTRN9CSCY0

Length: 80min 57sec (4857 seconds)

Published: Tue Jun 11 2019