4.4 CSS: The Grid, Fonts and Reset Files
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
4.4 CSS: The Grid, Fonts and Reset Files
Hey, welcome back. In the previous lessons, I wrote the HTML for our portfolio theme and this is what we got so far. As you can see, it has the browser default styling. So that's no good. If we wanted make it look like this, like our PSD, then we need to apply some CSS to it. But first things first in this lesson, I'll do some preparation. Meaning, I'll load some fonts, I'll load a grid and layout the initial CSS structure. I'm gonna start with the custom fonts that we're using. The first one is Robot, so I'm gonna search this in Google. And for this, I'm just going to grab two sizes. I'll click on the Quick Use. I'll grab the Light 300 and the Bold 700 and this is the link that I gotta put in my HTML. So, I'm gonna put it right here. And I'm gonna say, Google Fonts. The second font is Open Sans. Quick Use. Now for this one, I'll grab the Normal, Normal Italic, Bold and Bold Italic. And get the link and I'm going to paste it right here. Now, on these links you can remove type text/css, cuz it's no longer necessary. So, I'll do that right now. As you can see, our page hasn't changed, because we've gotta take those fonts and apply them to various elements, but I'll do that later on. So that's it for Google Fonts. Next, we're using Font Awesome to display the icons. So let's go ahead and load that. I'll go to the website and get started and you get this link here that you simply copy. FontAwesome, paste it in. Make sure you add http in front and you're good to go. So let's do a quick refresh on our theme. And notice we have a couple of extra icons. These are the slider navigation buttons. And if we scroll further down, we have the envelope icon and the Twitter and Facebook icons. So that works. Now the last thing I need to load here is the grid system. Now, I am using the Bootstrap Grid System and you can go ahead and use all of the components inside Bootstrap. But personally, I like to only use the grid, because it's a great grid system and do the rest of the styling myself. So click on Customize. [BLANK_AUDIO] Hit this little button here. Choose grid system and make sure you choose basic utilities and responsive utilities. Scroll further down. Toggle all. Go to Download. Compile and Download. And this will give you, an archive containing the files that you need. Now, I already downloaded those. They're in the bootstrap.zip, so let me just open this. From here, go to the CSS folder and grab the minified or the normal boostrap.css. I'm just gonna grab the normal, so I can show you what's inside. Go back. I'll creating a folder here called CSS. I'll paste this in. And now, I can go ahead and remove my zip and my Bootstrap folder. So, let's see what we got. Inside the CSS, this is the bootstrap.css file and I'll rename this to grid.css. Now, apart from the grid Bootstrap also includes the normalized CSS file. And this is a reset file, I've talked about it in the beginner's course. Basically, it allows you to start with a clean slate by resetting some of the browser's default styles. So, once this is over, you can see that the grid classes are next with the media queries, with the container, the columns and so on. All the way down, it's a really a really big CSS file. So, once you do that, I'm gonna do a link here. Stylesheet, href is gonna be css/grid.css. And then I'm gonna include styles.css, which is not created yet, but I'll get there in a bit. So now, if we refresh our page, we now have columns the text look, looks different, the whole page looks more organized and that's because the grid is working. And notice my content is now centered inside the grid. So, it's a really good start. Now, on to the stylesheets, I'm using styles.css. But I also want to use less to write my CSS files. So what I'll do is create a new file inside my CSS and then inside my less folder called styles.less. And in here, I'm just gonna say Main stylesheet and I'll load a couple of partial files. So this is how I'm gonna breakdown the entire stylesheet. So first of all, I'm gonna load the variables. So, I'm gonna have a less file, which will contain all of the less variables for color, for fonts and so on. So, I'm gonna say here, import variables.less. Next up, I'm going to load the typography styles and I'll fill these in as we go along and then I'm gonna load the section styles for header, the banner, the footer and so on. And finally, I'm gonna load the responsive rules. Okay. Now, I'm gonna create the variables file inside my less folder. Now, I have added this project into Code Kit, it's right here. And this will compile the styles.less into styles.css. So whenever I save styles.less or any other less file that it loads, the CSS file will be compiled. Okay. So, I'm gonna stop right here with this lesson. Next time, the variables.