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

Structuring pages for frameworks

From: CSS: Frameworks and Grids

Video: 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.

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.

Show transcript

This video is part of

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

30 video lessons · 13406 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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.