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

Utilizing framework capabilities

From: CSS: Frameworks and Grids

Video: Utilizing framework capabilities

If you're using a more comprehensive framework, like Bootstrap, Foundation, or Gumby, you are going to have access to a lot of built-in capabilities that allow you to extend the functionality of your site without really any extra work on your part. Although these capabilities really differ from framework to framework, sometimes dramatically, I want to take a look at how they typically work. So to do that, I'm going back to the Foundation framework's documentation page, and I'm browsing through some of the elements that are available within the framework that I can use. So it comes with built-in Alert dialog boxes, different styles for Labels if I wanted to change those, Tooltips that I can really easily create, different things like Accordion panels.

Utilizing framework capabilities

If you're using a more comprehensive framework, like Bootstrap, Foundation, or Gumby, you are going to have access to a lot of built-in capabilities that allow you to extend the functionality of your site without really any extra work on your part. Although these capabilities really differ from framework to framework, sometimes dramatically, I want to take a look at how they typically work. So to do that, I'm going back to the Foundation framework's documentation page, and I'm browsing through some of the elements that are available within the framework that I can use. So it comes with built-in Alert dialog boxes, different styles for Labels if I wanted to change those, Tooltips that I can really easily create, different things like Accordion panels.

So anytime I see one of these elements that I want to use on my page, I can just go through some of the example code and see how these are used. For example, during my blog I'd love to have some of the text called out in a callout panel like this, and in order to use that, all I have to do is take a look at the code example and see how these are constructed. In this case, all I am really looking at is a div tag with the class of panel, callout, and radius. So if I go over to my blog page, which is Moving from print to web so I have a blog posting of Moving from print to web, if I scroll down-- and again, we don't quite have the layout done yet--but this little passage right here, Hey, can I make my page look the same? No. Get over it.

I'd like that to be presented in one of those callout panels, and we have seen by looking at the Foundation documentation that it is just as simple as applying a class. So if I go back into the code of this page--and this is moving.html, which you can find in the 04_08 directory-- if I scroll down into my article, I can go ahead and find those two paragraphs right there. So all I need to do is highlight those two paragraphs and wrap them in a div tag, and for the div tag I am just going to apply a class of panel, callout, radius, and centered, and so those are classes that are built into the Foundation framework by just looking through the documentation, and I just saw it was available to me, and I want to go ahead and take advantage of that without actually having to go in and write any of those styles myself.

So as I save this, go back out to my page, and refresh it, you can see that now I am getting that callout formatting without really any extra work on my part, other than applying a few classes. Once we do our page layout, it's not going to stretch the entire length of the page, so it's just showing you really kind of how easy it is to use a lot of these formatting options. Now, some of that extra framework capability is going to even go down in the functionality. So if I go back to documentation, if I scroll up, I see that there's a link there for Javascripts, so if I click on that, there are some nice behavioral things built into the Foundation framework.

Things like the Orbit slideshow, Magellan, which is sticky navigation, that sort of thing, but I want to focus on Reveal. Reveal is essentially a way of integrating modal windows into your site. So if I click on their example, you can see the modal window pops up. It kind of animates down. I like that. You can dismiss it by either clicking here or clicking off the modal window. That's a very common feature that you see in websites now, and if you are a designer that's not really especially strong in JavaScript or at using jQuery or some other library, that might be a little hard for you to implement, but it's baked right into the framework, and all I need to do to use it is to read through the documentation.

First thing it tells me is I mockup a div tag, that's the actual modal window. I give it an ID that identifies it as a modal window, and I use some classes to style it, so reveal-modal and then some optional classes like expand and extra large and medium and small that are going to control the sizing of it. Now after that, I can either use a JavaScript function to call the modal window, or I can go ahead and attach a link that has this property, data-reveal-id that passes along the name of the modal window that you have created, and that's all I really need to do. There is some existing documentation, but implementing it really is easy as a two-step process.

So one of the things that I have in my page here is a Newsletter sign up, and I would love this instead of having to redirect somebody to another page whenever they click on the Newsletter sign up, we just had a modal window pop up that would allow them to sign up for the Newsletter and then go right back to doing what they were doing. So to do that, I am going to go back to my code, and the first thing I am going to take a look at is creating the modal window itself. I did this to save us a little bit of time down here. If you notice, you scroll all the way down to the bottom of the page, you are going to see some commented code. So I am going to uncomment that code, and what this is it is a div, it has an ID of newsModal so I came up with that name, and I gave it the classes of reveal-modal large based upon the documentation, so that's really kind of what I wanted.

I have to place this in the page. I can't just leave it below the HTML tag, so I am going to cut this, and I am going to put it right in here at the bottom of the page just below the footer. The Foundation by default is going to hide this, so nobody is going to be able to see it unless they have their JavaScript turned off and their styles turned off, and if they do, they are probably used to seeing their pages look a little different anyway. So basically, this is going to be hidden from the user until they click the Sign in button. To trigger that, I am just going to scroll up a little bit to find the Newsletter section and the little Sign up link right there. I am going to go ahead and wrap this in a link tag. I am going to do a href attribute.

Now in the example, they actually show you just linking it to a pound symbol, and I don't like this method, because if you do this and click it, it'll jump up to the top of the page. I am actually going to say newsModal, which is the ID that I have given the modal window, and what this means is is if somebody is looking at this on a user agent that does not have JavaScript turned on, or doesn't have the styles turned on, this link will still jump them down to the bottom of the page to the modal window, so even if it's not revealed, it still is a quick link to accessing that, so that's kind of nice. For classes, I am going to go ahead and give this a class of small button right, so it's going to handle the styling of that.

I don't want it to look like a link. I want it to look like a button that they can click, so more of a call to action, so I use the classes that are built into Foundation and then finally we are going to use that data-reveal-id, and that value equals is going to be equals to newsModal, again, the ID that we gave the div tag. So again, this data-reveal-id is a proprietary attribute for the Foundation framework, and what it's doing is it's basically the JavaScript is going to be called and say, hey, I want to go ahead and reveal this particular newsModal window.

So if I Save this, go back into my page, and Refresh it, we can see that the Sign up button now looks like an actual button, and when I click it, now the modal window shows up with our form in it, somebody can go ahead and fill this out, submit the Newsletter, and then close it and get back to reading. So that is awesome. And that just shows you a couple of the capabilities that are baked into the Foundation framework that you can use to enhance your site, and it's very quick, and it's very easy. Every framework is different, so you want to be sure you read through the documentation and browse its code so that you can really take full advantage of what a framework has to offer.

If I hadn't dug into Foundation, I wouldn't know that those things even existed. Also, be sure that you pay close attention to how those extras are structured and executed. You want to be aware of any potential issues with additional overhead they might cause or coding practices, for example, that go against the strategy of your site.

Show transcript

This video is part of

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

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

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.