Utilizing framework capabilities
Video: Utilizing framework capabilitiesIf 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.
- 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
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 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.
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.