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

Exploring framework functionality

From: CSS: Frameworks and Grids

Video: Exploring framework functionality

When researching frameworks, exploring a framework's functionality is obviously going to be a large part of your focus. However, depending upon what type of framework that you choose, you might not be able to fully explore its functionality when you're making your choice. In a perfect world, you'd have all the time you need to download and experiment before you make a decision. However, in the real world you are often going to have to make a decision based on the framework's popularity or the recommendation of others. Still, not properly exploring a framework's capabilities is a mistake.

Exploring framework functionality

When researching frameworks, exploring a framework's functionality is obviously going to be a large part of your focus. However, depending upon what type of framework that you choose, you might not be able to fully explore its functionality when you're making your choice. In a perfect world, you'd have all the time you need to download and experiment before you make a decision. However, in the real world you are often going to have to make a decision based on the framework's popularity or the recommendation of others. Still, not properly exploring a framework's capabilities is a mistake.

As you might miss out on powerful capabilities, and you might have to go back and restructure and rework content to make the framework function properly so that's something you want to pay very close attention to. Since we have been using Foundation, we're going to continue that, and we are going to take a look at how you can dig into a framework and find out what that framework is capable of. So I am working from the 03_05 directory, and this is sort of our modified version of Foundation, if you will. I have the index page open and the very first thing I am going to do, and this is the nice thing about Foundation and some of the other larger frameworks like Gumby will do this as well.

They will give you a file that's not only a starter point, but it's also kind of a demo. So if I preview this in my browser. So not only does this give us a nice starting point as we scroll through it, we can see that it has examples for how to use the grid, for layout, how to do things like tabs, how to do things like the modal window, so there's all sorts of really neat stuff here that are living breathing examples of this. So if we go back into the HTML, we can see how the code is structured, what classes are used to trigger this type of behavior, that sort of thing. So that's one way to kind of take a look at the functionality of it, you'll also notice that on the right-hand side, we have some resources here, we even have the documentation for Foundation.

So if I click on this, it's going to take me to the Foundation's site, and it's going to allow me sort of explore some of this functionality. I'm not going to go over everything obviously, if you're interested in using Foundation, you certainly could spend as much time on the site previewing things as you can. But I do want to show you just a couple of ways that you can kind of explore functionality and discover things. So if I click on UI Elements, for example, which is just one component of Foundation, it shows me how Alerts are done the default styles, Labels that I can put around items, Tooltips so you can do things like this very easily by just applying a class which is nice, things like Accordion panels.

And if I scroll down even a little bit further, I see sort of a callout panel. So this is nice. Sometimes you are going to want to do like a pull quote or a monthly special for a product or something like that. This shows me exactly how that's going to be styled. So in addition to just saying, hey, use these classes, they have code example, and if I click on that, I can see that the callout panel there that I like, has the class applied to it of panel, callout, and radius, and it's a div tag just kind of wrapped around some content. So, doing that gives me a really good idea about how to apply that type of functionality within my own files.

So if I go back into my index file, I could scroll down, for example, to one of the pieces of content on the page, as a matter of fact, I am just going to go down to this Getting Started right here, it's about line 107 where I have an h4 here, this is Getting Started, and I have a paragraph here. So what I am going to do is I am going to wrap this in a div tag, and again, the emphasis here is not on Dreamweaver or on coding, it's just kind of what we are doing here. So do this any method that you want, I am going to wrap this in a div tag, and I am going to apply a class to it. And the class I am going to do is the callout panel radius, three types of words, so it's three separate classes being applied, there is callout panel and radius.

Radius is the style. It gives us the corners. panel lets you know that you are going to do a panel, and callout gives it that sort of default styling with a color and all that. So I am going to go ahead and do that. I'll Save this, Preview that back in my browser, and now I can see that that particular element has that callout. So part of the functionality of the framework is just applying classes and to having these UI Elements up here so that was very, very easy for me to do, and it certainly makes the development of my side if I want to use those types of things, really, really super simple, all I have to do is apply class, and I get it, that's sort of the magic of using these frameworks.

Foundation is nice in the fact that, they give us this demo page, they have the documentation online that you can go and sort of dig around, not all frameworks are going to have that, and in fact, even Foundation and its document online isn't going to show you everything that the framework is capable of. So if you really, really want to dig into a framework and find out what it can do, you are going to have to spend some time within the framework's styles. If I switch over to the foundation.css, for example, now this is a large stylesheet, there is a lot going on here, so I'd have to scroll through and read through every single style.

To save you a little bit of time, I have already done that. Although, if you are interested in using Foundation, I really encourage you to go through and read how all the stuff is put together. Unless you really understand how a framework is structured and how the styles work together, you are not really going to use it to its fullest potential. Well, looking through a CSS file, you are eventually going to come across things like this, and it doesn't really matter what framework you are using, most of the ones that I have experimented with, had a little sections in it that comment out the styles to let you know how they be should be used. So here, we see, for example, the feature of using Block grids, and you'll see these are 2-up, 3-up, 4-up, 5-up unordered lists, suited for repeating blocks of content.

If we add mobile to them to switch them just like the layout grid (one item per line) on phones, which means that we can do mobile block grids and then just regular block grids and they will change based on the screen size. So we can see that we need to apply the block-grid class to an unordered list to make it a block-grid and then we can tell it how many to display at a time, 1-up, 2-up, 3-up, and it's going to create some columns for us. Now I did mention that earlier versions of Internet Explorer don't support the nth-child selector, so support for Internet Explorer isn't so good versus IE9 and back, but for modern browsers, it works just fine. So I am going to give this a try.

I am going to click back over to my index. html file and what I am going to do is I am going to go up to these buttons that are right above this. You can see that right now we have div tags that are surrounding these buttons and the div tags are controlling the layout. We have two sort of sections occupying half the page, 6 columns, and 6 columns, and this is using the CSS layout grid. I want to try those Block grids and see how that works. So what I am going to do is I am going to modify the structure of this. I am going to go ahead and replace the parent div tags with an unordered list.

So I want all of these buttons actually just inside one unordered list. Now that also means that I have to take these paragraphs, and I have to convert them to list items. So, there are lots of different ways to do that, but I'm just going use Dreamweaver's Quick Tag Editor because it's so fast. So, whatever method that you like to use or if you just want to do it manually that would be fine as well. So again, what I have done here is I have removed the two div tags that were creating sections around it. So I'll remove those, replace them with an ordered list, and then all of the buttons are now inside these list items.

The next thing I need to do is I need to take this unordered list and apply the classes that are going allow me to do my block grid layout. Just to show you kind of the difference, if I save this right now and refresh the page, if I go down to the example of the buttons, you can see they are just displaying in an unordered list, exactly as we would expect them to. However, if I use the classes that are available within the framework, so if I choose class and here I do block grid, now inside this I can also tell it how many up I want at a given time. So I am going to start with say, I don't know, six-up, so six dash up, so again notice that block-grid in six-up are two separate words, I'll go ahead and save that, and now if I a preview it, you can see the framework starts to take over.

So now these buttons are displayed six-up in a row. I can change that, I could say, okay, I want to do four-up. I'll save that, preview it, and I get four-up, and if there are too many to fit, four in a row, they just break down and they start creating a new row. So you can see how useful this is imagine doing thumbnails or things like that, this block grid, the setup is really easy, and I am just going to change this to two-up and refresh it, and there we go.

We get pretty much the same layout we had before, but it's just done a slightly different way, and this is really why it's important to go into whatever framework you are using and really dig through the code, find out different methods and different ways of doing things so that you know the framework's functionality. Another important point to make here is that if I didn't know my framework's functionality, and I wanted to achieve those results, I might not initially structure this element the way they will allow me to do it. So one of the things that you need to think about when you are learning how to use a framework is exactly what structural requirements do some of these different features have.

I'm sure by now that you can guess that the purpose here wasn't really just to introduce you to a couple of features of the Foundation framework, it's really to highlight how important it is to familiarize yourself with the framework's functionality before you begin using it. Prior to using a framework for the first time, make sure that you allow yourself enough time to explore the framework inside and out and really understand how it works. Not only will you take full advantage of what the framework has to offer, you are going to save yourself a lot of potential work down the road, by making sure that your code is structured to work properly within the framework.

Show transcript

This video is part of

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

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