Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Utilizing framework capabilities


From:

CSS: Frameworks and Grids

with James Williamson

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.
please wait ...
Watch the Online Video Course CSS: Frameworks and Grids
3h 27m Beginner Jan 22, 2013

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.

Topics include:
  • 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
Subjects:
Developer Web
Software:
CSS
Author:
James Williamson

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.

There are currently no FAQs about CSS: Frameworks and Grids.

 
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

* Estimated file size

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

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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 ?

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:

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

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.