Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Filling in framework gaps

From: CSS: Frameworks and Grids

Video: Filling in framework gaps

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.

Filling in framework gaps

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.

For example, if I go into the HTML and see, well, what does the HTML in this page actually look like? You'll notice that there is a span right there for a custom radio checked. Now I didn't put that there, you didn't put that there, and if I go back to the source code and I actually look in my forms, I don't see that there, so what's happening is dynamically at runtime the framework is using JavaScript to go in and replace these input types with the span tags that have the graphic in them that they want. So we could style those input types all day long until the cows come home, add as much margin to them as we want and nothing is going to happen between the relationship between that label and that, and sometimes you really do have to dig within the guts of a framework and dig into the behaviors of it and find out what's really going on with the framework in order to sort of fill some of those framework gaps.

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.

Show transcript

This video is part of

Image for CSS: Frameworks and Grids
CSS: Frameworks and Grids

30 video lessons · 13844 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Frameworks and Grids.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.