Structuring pages for frameworks
Video: Structuring pages for frameworksWhen I first started experimenting with CSS frameworks, I was under the naive impression that all I needed to do was author clean semantic HTML, pick a framework, attach its stylesheets and be on my way to designer nirvana. Unfortunately, that is not the way that frameworks work. Because of framework has so many variables to control, much of the styling and functionality is tied up not only in class attributes, but often involves the actual structure of the HTML itself. This means that you're going to find yourself often needing to structure the content based on a framework's requirement and not on your own coding standards.
- Additional resources
Viewers: in countries Watching now:
Have you wondered if using a CSS framework will speed up your site development? In this course, senior author James Williamson introduces the types of frameworks available—including the most popular choices among working web developers—and provides an honest assessment of the pros and cons to using a framework. He guides you through downloading a framework, setting up a directory structure, and building a framework-based site, such as structuring the HTML and working with forms. A separate chapter explores layout grids, often included with CSS frameworks, which provide a simple system for laying out page content.
- 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
Structuring pages for frameworks
When I first started experimenting with CSS frameworks, I was under the naive impression that all I needed to do was author clean semantic HTML, pick a framework, attach its stylesheets and be on my way to designer nirvana. Unfortunately, that is not the way that frameworks work. Because of framework has so many variables to control, much of the styling and functionality is tied up not only in class attributes, but often involves the actual structure of the HTML itself. This means that you're going to find yourself often needing to structure the content based on a framework's requirement and not on your own coding standards.
So to illustrate that, we're going to be working on the navigation bar of our Simple Primate site. So I am just going to preview the top menu in the Simple Primate site here in our code. You can see that it's a very simple navigation element, it has an unordered list inside of it that includes all of our menu links and then we have a search form that comes right after that, so it's pretty basic. Now the way that I want this to be styled is to look like this, I want the navigation bar up top, I want nice hovers over this, I want the search bar on the right-hand side, and I also want this to be responsive.
So if I shrink the size, for example, the navigation is going to hide itself and allow the users to toggle it on and off for smaller screens. This is the way that Foundation is set up. If you go just to the Foundation's documentation site, that's actually built on Foundation, you can see their nav bar is very similar to this. I didn't just sort of design this in a vacuum, I designed it in a way that made it very similar to the way that Foundation's framework is already built, so I want to take advantage of that. However, if I take the page that I just showed you, the one with this nice clean navigation, I have structured menus like this a hundred times, if I take this, attach the to framework stylesheet to it and preview it, this is what I get.
I don't get that nice really cool looking nav bar up top. Now at this point, you could throw your hands up in the air and be really frustrated and begin to style it yourself, or you could take a deeper look at the framework and see exactly what is required to get this kind of navigation bar. To do that I am at the Foundation 3's documentation site, and I spent a lot of time in working on this course within this site. So when you're looking at a framework one of the things that you want to look for is how much documentation does that framework have, is it very thorough, are you going to have to spend a lot of time looking through the framework's actual code to determine what's going on, or are you going to have some documentation like this? If I look at the navigation documentation I can see that it has a special section here for the top bar itself.
In addition to talking a little bit about the bar, it actually gives you example code. So if you don't feel like building one from scratch, you can just go ahead and copy and paste their code and start working with your own content, which is really nice. So if you want to build this yourself without copying and pasting their code, you're going to need to read through some of the documentation. So here we have some information about the Basic Needs, we have some information about Positioning the Bar. And notice that in this Positioning the Bar section there is a little sentence here that says The top bar is built with a single nav element with a class of top bar.
Well, that's pretty simple to do, so I am going to go back into my code, I am going to go up to my navigation which has the role of navigation, and I am just going to add a class attribute to that, and I am going to give it that top bar class that it talked about. So if I save this, go back into my browser and Refresh, I can see that just that one change made a huge difference to my navigation. Now it looks more like what I was wanting. All my links are up here, they are formatted the way that they want. The search field isn't quite working, notice the label is also over here on the left-hand side and then the search field itself and the input button is sort of stacked down below that so that's something we're still going to have to deal with.
If I collapse this to see if the responsiveness is baked into it, it's not right now. I get one link on here, but I don't get that toggle that I am looking for as well. So going back to the documentation, I can kind of see where that toggling comes from. Notice that it has a list item with toggle top bar class applied, it's going to expand the menu in a responsive layout. Now I can leave off the class of name as long as I include that toggle-topbar element. So to get a closer picture of what they are looking at, I can just sort of look through this code again.
so notice that we have a nav with a class of top-bar and then we have an unordered list inside of it that's not part of our main navigation, and this one has that toggle-topbar link to it, and also has a title. Now the title is what you see here showing up on the very top of the actual navigation bar. And you'll notice in my finished version of that I don't really have a title, so I don't need that per se. But I am going to have to modify this in a way to make it work the way that I want to make it work. So I am going to go back into my code, and I am going to create another unordered list at the top of the nav.
Now inside this I am going to put two list items, in the first list item I am just going to have the text menu. The second list item, I am going top have a link that really just kind of goes nowhere, I am just going to add an octothorpe to the link itself and through scripting they are going to add that toggling functionality. So it's a very simple unordered list, but it's going to give me a lot of functionality involved with sort of collapsing the menu for responsive layouts. So the menu, that's just text that's just going to show up when the menu collapses to indicate to somebody on a smartphone or a tablet that this is indeed a menu.
To do that I am going to give this a class and the class I am going to use here is show-for-small, so show-for-small. That's a class that's baked in the Foundation, it's already there. And what that does for you is it allows you to have an element on the page that's invisible or doesn't show up for larger sites, but for smaller screens does show up, which is really nice. So I am going to go ahead and take advantage of that. And then I am also going to apply a class of menu to that. Now, that's not building into the Foundation framework, that's me deciding that I want that word menu to apply. I know I am going to have to do probably some corrective styling to it so I just created a class that's going to allow me to do that.
This is going to toggle it on and off for smaller screens, and this is going to allow me to actually style this. The next thing I need to do is the list item that has the link in that, I also need to apply the class for it, it's going to toggle it for responsive design. So what we can do, toggle-topbar, and that's going to build in the functionality of expanding that top bar on smaller screens. So now if I save this, go back to my page and Refresh it, you'll notice that if I shrink the page size down, now that we have the toggling showing up. Now the word menu doesn't show up. If I hover over this you can kind of see it over here, but I haven't finished styling the menu class that I created either so that's going to allow me to do that once I get back in working on my custom styles.
Well, I am almost done, the only other thing that I have to worry about here is that the search form isn't looking the way that it's supposed to. If I go back into the Foundation documentation, and I scroll down a little bit, I can see that it has a little section here about Other Elements. So talks about, we can use a small Foundation button in the nav just include a has button as a class for its parent list item, and I can include two different type of inputs, search and text, if I am going to use those, add a class of search to the parent. So they don't really have too many good examples of that, but if I look at the actual code itself and scroll down a little bit, I can see that they do have a little section here with search and they have several different flavors of it.
So I can kind of take from this what I need and customize it for what I'm looking for. So if I go back into my code, I can see that the first thing I am going to need to do is wrap the form in an unordered list. So I am going to go ahead and do that and then I am going to wrap the form itself as well inside of a list item. So that is the two things I needed to do in order to get that to be positioned the way that I need. One of the things I want is I want the search form to show up on the right-hand side so that parent unordered list is going to have a class applied to it of right.
Now that's built into Foundation, and that's based on the example that I was looking at earlier in their documentation. Now if I save this and go back into my page and refresh this, I can see that that does have the desired effect of moving the search over to the right-hand side. It doesn't fix that stacking order, in fact we're going to have to fix that later manually, but it does at least move it over on that side. Now the next thing I need to do is I need to indicate to Foundation that this is indeed a search field, and that it has a button applied to it. so inside the list item I am going to add a class of search and has-button.
So I am going to add both of those classes to the parent list item. Speaking of buttons I want to take the submit button itself and customize it. Now there are a lot of classes in Foundation that are built into it that allow me to do that. In fact, if I go into the documentation, and I go up to buttons, it's pretty easy for me to look at these different buttons and then figure out exactly which classes to apply to get the one that I am looking for. So going back into my code, I am going to go into this input type, an addition to the submit class that I have applied to this, I am going to apply the secondary radius button in small classes.
So those are all separate classes, second radius button and small. And again, I chose those because I went into the documentation, I found the button that I wanted, looked at all the classes that are applied and figured out exactly which classes I would need to get the same styling on my button. So if I save this, go back into my page and Refresh it, I can see that we have a little bit more space now for the search field, that's because we applied the class of search to the list item and then we have the nice button styling here that we're going to need to modify a little further on ourselves.
I agree with you, our top level navigation bar doesn't look exactly the way that we want it to yet, but the basics are right there. Now if I didn't insist on adding this label right here for the search field--and frankly as far as I'm concerned I am not really going to compromise on accessibility when it comes to frameworks--then we'd be a lot closer and only the submit button and the input field would really need to be positioned. They'd still be stacking on top of each other, but at least the label wouldn't be there. However, what I really want you to think about and what this exercise represents more than anything else is how frequently you're going to need to re-examine how you'd typically structure elements against how the framework wants to structure elements.
In some cases you'll find that the framework's structural needs are just really simple and unobtrusive, in those cases it will probably be pretty easy for you to adopt the framework's way of structuring content. However, in other cases, you're not going to want to compromise, which means that you're going to need to overwrite or modify those default styles to achieve the desired results. Now in some cases, such as the top navigation bar here, even the default structure might not get you exactly the results you need, take a look at our search field, for example. So be prepared to still have some work ahead of you after the framework has taken you as far as it can go, regardless of which framework that you choose.
There are currently no FAQs about CSS: Frameworks and Grids.