GraphQL Tutorial #36 - Styling the App

Key Takeaways

all right they're my friends so we've got the functionality of this app down to a tee so we can do all kinds of magic inside it however at the minute it's looking very much like a program developed by a server-side programmer who doesn't know any CSS at all so let's try our best to rectify that and just make this look a little bit better so let's head over to the code and we can see this is the root up and we have this div right here with an ID of main so let's grab that first of all and style up that one so we'll go into index dot CSS and this is where we can add all of our CSS for this project the first thing I'd like to do then is get that main ID and we'll style the h1 inside it and we'll say color is going to be 444 and then text aligned is going to be Center so basically it 444 is kind of a deep great and we're just putting it to the center as well next we'll take the main container itself not the h1 inside it we'll give it a padding of 0 pixels and then we'll give it a box sizing of border - box that just basically takes into consideration the padding and the border when it works out the width of something and then the width is going to be set to 60 the sense of the screen and the height is going to be a 100% alright so we have the main thing sorted let's save this and view it in a browser probably not gonna look that much different to be honest at the minute okay no nothing much I do here but anyway it's getting there so let's go back into this the next thing I'd like to do is style up that book list so let's take a look at this we have down here an ID of book links we have a ul inside it and a lies inside that so let's stand up those bad boys will say book list first of all and that's going to have a padding of 0 and then after that we'll do the Li tags inside the book list so book list Li and then underneath that we want to display each one as in line block that's going to place them next to each other rather than just one on top of the other the margin is going to be around 12 pixels each way around the padding about 10 pixels and then the border Raiders border-radius rather is going to be about 4 pixels just to give it a kind of softer feel and the border itself is gonna be one pixel in width it's gonna be solid and it's gonna be a color which is kind of like a pinky color which is 8 8 then 0e then 4s all right so I have to moved on that let's give this a box shadow just to lift out of the page and give it a bit of depth so the box shadow is going to be 1 pixel to pixel 3 pixel then we'll use RGB a so we have an alpha Channel and we can set the opacity 0 0 0 and then not 0.3 for the opacity so it's like a kind of black box shadow but only semi-transparent okay so the cursor is going to be as well a pointer because when a user hovers over a book I want them to know they can click it and I want that little hand pointer instead of just an arrow and then finally the color of the text inside here is gonna be the same as the border which is 8 8 0 e F or was it 4 F yep 4 F cool all right there so are we doing something's gone wrong here or we need the semicolon at the end cool so let's save that and take a look in the browser again all right starting to look a little bit better now I'm zoomed in to X let's zoom out a little bit go to 150 or even a hundred and twenty-five percent okay so we can start to see these are looking a little bit better now so we need to stand up as well the form so let's do that next we'll go back into our CSS and so I get the form I'm just gonna give myself a little bit of room so the form is next now this form is going to have a background of white so it stands out a little bit on the page now don't do what I've done and do everything in capitals because just not good at all we'll do background of FFF so that's white it stands out on the page the padding is going to be about 20 pixels the position is going to be fixed because it's gonna be fixed in the bottom left of the screen so wanting to stay there so left is going to be zero and bottom is also going to be zero sweep the width of the forum I'm just going to set to forage of pixels for now all right so now we can start each field inside the forum if we look at book where the forum is we can see we have these different fields right and they all have a class name of field so inside the CSS we'll say for and then dot field and inside here we'll say display grid and grid template columns is going to be one fraction and one fraction again so that's for the label and the input box now if you're unsure on CSS grid I've got a whole playlist on CSS grid I'm not going to spend this video explaining the nuances of it go and check that out if you want to I'll leave the link down below so also we're going to give this a grid gap off around ten pixels that just means there's a tempest will gap between each column if you like and row so now we've done the fields let's style up the labels will say farm label and this is going to have a text align property of right so it's going to scoot over to the right for the label and a padding of six pixels something like that let's just see how it's looking at the minute go over here mmm all right looking okay so this is the grid and the text align in place we have the farm fields on the right and we have the labels on the left ball text aligned to the right so start to look a little bit better already and if I go back now to the code we can carry this on so I'd like to also style up the Select and the input fields so we'll say form select and form input like so and inside here I'd like to say the margin of each one is going to be four pixels the padding is going to be around six pixels and the box sizing is going to be border-box all right cool now we want to style up that button on the bottom left down here okay want to make it look a little more puppet and stand out so let us make some space again and say form button and this is going to have a color of white so that's the text inside it so FFF the font size is going to be two M's and the background is going to be kind of like a pinky color and the hex code for that is a D one four five seven cool all right now we want a border of zero on the button itself the padding is going to be zero top and bottom but ten pixels left and right the border radius is going to be fifty percent and what that does is turn it into a circle when the border radius is 50% or more of something it's going to turn it into a circle right so all if it allows to be a circle it's small enough to be a circle that is so the cursor is going to be a pointer so we know we can click it the position is going to be absolute and then the bottom is going to be ten pixels so it's going to shift up a little bit from the bottom and also from the left as well ten pixels so let's have a look at that button right now see what it looks like all right cool so it's looking a bit better now let me just zoom in a little all right here we go take that off so this is looking pretty good so far we have now the farm sorted and we have the list of books down here sorted I suppose all we need to do now is stand up this thing so it's some kind of panel on the right so let us go back to the code and do that if we go to book details we can see that this has an ID of book - detail so let's use that will copy it and we'll paste it over here alright so book details now the position of this thing is going to be fixed on the right hand side so we'll say top is zero so it's flush to the top and right is also zero so it's flush to the right the width is going to be 40% and the height is going to be 100% alright so we have the content on the left which is 60% in weight I think let me just check yep the main is 60% in width then we have this on the right which is going to be 40% in width make sense the height is 100% so hopefully it's going to take up the whole height of the screen all right so the background of this is going to be kind of like a pink color so we'll use that same hex code that we used for the button right here so let me just copy that and paste it down here all right the padding and we'll say about 30 pixels the overflow is going to be auto so we'll get a scrollbar if it flows over the initial height the box shadow is going to be minus 2 pixels because we want to scoot it out to the left minus 3 pixels and 5 pixels and rgba so we have an alpha channel as well again we'll do 0 0 0 which is black and not 0.3 for the opacity all right then we want a box - sizing of border box and then finally the color of the text inside is going to be white whew oh my god so that was a lot of CSS to cram into what is about seven or eight minutes so at the minute we can see no book selected if we select a book now we can see all the book details on the right all right so let's just try adding one more book my great book this doesn't exist genre let's do something else let's do horror and then we'll just assign this one to Brandon Sanderson for the hell of it ok so now we can see my great book is here if we click on that we get details about that book as well awesome so my friends there we go that is your tour into graph QL over I hope you've enjoyed this series and you've gathered some kind of useful information from it if you do like these videos with my friends please do not forget to share subscribe and like and I'm going to see you in the very next tutorial series