Mobile-First Responsive Build #4 - Base Styles

Key Takeaways

I rather than gang so in this video I'd like to dive right into the CSS and to begin we focus on some core base styles to style up elements that aren't really going to change whether we view on a mobile or a desktop so things like buttons or input fields and colors now I want to start off by declaring a couple of variables now we can create variables in CSS to store values that we might commonly use through different rules so things like colors or font sizes now I'm going to declare a couple of variables for colors so I'm just gonna paste this in first of all and you can see the selector I've used is : root and what that does is select the roots elements inside the document so the HTML tag in this case and it means that whatever variables we define right here we can use in selectors which target any of the items inside the HTML document okay so inside the root selector I say Double Dash and then the name of whatever variable I want to use I've called it primary you can call it what you want and the value is this yellow color the second one is called secondary and I've used a blue color so now we can just refer to these variables in the future to use these colors and if we need to change the colors we change it once up here and not several times where we use it down below okay so there the variables the next thing I want to do is a quick reset because I want to reset some of the default browser styles we can see that without any of our own styles already the browser has styled the h1 the h2 to make them larger and bold also the anchor tags that we underlined and the Li tags have these little circle icons and also the UL has a margin as well as these things these also have margins as well top and bottom so I want to strip out some of those default browser styles so that we have more of a blank slate to work with so to do that first of all I'm going to target the Li tags and remove these little icons and to do that we say list - style - type this one and set that to none so if I save this now we're going to strip out those little circle icons awesome and the next thing I want to do is take out some of the margin and the and also the text-decoration of these things so I'm just gonna grab a few different things at once I'm going to say body and also P tags a tags you ELLs and allies and then inside I'm going to say margin is zero also the padding will be zero and also the text decoration is going to be not okay so if we save that then it should strip out a lot of the margin and padding of these things up here and also remove the underline for the anchor tags because of this thing right here okay so that's the basic reset next I want to move on to some base styles and we'll start with the body tag so the body right here is gonna have a background color and it's going to be this color right here so we can just use this variable so all I'm gonna do is say background is then going to be a variable and the way we use a variable is saying var and then in brackets whatever variable we want to use so double dash secondary like so it uses this value right here defined for a secondary so if I save this check this out now we get that background color awesome okay the next thing I want to do is say overflow in the X Direction is going to be hidden and the reason I'm doing that is because later on when we use this image over on the right up here I'm going to push it off the screen I don't want a user to be able to scroll and view that image okay so that will become more apparent while we're doing that later on for now let's move on to the next thing which is going to be for buttons so this right here in view my work is a button and we can see that because it has a button class if I can find it up here somewhere there we give this a class of button also down here at the forum we have a class of button as well so we're going to style up that class so let me say dots button and in here first of all I'm going to say the background is going to be not because by default down here we do have a background on this it's an import field we don't on this anchor tag but because we have an input field down here with the class of button and when I strip that background out as well so background on the is going to be two pixels it's going to be solid and the color is again going to be a very ball and this time - - and it's going to be primary so that's the yellow color we used so after that I'm going to say the color of the text inside the button is going to be a variable and it's also going to be primary so the color of the yellow again and then the padding of a button is going to be six pixels top and bottom and also 12 pixels left and right we also want a border radius which makes it more circular at the edges at the corners so we'll say border radius is going to be 20 pixels then after that I want to say text transform and that is going to be uppercase and then let's just see how this looks so far all right looking pretty good and looking pretty good up here as well I just want to do a couple more things I want to say the Box shadow just to give it a little drop shadow at the back is gonna be one pixels two pixels three pixels and then rgba and we use a right here to add an alpha channel at the end which means we can add a bit of a pass at it and the value inside here it's going to be zero zero zero which is black RGB and then the opacity is going to be not 0.6 all right so this is only going to be a subtle drop shadow but if I save it we can view that little drop shadow now right here okay all right so now we want to also display this as inline - block that's going to help us with styling that later on and adding some margin to it alright cool so that is the bottom class done I also want a hover effect so I'm gonna say button hover and in this case I want the color of the text to be a bit darker so no longer yellow - - - like a dark grey and the background this time is going to be a variable which is going to be the secondary or rather no the primary color again because that's the yellow color so save that and if we hover we can see we now get that style right here so this is the benefit of using variables by the way we can just use variables right here instead of outputting the same hex code over and over again then if we want to update the theme or the colors of our site in the future we just change that value once at the top and then it's going to automatically update everywhere else we don't have to change all these anymore so that's why we're using variables okay so we've done the buttons now I also want to style up the input fields down here because they're not really going to change that much as we go from a small screen to a large screen so let me say input and also text area which is this one right here this one so text area and input and inside here we're going to give this a background color so background and that is going to be RGB a again so we can add an alpha Channel 255 255 255 which is white then add some opacity naught point zero five so it's going to be a really faint white and we should see a lot of the blue from underneath the background poking through so it should be kind of like a blue similar to this background color but a bit lighter so if we save it we can see that right here and it almost looks the same okay so now I'm going to say padding is going to be ten pixels in the top and bottom direction and 16 pixels left and right border radius is going to be 20 pixels to make it softer at the corners as well looks like the button and the border itself is going to be 2 pixels solid and I'm going to use a hex code for this because but only going to use it probably once inside our CSS file and that is going to be 9 8 9 3 D 8 okay so if I save it and take a look that's looking a bit better all right so next I just want to do a color of the text if I type it at the minute it's probably going to be black yep it is I want to make it more of a kind of light gray when a user types into it so color is going to be F 2 F 2 F 2 alright so save that and you can see now it's looking a bit better so I think that's about it there all of our base core styles for this website so now we've started D things the buttons we've stripped away some of the default browser styles and also we've added these variables right here and by the way the reason I'm previewing this just in a small screen and I'm not doing this fullscreen like this is because remember we're using a mobile first approach so at the minute we're just concerned about making it look good on mobiles like this now in the next video I want to address the fonts and adding a custom font as well so we'll take a look at that next