Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding boilerplates, grids, and frameworks
- Choosing a framework
- Building your own framework
- Crafting a deployment strategy
- Modifying files
- Customizing typography and color
- Filling in framework gaps
- Exploring grid-based syntax
- Nesting grids
- Using mobile grids
Skill Level Beginner
No matter how comprehensive a framework is, it is impossible for a framework to anticipate every single styling need that you are going to have. In addition to the styles that are unique to your own designs, you are bound to find small gaps here and there in the framework that don't quite function the way that you want them to. And so to address how you fill those gaps, we're going to take a look at the about.html page-- preview this page in my browser. I can see that there are a few things aside from the layout that aren't quite looking the way that I want them to, and I'm going to start right up here.
So we're filling an address in our search field. It just isn't displaying in the navigation the way I want it to. I don't need the label right here--the search symbol primate--I don't need that to show up. That's just for accessibility purposes. So first things first, I have got to get rid of that. The second thing is I want to make sure that the text input and the submit button for the Search form are displaying in an in-line fashion, right beside each other rather than stacking vertically the way they are right now. Now a lot of times it means that you have to dig inside the code of the framework itself so you can see how these things are being styled and structured, and that's certainly the case here.
If I go over to my foundation.css, and you can find that file in the _css foundation.css, that's where it's located. I'm going to scroll down, and I'm just going to take you right to that spot, because it's a long way down, and it would take you a while to find this on your own. It certainly took me a while to find it. But if I go to line 2818 for me, yours might be a little different because I have applied some source formatting to make this code a little prettier. Yours might still be kind of minified. So if your code editor has the ability to expand that out and apply a little bit of source formatting to it, go ahead and do that. If not, you can still find this.
It's probably just not quite as far down. So what we're looking for right here, you'll notice that we have a style inside of our top bar navigation that finds any list item with the class of search applied to it and targets directly the input type. So we have got some radiuses here, we have a float left font size, but none of the stuff is really working. So one of the things that I have to look at is what's going on? Why isn't this working? And the problem is that right now for the search form we have a width of 200 pixels applied for that. So it's not enough room for the label, the form element, and the button to all show up.
So even though the input button is being told to float to left, it simply can't because there's not just enough room for it. So the very first thing I want to do is I want to hide the search form. I want to get rid of that. Then I need to increase the space available for my search form and then modify the input just a little bit to take away some of its padding, for example. I'm not going to do that here in the Foundation. Remember, our strategy is to override things within the custom styles. So I'm going to switch over to my customs.css file. Again, you can find that in the _CSS directory, and I'm going to scroll down into my form styles to make sure that I'm staying organized.
So the first thing we're going to do is hide the search form label, and to do that I'm going to write a fairly specific selector here, so top-bar space ul and then child combinator, so the little greater-than symbol and then li.search space form space label. Do we need that specific selector? No, we don't. But I'm basing this off of the Foundation styles. I want to make sure that if there's any conflict with them or any collisions of styles that I have a specific enough selector to override it and win.
So I don't think this is being addressed. I'm probably going to take a little bit of a performance hit on the specificity of the selector, but in this case to me that trade off is worth it. So the first thing I'm going to do is do a position attribute. So, I am going to do a position of absolute and then I'm going to do a left offset of -9000 pixels. If you're wondering about hiding this, why didn't I do display none? Well, I wanted to stay accessible, I wanted screen readers to still read it, that's all the point of having a label here, and why didn't I use text indent? Well, because I want the entire in-line box to be gone.
I don't want anything to be occupying that space, even a placeholder. So I save this, go back into my browser, and refresh, I can see that now, that label goes upon and my remaining search elements are now pulled up into the navigation bar. So, so far so good. So the next thing I'm going to do is create a another selector just below that, and it's going to be again very similar to this top-bar ul childcombinator > li.search forms. So this time, exact same selector just without the label.
So this is going to be targeting the entire form, and here I'm going to say width, and I'm going to make that equal 250 pixels. Right off the bat, that's really not going to do anything for me because remember by default in the Foundation framework those form elements are going to stretch to 100% of whatever their parent is. So it's doesn't really matter how wide I make this. That input text field would always stretch to its width. So a little bit later on, I'm going to have to address that, too, if I want those two elements to appear side by side. Now the next thing I'm going to do is I'm just going to remove a little bit of padding from the search box itself. So again, top-bar ul > li.search.
So a little less specific because I'm just targeting that list item there, and I'm just going to take away a little bit of padding from the right-hand side. I can do this in a couple of different ways. I can do 0015 pixels, which is only going to give me 15 pixels worth of the padding on the left-hand side, the default or the way that it was styled inside the Foundation framework was 15 pixels on both sides, so now I'm just applying to the left only. I could have also said padding right equal 0, and that would have been fine. So if I save this and go back into my browser and preview it, there isn't going to be a huge change other than the fact that now we're little bit wider here, we don't have the padding over on the side. So it's butting right against the edge.
I know this doesn't look great, but bear with me because there's few more changes we need to make. And this is one of the things that I'm talking about when I'm talking bout gaps within a framework. They told any of the input fields to go ahead and float to the left, but the problem is because the input fields width is explicitly given at 100%, it's going to fill up its parent container and nothing is really going to appear to the right or to the left of it, regardless of what your particular float property is. That's a little gap in the framework that you're going to have to address if you want to use this type of functionality.
And every framework is going to have little tiny gaps like that. Next off, bear with me, we need to do some target styling here. We need to style the search form input and the button in a way that enables us to do that floating and maybe change up the styling a little bit. In order to do that, we're going to have to write a fairly complex selector. Now if I go back over to the foundation.css, I'm going to show you the basis of this and kind of where I found the selector. If I scroll all the way up--for me it's about line 400, for you it might be something slightly different-- you can see that I have a lot of different input types here that are being styled, and one of them is input search.
So a lot of the default styling that's applying to my form right now is happening due to these styles. Now I can certainly copy and paste these styles and modify a little bit, but I want to go over these as I do them. So this selector is going to take us a little bit longer to write. I just wanted to go ahead and prepare you for that right up front. Now, I'm going to continue to make these selectors as specific as they need to be. So there's sort of path that we're using here, using the child combinator selector, I'm going to keep doing that, so copying and pasting would not be out of the realm of possibility if you wanted to keep from typing all these things.
So again, we're going to do top-bar.top-bar ul and then the child combinator the greater-than symbol than li.search space form, space input, and then we're going to do a type attribute on the input type=search and then I'm going to open and close my brackets. So again, think about how specific we're being here. We're saying, hey, only the inputs that have the type of search inside this particular form do we want to style. I'm going to have a lot of styling going on here.
First thing we can do is we are going to eliminate the rounding, so I'm going to do mozilla-border-radius, and I'm going to do 0, then I'm going to do -webkit or -radius 0, and then I'm just going to finally do border radius 0. Now in the current versions of WebKit-based browsers, border radius is on prefix, you don't need it, but you do need it for older browsers. So a lot of times when you delve in to a framework stylesheet, you might find styles that are maybe a little bit more complex than you need them to be, but remember the framework is trying to support a lot of browsers, including older ones.
So a lot of times you're going to see styles that are written that way, and I'm just going to keep them that way as far as that goes. All right, the next thing I am going to do is we'll do a float to the left. So I want to make sure it's floating to the left. I'm going to change its font-size to 16 pixels, I'm going to set a margin-top 0, I'm going to give it a height of 25 pixels. So again, I'm being very specific about how this particular input fill should look. I'm also going to give it a width of 60%, and that's going to override my default form styling so that the width is not 100%, it's now 60%, and that's going to give the submit button enough room to actually appear beside it and then finally, I'm going to give it a margin-right of 3 pixels.
So I know that's a lot going on there, but we still also need to style input button. And what I'm going to do is rather than writing this all out again, I'm going to take the selector and copy it and then below this, I'm going to paste it and then I'm going to add a plus button. And basically, what this selector does for us is it says anytime you find a button-- I need to make sure that's the class button. So, Plus .button. So this basically is saying that hey, any time you have an element with a class of button applied to it, and that appears directly after this input text field, so let's style it this way.
So again, we're being very, very specific, we're making sure that we override any of the styles that are in the Foundation framework. So here, we're going to do again, something very, very similar. I'm first going to turn the border off, so I'm going to turn border-left to 0. So that's going to not put a border between the button and the input text field. It's pretty handy if you want to make the two butt up against each other. We're going to give him a little bit of space just so we can see a little bit of the background behind them, but if they were going to be butting right up against each other, that's sort of a nice and easy way to do that. I am going to do the same thing with our border radius. I'm going to do mozilla-border-radius 0, webkit-border-radius 0, and a border-radius of 0.
Some of you are probably a way ahead of me and realize that you could copy and paste all that from the previous one, you certainly could. I'm also going to float it to the left. I'm going to give it a font-size, a little bit smaller, 12 pixels. We're going to do a margin-top for this one of -1 pixels, and I'll talk a little bit more about that in just a minute. We're going to give it a padding of 5 pixels top, 12 pixels right and left, 4 pixels bottom, and then finally, we're going to give it a width of 20%.
So remember, this sort of space that we have defined for ourselves in a form at 250 pixels, 60% of that is going to be taken up by the search input text field, 20% by the butt itself. So again, I'm being really, really specific. A margin-top is basically more than anything else to help those two line up, and I'll be asked if it was just trial and error in a lot of different browsers. Getting that consistency is sometimes very, very difficult. So if I save this, go back in to my browser and Refresh. There we go, we now have our search input text field and we have the go button beside it. You can say a little of the place order text is going flipped off here, and the easy way to deal with that would be go ahead and adjust the height of that and make it the height that you need it to.
I always like testing things out more than one browser. So if I look at this in Firefox, too, I can see that my search buttons are right beside each other. If I look at it in, say, Internet Explorer, I can see they're right beside each other but that the button itself isn't quite the right size. So there are a couple of different ways that I could deal with that. I could keep manipulating the height of these two elements and try to give them a little bit closer, or I can realize that maintaining consistency from browser to browser is going to be a little bit difficult as far as getting those heights to match up, and it's one of those things where it's like is it really going to be that important from one browser to another? Those are all judgment calls that you have to make as a designer.
We're almost finished, but we're not quite done yet. One more thing that I want to do. If I scroll down into my form, I can see that these radio buttons are showing up right beside their label, and when I say right beside, I mean right beside their label. So I would really like to space this out a little bit more, and again, that type of styling is not done within the framework itself. So it's up to me to tackle that and add that. Sometimes it's really easy to do, and sometimes it's not so easy to do. For example, here it's really easy for me to say, okay, I have got this label, and I have got the input button and the input or the radio button itself in the source order is appearing just to the left of the text web design.
So it would make sense that if you'll apply a little bit of a right margin to this, that you would get that spacing. So let's check it out and see if that actually works. So if I go back into my CSS, and I make sure I'm looking at my form styles, I'm going to come in just after that, and I'm just going to do an attribute selector, that says, input type="radio", so I'm making sure that I'm only targeting the radio buttons themselves, and I'm just going to do a very quick margin right, 10 pixels and then I'm going to save that.
Now if I preview this in my browser and refresh my page, nothing happens. I get no extra space whatsoever. And it's these types of little gaps within the framework that can drive you crazy, because if you go through the Foundation framework, and you look for any type of spacing, with labels and form elements and things like that, you won't find anything that would drive this. So that might really, really make you go crazy if you can't figure out exactly why this is happening. Now one of the nice things about modern browsers is they allow us to inspect elements and really see what's going on behind the scene. I'm in Firefox ,really whatever browser you're working on, whether it be Opera or Chrome or Internet Explorer, they also have this functionality.
I'm just going to right-click one of these labels, and I'm just going to say, hey, I want you to inspect that element for me. Now there are a couple of things that you can do when you're using tools like if you have Firebug installed and you are using that or web inspector or Opera's dragonfly, is that it allows you to kind of see behind the scenes and what's happening. Well, remember, this is a framework that has a lot of functionality sort of baked into it. One of the things that has baked into it is the ability to create custom forms. So we went to form, and we applied the class of custom to it, and it gave us these radio buttons. But a lot of stuff is happening behind the scenes there that you didn't necessarily see.
So now all I have to do is go back into my custom.css and change the selector. So instead of this input type="radio", all I have to do is change it to that span-custom, and I got that selector by looking right here, the span class="custom. So that's all I really need it to do. So if I save this, go back into my browser, let me close this and refresh that, now the margin is taking effect. Keep in mind, frameworks are great, they usually do a really good job of anticipating what your needs are and having some styling options for them, but don't be surprised to run into small little gaps and framework styling from time to time, and you should have a strategy already in place for dealing with them in both the short and the long term of working with your site.