Join Jen Kramer for an in-depth discussion in this video Adjusting space between the top photo and right column, part of Foundation 4: Incorporating Sass and Compass.
At this point, you should have a pretty good handle on working with foundations and its _settings.scss file. And really all that _settings.scss file was just a bunch of variables. We've been changing lots and lots of variables. We've wound up with a site that is looking much more customized than it was before but in the end. Really, we've just changed a bunch of variables. You don't have to know a whole lot of SAS to make those kinds of changes to this website. I hope you haven't found it terribly intimidating, because this is really the best way to customize the way Foundation looks.
But there's a lot more that you can be doing with SAS. And so in this chapter, I'm going to get into some more of that funky styling. And some of the more advanced concepts that are here inside of Foundation. So the first thing I want to start with is still here on the services page and this panel. Now you graphic designers, I am sure that one of the things that's bothering you about this design from the beginning is that the spacing between this top row with the logo and the picture of the animals. And what comes underneath with this panel and services and stuff.
You know, it doesn't line up and it just looks ugly doesn't it? And the reason that this is all lined up this way of course is that, foundation has the grid system in place. So we have a row that has the logo, and the picture of the animals and then we have another row that has the services text in the panel and so that's where things are aligning. What we really need though is we probably want that panel to push down so that it's aligned maybe with the top of the picture there. So we have a nice clean line there on the site. Rather than having this panel push all the way up to the top underneath of the animals.
So one solution to this problem would be, we could change the grid system. So that the heading was its own row, which would be 12 columns wide. And then the body copy would start in a row underneath of that heading. And the panel could be in the column next to that body copy. So that would add a bit of extra HTML to our page and the headings really associated with the body copy underneath. The right column is coded as the side in the HTML if you take a look at it. Because the sides are supposed to be optional types of things. They enhance the meaning of the page, but they're not central to it.
If you want to know more about this HTML five tags and their semantic meanings, you can always go and watch my course on that. So the content that's here in the aside really has nothing to do with the big heading over there on the left side of the page. So it's probably not the best symantic approach although it might produce the look that we're looking for. So another solution that we could approach would be just add a bit of padding on top of the right column. Really that's all we need to do to push that panel down. And it's so much easier than trying to hack Foundations grid system.
So, well why don't we just go ahead and do that? All we need to do is add that padding and we should just write a style that does that thing. And then add that style to the column. Sometimes that simple approach is really just the best way to go. So, if you want to do something with SAS in that column, you totally can. But it seems to me its just going to take a long time without necessarily a lot of return for that particular work. So, what I'm going to do then is, I going to go back to my Sublime Text. And we are going to go to custom.scss here. And I'm going to add a style to this. I'm going to call this a class of topspace.
And I'm going to put in a style called padding-top. And, I have already calculated this. And it's about a 66 pixel difference that I need from the top of the screen on down to where the text starts. But, of course you know this is responsive design. We don't want to use pixels. But guess what? We can totally use that emCalc thing. So, do you remember emCalc from earlier? This is the little function that will take a number that I put here inside of the function and will convert it to m's? Well, I'm going to go ahead and use it right here.
So I'm going to say emCalc of 68. That's the magic number that I found that will push this panel to the right position. So I'm going to go ahead and save that. So that's my style. Now what I need to do is open up the services page. I'm going to scroll on down here to my little panel here. And I'm going to go ahead and apply this style. So large four columns and I'm also going to add to this top space. There's another class. Then I'm just going to go ahead and save that and if I refresh my web page, there.
My panel is pushed down nicely there and, things seem to be aligning pretty well across the top of the page. So I can repeat that process again for the gallery page or the dogs page, I should say. Which also has a panel around the side. I'm just going to add that class here as well and that will be the top space. Go ahead and save that and, if I switch over to that dog's page, now that panel is aligning nicely with the top of the photo gallery as well.
So the point of all this is, just because you can do wild and crazy things with SAS, doesn't necessarily mean it's the right solution. Sometimes the right solution is just to write a simple little CSS style and just let it go at that.
- Installing Ruby, Sass, Compass, and the Foundation gem
- Starting a new project
- Compiling Sass files
- Changing variables with _settings.scss
- Working with Google Fonts and Sass
- Styling the nav bar
- Adjusting spacing between elements
- Styling panel links
- Creating a custom button with mixins