Starting from scratch to build a todo app using Vite, HTML, CSS, & Zeplin

welcome to building with ben today we're going to approach an app that most of us are quite familiar with and that is the to do nbc but rather than simply building the same thing that everyone else does we're going to do it a little bit differently because we're going to layer our own unique design by following a design workflow where we get a design spec and we're going to build it out from scratch using veet and view 3. ready to jump in let's do this so uh to get started let's take a look at the to-do app that we're gonna be building together our view your to-do app and so we can see here what i'm using is a zeppelin which is a tool that's used to basically transfer knowledge between design artifacts um to the developer so that way we don't have to go into like sketch files or photoshop to figure out what's going on instead as we go through the ui you'll see um why tools like zeppelin can be so useful when translating designs into our code um so we'll dive into this in a little bit and then as far as other resources for us we're going to be using veet for this particular app and so um i'll talk a little bit through it but basically think of it like view cli in the sense that it has webpack um sorry not that veed has webpack but instead that has like a bundler that helps to build your tools together and then helps to like have like your server restart hot module replacement those sort of things and so vt is something you can read more about if that's something you're interested in and finally the repo um every you know the things i do here will always be public so um view your to-do's will definitely be available on github for you afterwards as you can see right now is totally blank so um let's go ahead and jump right in so go ahead and open my terminal since we have a brand new project and so inside i'm inside my project directory and i've gone ahead and i think i've already cloned view your to-do's perfect alright so viewer to do's is clone now all right so we're going to want to go ahead and bump this up a little bit let's go ahead and scaffold our veet project and so the way we do this is normally with you know vcli you would expect view create sorry yeah view create your app name in this case this is using um basically like templates uh so like veet app so these are like npm modules where instead of installing a whole cli to set something up that you might only do a few times this allows yarn to sort of like subvert that and it's one less thing you have to like install so we don't have to install like a veet cli for example we just use yarn create veet app and then it'll do the thing for us uh so yeah let's go ahead and do that so um again i use yarn so i'll do yarn create veed app and i'm just gonna do it inside of this directory uh nothing too special about that so we're gonna let that install oh it's not empty alright so let me remove the readme okay let's try that again still failing um it's probably because you know what i think i know why okay so it's yeah i think it's being so so it's being sensitive to the fact that there's probably a get um to do list al we actually have there is technically stuff in here so given that's the case then i'm just gonna go ahead and yarn create veed app um and i'm just gonna call it like uh for now like to do put it in a separate folder and that way we don't have to deal with that problem okay now we're great okay except um the only problem is i don't want it in there i'd prefer all this stuff out in the open so i'm just going to drag that out and then to do is empty and let's go ahead and delete that um so let's see so i'm gonna say so again it's view your to-do's is the project and that'll be our package do i think that's everything so if we do yarn and install all our dependencies all right great so we see that we've initialized our project um let's just make sure it works so yarn serve oop uh maybe it's yarn dev instead yes it is okay and so we're good at local host 30 30 so let's go and open that all right so now we can see that this is open so again bump that over like usually do let's open this up in vs code which we have so this will be the two thirds and okay so we have it now so if we look at our source in here we'll see that it actually looks really familiar it actually basically is our view cli app we have our app here um everything looks fairly straightforward components assets this is more or less what we're used to uh with our public you know no index.html though that's because that is sitting here interestingly enough um but okay so some modifications but overall like nothing we can't uh work around right so knowing that let's go ahead and uh yeah let's let's start our work we are here to build some stuff let's go ahead actually let's go ahead and commit that so again i'm going to start using the terminal a bit more inside of vs code so here we basically just scaffolded a beat app i'm going to go ahead and do that so this is config and knit feed app scaffold okay great um all right so uh now that we have that let's go ahead and get started with our design okay so now that we have this it's time for us to actually go ahead and build out our html css for our components um so typically when we're looking at our designs um or like functionality usually we're just like sort of scaffolding from functional requirements so i think one of the nice things we're going to start doing is to really see call it the full stack approach to front end where um we get designs from our design team and what do we do with that how we make sure we compartmentalize and how can we sort of get ahead on some of our software software architecture rather than being confined to necessarily features as our organization schema so here we have a basic outline we see like we have a title here subtitle you know we have an input here with some sort of submit button that goes to the right so that's good to know and we have some these tags here the label these look uh probably like something that could be componentized and clear these here look pretty repeatable right because we have basically the individual to do items that are being checked off so i say let's go ahead and um yeah let's start building so i'm going to go ahead and drop this over 50 actually and we're going to start by actually doing the individual pieces of it right so let's go ahead and delete all this boilerplate and let's go ahead and delete this also from our project so it'll get wiped out together all right all right so from here so we've removed the boilerplate um yep take that out okay so we know a couple things right we know that um inside of our main block basically inside of our main content we have an h1 that says view your to-do view your to-do and then we have a paragraph tag that's a to-do app powered i see i'm going to go ahead and do it this way i do app powered by view js3 all right so we have that now and i'm gonna go ahead and so we know a couple things we know that there's an input here with text there's gonna be some sort of button that comes with it let's go ahead and ignore this real quick let's hide that uh how do i hide this i think this sidebar is fixed that's okay we have enough space so this button would be for now it's going to say plus add and then yep this is our this is our starting point we're going to focus on this top portion first so we look inside our app uh we have something basic but again like we're trying to implement the design right so let's go ahead and take a look at our style block and we know a couple of things so when we're doing things with zeppelin one thing that's really nice is you'll notice it actually goes ahead and starts to pull out some of the values you're probably interested in as a developer so in this case we can see that now that like the font size is 44 and we know that there's this font dm serif display right so why don't we go ahead and start with that right so font size 44 so let's go ahead and call it uh page title and so you might be noticing i'm not pulling out the h1 directly and the reason i don't want to do that is because in my experience when it comes to styles it's really best to keep them to class names as much as humanly possible just because it it it basically like separates the scope of concerns when it comes to deciding the semantics of your html like um whether it's from an accessibility perspective or whatnot it separates that so people can use elements without being uh sort of call it restricted later on um so that's why i like rather than targeting the x1 i prefer to keep it to the title and set so again let's let's let's be kind of literal about our styles for now we're going to worry about rems and that kind of things so we know that it's 40 pixels font weight that's fine um letter spacing though this is something to be specific on that so that's something to pay attention to and the color so these are some things that we're gonna care about um and so we need the typeface and so actually if you couldn't tell actually this is all up here as well so i'm gonna go ahead and let me see uh that's actually not what i wanted to do but that's okay um do do okay so we're gonna go ahead and go to fonts.google.com to pull this out i believe it should be in here so dm serif uh let's see not dm serif so dm serif let's find out it is dm serif display let's try that again dm serif display ah here we go perfect okay so we're gonna go ahead and let's import that so how are we gonna do that usually there's an embed somewhere uh yes regular and great the link is here i'm gonna pull all right so pull all this stuff so we can grab this for the font family because we know that's what we're gonna want and grab this for the import great so that'll be done here at this level uh so we'll save that there and then when we save our app.view we should now see great our vr2 is looking much closer to the design now um and this is great so the only thing we need to do now is we notice though that everything is centered but it's not inside of app.view and that's because it looks like inside of our veet app there's actually an index.css that's kind of global so for now i'm basically going to go ahead and strip out i really don't want it to text align center everything don't do that i don't mind it giving a default font and some anti-aliasing that's fine for now there we go okay now we have taken that out so we have here we have that piece um typography wise and then we need to find out what the sans serif so this is source sans pro so let's go ahead and add this actually too as well so here we go so we have source sans pro and i'm going to go ahead and just add let's see do we know what the weight is on this one the weight one is bold okay so since this is going to be our body text i'm going to assume i'm going to need the regular and for now i'll do can i set a double check so this is the thing about when you're doing design work right you got to be kind of careful to what the font weight is and this one is just regular bold okay if it's regular board i will skip the semi bold um and so you might be tempted to like import more than you need and remember the reason we don't do that is because of performance reasons like if the user doesn't need to load it we really want to avoid basically pulling it in so that's why we want we do want to be sort of respectful of that when users are doing things so in this case actually this is probably the time where inside of our index.css which is the more generic this is where we should probably be actually doing our source stands pro instead so i believe if i just do it like this that should do the trick for us and let's inspect and double check uh source stands pro it looks like it works if we take out the font it's going to break yup it changes okay so our source pro is in there um and so this is the subtitle so what i want to go ahead and do is inside of app.view let's go ahead and give this a class of subtitle and so our subtitle see actually i'm going to close this stuff so we have lessons to navigate okay let's see font size 16 okay so this is the default um and so in that case let's let me be explicit on our index.css that font size on the app as a whole is going to be 16 pixels and the reason this is important is because this will kind of set the bases for our relative basically m units so if i say font size one rem we'll see that inside of our veed app that this should still be 16 um you see that one round and when we calculate it you'll see the font size is 16. and so if we double it to 2 ram we should see this to become 32 and we do and vice versa if we cut that down by 50 that should be 24 so in this case again we know that it's one ram so good but we also know that it should be font weight bold and we also know that it should be this color so whoops i'm gonna go ahead and copy the text color over here and so already i think we're gonna be looking much better let me flip this over okay so this is already kind of getting better but we've noticed a couple things well one is that this is supposed to be a lot closer together right this this is there's a really big margin here and so one thing that's really nice about the uh uh zeppelin here is that typically you'd be able to see the the space between your elements and so in this case unfortunately because of the way the line height is on this h1 it's kind of hard to tell so we're going to allow the eyeball a little bit but what you'll see here though is that if i go from here to here we're gonna see that it's a 30 pixel difference and it's smaller than this so i'm gonna just go out on a limb here and say it's about half of the 30 pixels so we're going to say 15 pixels and so on this i'm hoping that i am going by instant here i think it's going on an h1 margin bottom you'll see that it jumps down a little bit but actually if we look carefully it looks like that space we saw in zeppelin is coming from the typography itself so when i look at this to be honest i think we can actually remove the margin entirely to reflect the design and because that's that's what we're trying to do right we're trying to actually replicate what our designers gave us and it looks like that means that the subtitle needs a margin top zero okay and then great so this is looking um already closer as far as spacing goes to the original to do but it's not center um that's where i'm one of the first things i'm noticing so how we go ahead and do that is we want to actually go ahead and see what's the max width of the container now we certainly can't tell from something like this right so if i go ahead and max screen this we'll see here that this is not the container the container really is the the boundary of constraints everything from a design perspective is really are really these inputs and so we can tell now that um based on the width here you'll see that zeppelin's telling us that this is actually 600 pixels and this is perfect because that actually tells us what we really need to know um so if i go ahead and now bump this over to the right okay um and then pump this over here all right so what we're gonna see now is that inside of our app we're gonna go ahead and wrap this um i'm gonna just call this main wrapper so we can distinguish it so main wrapper we know is gonna be a let's say max width of 600 pixels now if you're immediately thinking like why not do explicitly 600 just like with 600 um the reason for that is simply because uh when it comes to responsive it's just gonna stick there so we know that their mobile devices are generally like that 300 range so just from experience i know that going with will immediately give me that problem so hence we do max with and then once it's maxed with we're going to go ahead and margin zero auto we should go ahead and center that in this in the middle of the page so if we go ahead and maximize uh we should see that stays in the middle perfectly and it does and it does do just that which is great um the only the other thing though is that there is a big there's a bigger gap here than what we currently have you can see that zeppelin is telling us 104 and this is again one of the i like if just for this alone i love having tools that can tell me this because there's one last thing i have to like sit there and measure so um 104 pixels um and that's fine so we can do that uh fairly easily right because we know the margin bottom is zero so let's do 104 pixels just to match the design to pixel perfect already looking great and then the other thing we got to do though it looks like there is a light gray on our page which is right here so i'm going to go ahead and copy that and around the main wrapper let's go ahead and actually not even main wrapper this is on the entire page so i'm going to put it at the html level and the background color is going to be here okay great okay so we have the light gray now and so ah it's already starting to come together which is super nice um which is great okay so the next thing we want to do is go ahead actually you know what let's go ahead and commit this code so if i open up whoops go ahead shift so learning all my keys for window management but we'll get there so we'll add this and we'll say commit this is a feature so say add uh styling for uh headers so basically what we did uh actually let me change that so technically we did headers and page uh basic styling and so if you're wondering what that get like nvm for uh git nevermind um that's an alias that i've included to basically like reset the head of the um commit so that it's just a way because i know that a lot of times i like to undo my commits and i always like it's like get dash dash for set soft no get reset dash dash soft a positive head you see what i'm talking about like it's kind of a pain to type out so i basically created an alias a terminal alias which basically says here's a custom shortcut that will do this command that you do all the time and git nevermind is my way of saying whoops i didn't want to commit that like rewind me back one okay so now that we have this we're going to go ahead and tack apply the next more complicated part of our styling which is going to be this input box because not only is the input box we actually have a button to the left of it so this is a little bit trickier um from a styling perspective so let's go ahead and start out with some of the basics so we have an input we have a button so i know this is gonna need to be position like there's gonna be some interesting positioning going on here so let's go ahead and wrap that in a div because we know this is gonna happen so actually this is gonna be a very special type of class in this i'll just call it user input for now and uh see i'll just call it main user input actually because technically the other ones are inputs um for checking and stuff this is the primary point of entry um and i'm already getting a small sense this should probably be its own component but again let's not get ahead of ourselves with this so all right here we go so first thing first there is a placeholder so we know we can do that placeholder equals type a new to do item okay and so if we go ahead and check our uh app we go and see type you need to do items looking good so okay i'm gonna do something that's a little bit um i think that the flipping is probably gonna be a little challenging i'm gonna bump this over here bump this into the center and then here on the third so this way at least um you can kind of see what's happening right as we're coding so let me go ahead and hide our terminal so now at least you can kind of see what's going on so let me actually hide this we don't need the inspector okay so um yeah let's keep going okay so we have this we have type of need to do item so one thing i'm already noticing is that there's a padding so it looks like it's basically 16 all around there's a slight difference on the bottom here but that's good to know that it's 16 padding and um okay that's basically what we need to know so here what i'm going to do is oh mace user input i just bought myself in uh so so i bought myself in naming because what i like to do is i try to like associate things so i'm gonna call this um i'll call it new task wrapper so this is what this thing is kind of doing right this is a new task wrapper and so you'll see what i'm talking about here i want new task input and as you might have guessed i'm going to call this new task button and so this way again it's clear from the naming that these are all related together it's really what i kind of what i want to achieve here so again let's go ahead and do that new task wrapper again let's go ahead and make this let's just see make sure everything we see is showing up so red great so it's actually 100 which is kind of uh interesting i was surprised i half expected it to be constrained but that's what borders do really well for uh letting you know what's happening um okay so a couple things we know that um let's see let's go ahead and we have the new task wrapper we have input so if we know the input we know the input has a padding of 16 pixels so that's already starting to look a little bit closer um the font family actually it looks like it's not taking in the uh basically the source ends pro for some reason um or is it no this should be sources pro and it's interesting oh it's semi-bold for this one okay that's what i'm seeing here because this one is regular bold this is semi-bold okay so this means that okay uh if i do font weight semi bold it's not gonna totally work so this is 600 that okay that kind of works i'm not going to worry too much about importing it right now and we have another level of gray here um okay and that's good so okay so we have this and then what we need to do now is the button needs to also be let's see how do we do this properly okay so one thing i know i'm going to want to do is do a display flex uh great that did it for me so i was worried about how to like get it to fill up the display flight does that for me because it everything just sort of fills up its individual pieces so this is good already looking better and then we just need the input to take up the entire space basically when it can and then the button on the other hand in terms of the width we want to give it this similarly looks like it has no this one has an eight looks like 24 18 so 18 24 it looks like so i can go ahead and do padding uh top bottom is 18 24 pixels and so if you're wondering why i'm choosing 18 over 19 like we try to keep the ratio consistent so 18 over 24 verse 24 is better than 19 over 24. um and so okay a couple things one we need to know that what background color so it's this blue um whoops and then we know that the color of the text is white and then we know it looks like the font weight is bold too uh and i'm just bold it's tending to be black but uh let's just do bold for now that's better um interesting so oh actually i'm just so if you're wanting so here here's the number of the actual weight so i'm just gonna drop in 900 and it's not going to change significantly because we actually haven't imported it yet so i'm going to go ahead and actually go back in here to sources pro and we're going to go ahead and make sure we add black and i needed semi-bold so now that we have those things um then i can go ahead and update our input so we have a decent amount of weights being imported here which is which is totally fine but these are just uh you know when you're working with the designer these are just constraints that you need to be aware of so if in the future we find that there's a performance problem as a result then it'll be uh basically important to keep these in mind so we can see here now that things are looking a little bit better i think uh we can verify that it's the 900 here uh yeah following 900 okay so we're good okay so font weight there plus um so yeah this is one thing that you might notice too if you're looking at like color differentiation is that like it's coming off a little bit differently across the two like i'm seeing like this one looks a little bit flatter it's kind of interesting but let me knock out the border for instance that's definitely uh making a thing so taking out that border and so here we're noticing there's a bit of a rounded corner um the border radius is seven pixels but it's only seven pixels on the upper right and the bottom right so um i believe what we can do is that we can do bottom radius yeah i see so we have a bunch like top uh top right for example radius so this i can do seven pixels border bottom right radius whoops right radius here we go and then seven pixels there you go that's how we get that sharp like we can maintain this sharp edge or sorry the sharp edge on the left while rounding up on the left um and then so since that's the case we can actually assume which i'm probably right yes on the left hand side of our input is where border top left radius is then going to have its corresponding 7 pixels and the bottom left radius is going to be 7 pixels so already looking better um the only thing though which is a little odd is that there's no oh it says eight okay i don't know i'm a sucker for keeping even numbers so i'm just gonna make all of them eight so they're even um but the border is is solid okay so there's a really light tinge of gray on this so we can do border 1px solid and then this like right here so already it's like looking closer but it needs that box shadow which we're going to grab actually here because i don't i don't do box shadows enough to have it memorized so it's nice to have that copied over and voila it looks like that looks like it's um a lot closer does this have a box shadow too no just the input okay so here we can see now that we have our input with the do item although again it looks a little bit different from this i need to know why letter spacing is one pixel i'm pretty sure that's the default spacing one pixel oh no it's a little bit bigger okay that's that's what kind of making it a little bit bigger so this is now this is a little bit closer was it the same thing here letter spacing on this one is 0.67 maybe that's what's throwing me off because i'm looking at these and it's uh yup letter spacing 0.67 pixels okay great now we're looking it looks a little bit more one-to-one which is nice yeah it's so interesting that like it's rendering out 95-95-95 for the placeholder but um yeah it looks darker on chrome than on the zeppelin but this is some of the funny things that happen when it comes to comparing the two so okay so that means we have our button here we have our input that actually looks like our task and so i think yeah this is a good sort of stopping point to commit basically so i'm gonna actually pull up my terminal instead since we have everything already portioned out and so here we have updated typography and we've added that so feature add a new task input with updated typography great okay so here we go all right so we have a couple more elements to build out as far as our component right to make sure we have the full page as far as what we need we have these tabs here so let's go ahead and code that out so these are think of them like in my mind they're basically navigation tabs because we're navigating between different tabs um so but we're not switching pages though so i think while i'm tempted to use the navigation element like accessibility wise i think this is okay i'm gonna leave it this way because i do feel like the user while the well no in the future we theoretically want the url to actually change based on the query so i'm keeping it navigation because we're navigating between views is kind of how i'm seeing it so we're just gonna do unordered lists and then for every list item we will have uh so in this case right it's all three and so in this case it's um yeah i'm just gonna do a ref uh i guess in the in the future it'll be that for now it's just a button let's just do a button like this and then we can do current to and then button completed one and so knowing this what i have now i'm just gonna call each of these items a tab i think it's probably the best way to do this um so this is the tab wrapper this is the actually i'm gonna update all three of these at the same time one two whoops one two three 3 so tab wrapper tab item and then here we can have the individual tab buttons so this is basically what we have here um and so now that we have that sort of um idea we can go ahead and just go ahead and drop so tab wrapper is going to be a display flex and then again i'm just going to add the border 1px cell at red so it's easy for us to tell what's happening um i don't want style none so that all the dots have not disappeared and so now there's a couple weird things one um there's a margin that's happening right here that's why it's bumped um funny so i'm just gonna drop that to zero oh it looks like that was actually the top margin so actually yeah that's fine i'll drop it at zero for now because we're gonna need to customize it anyways padding okay let's say it was padding not margin my instinct was wrong but now we can see everything's bumped up left which is kind of what we want and so let's go ahead and start by saying what this space is and looks like this is 45 pixels so i can sim i can do 45 pixel zero which would go ahead and add a top to it as well as the bottom so if this becomes an issue we'll zero it out later but this at least says 45 pixels on the top and bottom zero on the left and right um okay so knowing that now we have a couple of things one we have to style these and they need to have looks like roughly 25 30 so i'm actually just gonna call it uh so sometimes when we receive design files sometimes we do have to make like sort of design calls in this regard and since we do seem to have a consistent like um measure as far as like grip graphs and grid gaps in those things i think 30 is a good number um because it's multiples of threes and so there's a whole design system around like thirds and the importance of that so i think 30 will be better than either 25 or 35 so we're gonna just split the difference and so in this case i think the easiest thing is i'm gonna change my mind on this actually and just do display grid and the reason for this is because with display grid i can actually so what i can do is i can say hey for the grid template columns right so as far as like what i want this grid to have i want to have three rows of basically like auto auto auto so that means that basically each one of your uh oh although this is splitting it up automatically oh i don't like that so okay the reason why i was saying this by the way is because i wanted to do like grid column gap i believe i always screw this up a little bit yeah 38 pixels i think is what it is yeah but okay so here's the problem is that we can see here it's doing the auto but then it's it's still doing the the gap here that's that purple piece that you see right there that's the 30 pixels i had defined um but it's not i thought it would go ahead and align to the content um is that a thing no um i'm gonna look this up real quick grid template columns mdn because i was hoping you would just align to 40 okay i don't clearly know this that well this is one of the reasons i like actually building things by hand um with css because it's nice to sort of get a sense so it looks like oh they have a masonry this is interesting um but we'll look into this another time um so it's okay so i'll show you how i would have done this with flex or how i will do it with flex because that's the one i'm definitely very familiar with is oh wait is it giving me a column gap already no get out no it oh it totally did do the thing okay um so all right that's a new thing uh so if i delete that it slaps together hey discover something new today um so originally what i was gonna do is each item so basically i was going to say for every uh so there's tab wrapper and i'll say so again the original plan like we're doing like like also like more traditional css without all this um the column gap typically we'd have to sorry not wrapper item um item we'd have to go like margin right 30 pixels and so this is cool you're like okay that's like the same thing but it's not totally that great because what happens is you end up getting extra margin on this side too and so we'd have to also then be like tab item last child margin zero and then that would replicate the same effect we are looking for but it's it's a couple lines of more code and sometimes you end up with these weird scenarios where you don't want like items to have margins and stuff so anyways uh nice to know that it had that fallback by default so if i just say column gap is 30 pixels that just works and i don't have to do all that fancy stuff anymore which is great um so tab item okay so let's keep styling though so i know that tab button for example we're gonna want border zero background color none whoops okay so this is did i spell something wrong why is it not uh tab button background color i guess i'll just do transparent there you go okay that's good we know this needs to be this color from zeppelin and we know that the letter spacing should be 1 pixels and then font weight is going to be bold and so if you're wondering what that translates to that's 700 i believe actually is the actual number that's looking pretty good um font family it's weird though i i'm expecting it to look like font source sans pro but it's not seeing that but if i space yeah that's so interesting and again it's like i guess maybe i'm zoomed in it zoomed in a little bit i don't know it's interesting that um you can see that the 16 pixels here is much bigger than what we would expect like on this side but again these are these are things we can update and so now that we have that we can take that out um looks like the tab item wasn't totally all that important which is fine that means i don't need to style that and then what we can do is then we need an active state so oh you know no no this is where that's actually helpful so if it's a tab item and it has its active state this is probably where we're gonna want to actually host this border so we say border bottom is looks like three pixels solid at this text color and so to verify this works correctly we'll say that on this particular tab item we'll say did i say it's active yeah it's active okay um although small problem is that we're noticing the list item is bigger than the button but these actually match up lined up exactly so i might have been premature in doing that on the active and may actually just want to do it on the bottom of the button itself but why is the list oh the list item comes with some padding uh that's what we can do okay so that means that no i think i do like it better on the tab item itself so we do padding zero um and then oh the button has padding oh that's weird why is the button up padding padding zero okay better um and then the tab item padding bottom looks like between here and here is roughly six pixels so let's see what happens um i'm just gonna do padding bottom six pixels and that yeah that looks much better okay very cool so as you can imagine when we click on these oh i wanna actually i do that i do want when we hover over uh basically the button we'll say tab button hover we will then say a cursor is going to be pointer so like this okay nice okay uh we are getting close um closer to being done so let's go ahead and so we now we finish the tab so we know that uh basically how we're going to switch those so let's go ahead and again jump over to our terminal and we're going to say at nav tabs with styling okay great um so the one of the main things we got to do now is to go ahead and build this uh item here so i'm going to go ahead and let's take i'm going to go ahead and expand this a little bit just so we can see so a couple things uh it looks like we have the text we have this ah this vector yep vector checked that would then switch out to another vector okay okay so let's go ahead and start with the html so inside of our here now we basically have a list and i'm just going to call it task list um sorry basically basically kind of know and so for every list there's a task item or a task list item and then this is going to be a little trickier okay so if i'm envisioning it we have three pieces to this input um there is technically the left so for now i'm just going to input type checkbox is the left-hand side then there's which um i guess for now we're gonna call task list check box and then we have the actual text we're rendering so in this case again go to the grocery store so we want to make sure it actually shows up correctly and this class is going to be task list text and then on the right though we have these two icons though that are going to represent edit and basically delete and so i want to go ahead and group that together because these are basically like call to action items so i'll call this task list ctas so um again i would call to action is a little bit long so cta is more or less like an industry term so i'm okay being a little bit more specific about that and that way to be honest cta is very specific so a user is googling it um like or not just searching for it in the code base it's specific enough um so that's why i'm gonna leave it as call to action um and so inside of this then we're gonna have our individual icons so again we're just gonna for now i'm just gonna say like p edit um and then p delete that's what we need to have okay um so we can see here so now let me go ahead and bump this over to the right okay so a couple of things one uh we're gonna have to let's start by doing the wrapper right this is probably the first thing we want to pay attention to um this wrapper looks like there are a couple different states but let's go ahead and just do the first one first looks like but let's say this this blue might be a focus state so what i want to go ahead and do is we're going to ignore the let's just do this one this is probably the more standard so we have tab item okay so now we're going to have our task list item so this is essentially the wrapper so border 1px solid s6 f6 f6 and then our border radius it looks like it should be 8 pixels again because again we want to be consistent with these so that's like one of the key things to like a good design system is that things start to kind of get a sense of consistency um so i thought i did test this item i did do that correctly okay so tesla's item is right here i have a border of the border radius i'm just going to display flex immediately right now um okay so the board is just really thin because and the reason i can't see it is because there's a box shadow that i've been provided there you go now this is better okay so the question is here is how do we want to do this um again this is just one horizontal line we're gonna not account for multi-line at this point so because of that i think flex still is a good solution for this but it does mean that like for example we need to have all the items go ahead and centered and task lists i had the cta and so the call to actions will also be aligned left to right which is good and then what are we going to do we're going to have let's see let's analyze this so this has 16 pixels or no this is 16 to 12. okay that's fine so task list check box is what we're going to add next task list check box okay so this is gonna cassie don't worry about the top and bottom okay in this case i don't like to do so there's a short hand for like doing all four sides of the padding i don't like that just because it just makes it hard for people to follow over time and just why not be declarative um we can let the compiler do its thing too um okay it looks like interesting the padding is not coming through yes we want the build tool to do its own thing uh is it because it's not the display block that it doesn't have padding uh padding left padding right nope it definitely sees the padding um hmm okay well this is an interesting thing because i definitely have the right input uh you know what though what i vaguely remember is that built-in form inputs are kind of they're kind of finicky when it comes to styling them so what we're going to do then instead is i'm going to focus on the wrapper which is the item to have a padding left of 16 pixels that way i don't have to worry too much about this piece and that it removes this and then similarly we can go ahead and assume that the 12 pixels on the text which is right next to it we'll go ahead and put that there so i'll do margin left 12 pixels that's what i'll do whoops i have i'm in the wrong place tab list oh sorry pass list text margin left 12 pixels i'm gonna do instead of padding okay great um the only other thing though is that this is a little weird why is this oh right okay so again we're dealing with that unordered list built in task list padding thing so padding zero there we go so now we have this and then we know that our text is finally bold okay and then the only other thing though is that this we need the center we need this part to be the part that grows so flex 1 is what we want because it basically says that grow whatever remaining space that you have and so again we see that padding's now messed up on that side so i'm going to go ahead and it looks like we can condense this that's fine so we can basically say 16 pixels like this which says left and right so this is one of those i'll use this shortcut because it's shorter to type like if they're even but otherwise i try to be declarative so this is good um i'm good with that and how much is space between these these have a 16 column gap so since we learned our little trick earlier we can then say column gap 16 pixels and then boom we're good to go so this is good we have this piece going for us and now what we need to do is gosh okay so with zeppelin we can go ahead and download our vector files so i'm gonna go ahead and do that there's our edit svg and this is gonna be our trashcan svg delete so let's go ahead and okay so let's go ahead and open that so i have so i'm going to grab that real quick and drop it inside of my project view your to-do's source i'll put it inside of assets for now okay so i'm going to blow this up real quick because we need to focus here as far as what we need to do so we have our assets edit that svg and stuff and so typically um you might be tempted to just import them directly as uh image like image source equals but um i'm a big fan of and when it comes to svgs actually having them as actual view components because that allows me to then manipulate them and do things with it and i do know um that when it comes to icon we do often times want to change the fill and those sort of things so it's kind of nice to be able to do that uh dynamically and so yeah so that's why generally with svg's uh icons i usually like to go ahead and just create a view components for them so here we can see that here's our icon delete so if i go ahead and drop that over inside of our template block save i think that's all i need for now and then edit same deal so we'll do uh icon edit dot view and then i'll drop that single file and then i think this is should be good um we'll find out shortly if i'm right or wrong if i copy the wrong thing we will find out shortly um okay cool so couple oh gosh i'm in that so now that i actually need my script log i'm gonna jump it all the way up top and then we're gonna go ahead and import uh basically our icon delete from components icon delete and then i'm gonna go ahead and copy this whole line and then we're gonna whoa what was that okay there we go copy delete and then i'm gonna go ahead and uh jump how do i jump jump okay there you go still learning my shortcuts all right here we go we're gonna replace these two with icon edit and then we're going to go ahead and register them here icon delete icon edit so save and so the way you can see this works is to go ahead and swap this or let me just do icon edit and then icon delete okay and so if i refresh everything's broken source map why is that source components 404 not found oh you know what i bet it is i need to add the extension there we go okay great um made me panic for a second so that's the other thing so feet wow that was that was a little weird um so vt has this thing where uh it it's still learning to sort of adapt to what's going on so the weird thing we saw earlier is basically because um so v is clearly at this point still hasn't totally figured out how to explicitly auto detect certain things so that it was looking for i'm assuming a dot js file and that is not what they are they're dot view files so that's why we have to be explicit um at this time with this so that's a little ergonomic that we'll need to improve but um we're gonna go ahead and remove the edit text but rather than just deleting them i do try to be a conscious of using image only things to indicate things for screen readers so there is this um screen reader only class that i've been using from bootstrap for like ever um and so basically i usually pull it from let me just pull it open i think this is this uh yes right here i always pull it from this one thread um and so what it does is is it positions the text and like makes it super like basically unreadable it's like one pixel big or whatever but it does help for screen readers when they're basically pulling stuff in and so for example i'm just going to drop this in index.css because whoops never mind already have those css this way it's a utility class that i can use anywhere um and it doesn't need to be scoped or anything so and the way i do this to make sure my code is uh whoops um so i'm gonna wrap it with a span of sr only and then do the same thing here so i'm using my image shortcut to wrap it so span sr only if you're using vs code it is the wrap with abbreviation command and that's what i'm using to do that so i have a shortcut you see there the command m command w uh that's what i'm using so if we save this now whoops um so i can actually just close the window so app.view whoops w save okay so now we can see that it's gone but our text um it definitely still exists because it's um basically uh yeah it's it's in the markup for screen readers to see but we are focusing on just the icon so this is great um the only other thing we need to do now is go ahead and swap this so here we have a circle and looks like this one is oval copy uh go ahead and download let me download there we go check mark okay i'm going to open this in the downloads as well i'm going to do the same thing and drop this over to our viewer to do's assets great okay so back inside our commands we're going to go ahead and create our components icon i'm going to call it empty circle and to be very explicit what it is um and so ovo copy that's all this is so again dropping in my single file component block and then we're pasting in that svg and then we have our icon check mark uh check i'm let's just use check circle check marks a little bit longer check circle dot view that should be enough and then here we go oop empty circle check circle here we go there you go that's that and then we have our svg here wonderful so i should be able to now delete all of these because i don't need this and we're going to verify this works by going ahead let's do the manual thing and duplicate this and then in one of them we're going to go ahead so let's import icon empty circle actually should be circle it doesn't even need to we don't need to say that it's empty let's let's even make it even simpler oh i messed up icon icon circle great okay so i'm going to try to be alphabetical in this case import icon circle from components icon circle dot view and i can make the same mistake as last time and then we have the check circle right and check h becomes comes before i so check circle from component slash icon check circle dot view then we can do icon check circle and icon circle wonderful and so we can check for this by saying um so in this case we're actually just going to do icon circle and in this case we'll do icon check circle and so if we look inside of our v app now we can see our individual ones which is great [Music] and so clearly we're going to need to eventually so at this point i want to say i can hide this too actually yeah so that's doing the same thing so i want that check so here is where we start to get into finicky territory so um i still want the checkbox to be accessible to screen readers as they're going through the application but i don't want to delete it and so as we mentioned before html form inputs are notoriously hard or by hard i mean actually impossible to style to custom things so people usually do things to like um sort of make it look a certain way and so for now i think the technique i'm aware of is to do the screen reader only and hide it but then we can use um it'll be a little tricky now they're thinking about it um but we need to attach events to both of these so theoretically when a user checks um the icon circle it'll update the v model so this will be a little bit of an exercise from an accessibility perspective but uh it's totally fine we're gonna we're gonna do this because we wanna make sure try to be as accessible as humanly possible um cool and then we know ooh looks like the allies are bumped up right next to each other so let's go um let's go ahead and list item so i want the task list items to have a margin of how much let's see it is telling us uh 16 pixels all right that's fine i can't work with that margin bottom 16 pixels and then oh i can't spell there we go okay now we're basically i think set up uh we have oh we have a couple more things so if this has a focus state so um if tacit that item basically if we're hovering over it or it's focused so i'm gonna do task list item focus and then we're going to do task list item hover either one of these things are going to cue this border that's what we want so border 1px solid this hex color so great and then we have our so we have our states um and then luckily we also our designer also did us the favor of sort of looking over the different states so if i go ahead and expand this a bit more we'll see that um so it looks like focus state oh so it looks like it's not focused that needs it when it's focused it just simply has a text inside of it and then this will update that's fine input state that's fine hover state and add button that's fine so this is where so i was right here so hover is where the blue comes in and then so filter options looks like if it's selected inactive hover okay so this is um interesting thing to distinguish then uh between them so let's go ahead and add that real quick so we're gonna go ahead and say for our um yeah so let's see so okay so i think at this point let's go ahead and commit what we have so i'm going to add this and then we so this is our feature add icons for yeah add icon components that's really what we did okay okay so we have that committed and so we're we're just about done with our app um and basically setting ourselves up for success for part two where we're going to go ahead and actually start wiring up the functionality and doing the things and so we know a couple of things we know that like for example when uh i was looking at the filter options right and so whoops um for the filter options we have the current right like what we're currently on which is good and it looks like actually this should be a much more solid black i do like this better so um let's go ahead and tab item is active it's going to be color and then this sort of like dark color and so if we refresh it's a little bit darker i think uh actually no it's not i'm gonna say so here it's i think what's happening is that it's getting overwritten by tab button so when it's active this is where cascade does help and then this should do it now it should be darker save and it's darker great uh so the um inactive uh so if it's inactive that's fine and then hover is completed okay this is this is interesting okay so when we hover over an item basically that's not the active one uh which is great because we've we've scoped the border only to active state so this means that tab item on hover will receive this uh blue um so color if i could spell will be this and so then we can see now that oh right his name's just tab item hover so tap iron on hover override the tap button color is what we're trying to say there we go so you see so it doesn't count for this because it's already active there's really nothing to hover over but we do have the pointer still to let people know uh that is but here now we have the color state and this is awesome so we have those states um and really if we're looking at the rest of the designs and blow this up um really the only thing remaining we really need to do is to show that like these icons on hover need to be blue and to be specific it needs to be looks like which blue it looks alright so unfortunately the blue is not showing up inside of zeppelin but i think we can assume that it's going to be a similar blue to basically like this blue that we just use um i think that's that's a pretty safe assumption and so the question here is how do we change that on hover so after all we have a component that's basically we have the icon in the individual icons um basically like here and so uh typically so you'll see that like if you've never worked so i'm gonna now that we know that i think i can make things bigger um so boom boom boom okay um the fill if you haven't worked with svgs before that's what actually determines the color so in this case if we drop in that blue we'll see that there's a slight difference um yeah it's it's a little bit it's not as obvious but again we wanna hover state for this piece so i think what we're gonna need to do uh it's gonna so this is gonna be interesting so i think what we need to do okay so i'm gonna do this i believe this should work so in this class i'm gonna call it icon uh icon object okay and you'll see why i'm doing this in a short minute um so we know that we know that each one of these things inside of here has basically it's um tas list uh cta i'm just gonna make it very long and very explicit right now just to be it's within the tesla cta and it's an icon within it that's why i'm doing it this way and so by doing it this way we are saying hey so this has a cta um inside of it so then we can basically say within task list icon as a style goes we can say task list icon or cta icon uh what we're basically saying is um when we see the task the actual icon object inside of it go ahead and do that a fill so apparently i think the fill was originally like let's see let's save red let's see if this works so we can already see it's already a difference so what we can do is then go when it is being hovered when the icon itself is being hovered then the object itself can have that blue that we were looking at earlier so this is great and then icon edit here um this object here we know oh what was the fill earlier 2d 2d okay that's fine and so you can also envision this could technically be a prop 2 but right now we're just going to keep it straight forward so here we go and then when we hover over it is that blue it's subtle but it is there so we can go ahead and copy this as well to our other icons um up top and then what we need to do though is inside of our delete icon is identify where exactly this is happening and it looks like this this svg is fairly straightforward so i can just focus on this class icon object so when we refresh you'll see that this is the blue this is the blue this is the blue this is the blue and um with that we are done uh setting ourselves up so i'm going to go ahead and clear this up um okay uh add states for icons and that's basically what we did okay um and this and then thing let's go and push that up and then i'll go ahead and make sure to check out a branch that we have this so this will be um really this is the first stopping point but we i still i'll make a branch so this is the second so this start um we'll call it html css v1 so this is our first session so here we go all right boom and that's a wrap for part one of your to-do in this episode we've gone ahead and built the foundation of view your to-do inside of v and view three and we've seen the value of tools like zeppelin which allow us to easily translate the design specs that designers give us so it's a lot easier to pull out things like hex colors and spacing between different elements on the page which certainly makes our lives a lot easier with that said i'll see you in part two where we're going to go ahead and hook up the functionality to what we've built today with the composition api thanks for watching and until next time ben coden signing off [Music] [Music] you

Channel: BenCodeZen

Views: 1,475

Keywords:

Id: tlWmdvX2cQA

Length: 69min 29sec (4169 seconds)

Published: Mon Nov 16 2020