7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 The CSS Explained

Welcome back. In this lesson, I'm gonna give you a quick tour of the CSS I wrote for this theme. And I'm not writing it again with you because it's not exactly related to the purpose of this course. So, I thought I would just show you what I've done, explain it as best as I can. And then, you can make your own changes to it if you want or just leave it like this. It's really up to you. So, I tried to write the most basic CSS I could for the framework so that it doesn't interfere too much with how different elements look like. And also it gives you the option to customize it later on to create your own CSS for your own themes and for that I used sass. And I have four folders here, base, layout, modules, and tools. Now this resembles the SMACSS approach on writing CSS. If you're familiar with SMACSS then you know what I'm talking about. If not, go ahead and check the lesson notes. I've included a link there. But basically, and I'm just going to open master.scss here. I'm doing the following things. First of all, I'm including compass. Compass is a CSS framework basically. It has a lot of mix-ins and functions you can use to write CSS for CSS3, for different positioning classes like floats, it has a bunch of stuff. Again if you don't know what its all about check video lesson notes. Then we have the tools folder and we have two CSS files here, site-settings and helpers. So let's go ahead and open these real quick. Site-settings basically represents a control panel for the styling of your theme. I've included a bunch of variables here that we can use for body text color, the links, some different colors that you might use, some information about the typography like the base font size, dynamically calculating the baselines, and then variables for the fonts that are being used. Next, we have some spacing variables for blog post, widget spacing, the spacing for the header. Everything is here. And then we have some more variables dedicated to buttons. For five buttons, variables for background and text color. And helpers. We have some WordPress required classes like align classes, sticky, and caption classes. And notice there's not much styling done to these. It's just the very basic. Okay, next, in master.scss is the base. Now, the base folder contains all of the default classes. First of all, it contains a version of Bootstrap, currently v3.1.1. It has all the classes including normalize.css which is a reset CSS file. So even if you want to start using a different framework, well it's very simple. Simply replace the contents of this file and rename the file. And you've got yourselves the CSS from another framework. Next on base.scss, I have some default styles for a few elements like the body, setting the color for the text, setting the fonts. Then setting some margins for the paragraphs and for the headings. And as you can see, most of these styles are blank, so you can fill them in. Whenever you want styles for links, block quotes, objects here. And also some classes for responsive images. And as you can see here it says extend.img-responsive. Now .img-responsive is a class from Bootstrap. And by using sass, I can apply that class to all of these elements. Which is pretty cool. Next I have the forms.scss where again, just some default styling for the form to get them to show properly. And then we have the layout folder. Now. Layout, let's start with this, the header. It has all the classes used in the header, then the footer, again, has classes used in the footer, with some default margins applied to them. Then it's the main main.scss file, which contains stuff from the main content, the posts, the container-404. Basically, all the classes that were being used in the HTML layouts on the pages are here, nested. All you gotta do is style them yourself. Next is the nav, which contains styles to create a working navigation menu. Including if you wanna create a responsive dropdown, you have some example styles here. And finally, it's the sidebar where I have some general styles for the sidebar and also for the footer-sidebar. Now finally, in here we have modules. And in modules we can put anything from buttons to tables to whatever you're using basically. But I just included the widget here because that's the only module I'm currently using. So we have some margin bottom here. Some styles for the list and also targeting this widget specifically. And then, at the very end, we have the Ie8 styles, which is a separate style sheet here, and if your targeting for Ie8, then you can write your own styles here. And if you remember from header.php, this IE8 class is a applied to the HTML so as you can see here if IE8 then we have html with the class of IE8. So whatever you put in there will only affect IE8. Okay, so as I said this is a saas project so there's also a config.rb file. If you're using sass or if you're using CodeKit for example, to compile your sass files, then you're also going to need this bit. And after everything inside master.scss is loaded and compiled, inside the CSS folder, there is a master.css file. Now, this will be loaded to apply all of these styles to the current page that we're working on. And I'm gonna do that, along with some finishing touches, in the next lesson,

Back to the top