1. Let's go ahead and jump back to the theme directory and let's close up zen and take a look at basic. Basic is a natural follow up since it's a zen offshoot. And in basic we have a css folder. Let's go ahead and expand that.

2. Basic is interesting because it uses a css preprocessor called sass and we'll cover css preprocessors in a later video. But basically it allows you to perform some limited logic inside of your css file and you can do things like use variables. So for example, if you have a color that you want to reuse throughout your style sheet, you can define it as a variable and then reuse that variable, so you'll only have to change the color once if you want to change the color.

3. So basic comes with a css folder but it also comes with a sass folder and this is the unprocessed css files. And then the css folder contains the output. So you don't need the sass processor in order to run this theme.

4. So you can tell that we've simplified things a lot in moving from zen. We have just a few style sheets. We have default which is interesting.

5. We haven't seen that one before. We'll take a look at that. Ie6 and ie7.

6. We have layout, print and style which we've all seen before and we've seen the tabs as well which are specific to the tabs of the theme. Let's go ahead and open up default dot css since it's a little different than the others. So this says that default is meant to establish general rules, do a browser reset.

7. So it's the same as the reset dot css that we see in other places. So you can find more reset options here, but this is a sort of a simplified version. You see in this file there are a few common sense to the source of where particular styling strategies are coming from.

8. For example, this clearly floats without structural markup. It's coming from this url and then explains the following styles. Each style also has some comments above it that explain where the style comes from in the sass source code.

9. So if we take a look at the sass source code, let's go ahead and open it up. I'm going to jump back to the directory and open up the sass folder and then I'm going to open up default dot sass. I'm just going to drag it over to my editor.

10. You see here if I scroll up to the top that we have a connection between this Clear Floats Without Structural Markup here and then we have the actual styling that's occurring. And this is at line 16 and if we jump back to the default dot css folder or file, you'll see this clearfix right here and it's referenced at line 16 in sass slash default dot sass. So if you want to learn a little bit more about how sass structures css, you can flip back and forth and take a look.

11. Okay. I'm going to jump back to the file structure here. I'm going to go ahead and minimize basic here and let's go ahead and take a look at fusion.

12. I'm going to open up the fusion core directory which is the base theme for fusion. Fusion encourages sub-theming so you would normally use fusion core as the base theme and then extend it and there's an example starter kit or sub-theme that's included with this folder. So this style sheet structure is a little unique.

13. We see some grid12, grid 16's here and these line up with two types of grid systems. Now you'll see some themes that have good systems, and the general idea of them and we'll go into these in future videos, is that you can cut up a page into blocks. And if you do that and you're consistent about it, it makes it a lot easier for themers to decide where to put things because they have limited options and because everything fits together in a particular way.

14. There's two basic structures for a good system. One, is the 12 column and the other is the 16 column. And so you see here we've got a 12 column, 960 which means it's 960 pixels wide.

15. And then we have a 16 column which is also 960 pixels wide. So if we open these up, let's go ahead and open up grid 12. We see that there's a specific styling for each grid column and this content is all geared towards this specific grid system.

16. I'm going to jump back to the directory here. Let's go ahead and work down a little further. We have ie6 fixes right to left, ie6 fixes.

17. So this is a different sort of naming convention for ie we saw, fix dash ie and we saw just ie. And this is ie, the number of the version and fixes and it goes all the way up to 8 for fusion. We see style and style right to left.

18. We've seen those before. And then superfish which is a task oriented style sheet that has to do with dropdown menus. We see a few of these specific to different areas of the page.

19. And then finally we have typography which is the first time we've seen this style sheet. Let's go ahead and open it up and see what's inside. So you would assume that this has to do with the fonts, the font sizes, the font families that are inside of the theme.

20. And as we look through here. I'm going to scroll up to the top. It starts out with the body tag and it defines a font family, font size and line height.

21. So this should apply cascading all the way down through all of the elements, and then we're going specifically to form text as well. It defines sizes for the headings, various headings, as we scroll down, it separates this style sheet out in terms of what these font stylings apply to. This is the node section.

22. And we see a common section below that. And if you look the properties there, it's property narrow. The range that this particular style sheet covers.

23. We've seen font size, line height and font family. And as we scroll down we'll just see more of the same for various elements. I'm just going to keep scrolling.

24. And down at the bottom, we have some font sizes and then we have various definitions for font families that can used as different theme settings for fusion. So we can set it to Arial, Verdana, Garamond and so on.