Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 What Is Foundation?

In this lesson you're going to learn what a framework is and what exactly the Foundation products are.

Related Links

1.2 What Is Foundation?

Foundation is a responsive front-end framework, according to the people at ZURB who created foundation, this is the most advanced responsive front-end framework in the world. Whether or not that's true, it's up to you to decide, but it is powerful, that I can tell you. I've been playing around with it and it's real easy to use. It has a lot of components that will definitely help you get a project up and running in no time. Now, what is a front end framework? Well, in terms of web design, a framework is a package of files and folders that contain standardized code, and that code can be PHP. It can be JavaScript, HTML, CSS, it really depends on the type of framework. Now, front end frameworks are also called CSS frameworks, and they usually contain HTML, CSS, and JavaScript files. And their purpose is to give you a clean basis from which you can start your project. That means you done have to write anything from the scratch, and instead, you can just reuse code. There are a lot of frameworks out there, but since this course is about foundation, let's have a look at these reusable code, which comes in a form of various components and styles. Now, let's have a look at what foundation calls the kitchen sink. It's basically a page where you can see all the components that are available to you, and the first two components are related to the accordion. So the accordion is this kind of control. It's a component with multiple panels that have different content, that can be shown once you click on a parent trigger. The same principle was brought to the menu, so you can now have an accordion menu, just like this, showing different categories and subcategories. Very useful, for example, when your're doing a sidebar menu, or an off canvas menu. Then we have little stuff, like badges with little numbers or letters inside them. Then breadcrumbs, buttons in different sizes and different colors. You also have button groups here, very nice, callouts. This is like a message box. It comes in various forms, various colors, and then you have the close button, which can be applied to callouts. You just click it and the parent container will just disappear, basically. Then you have a very cool control called drilldown menu. So the drilldown menu, basically, is working like this, you click on one category, it reveals subcategories, and provides a back button. And it works on multiple levels. Really good, again, for a sidebar or an off canvas menu, where you don't have a lot of space to work with. You can just use one of these, and it's just gonna behave in this manner, and very nice. Then dropdown menu, this is, again, very common. Dropdown Pane, so there's a lot of dropdowns going on here. We can toggle dropdowns, different containers with different content. Then we have some controls for flex video. This is basically a video that resizes and keeps its ratio. Then you have Float Classes. Notice this is ordered alphabetically, so you might find controls that are next to each other that don't really belong in the same category. For example, float video and float classes, flex video, excuse me, and float classes. So here, you can actually toggle the code, and you can see how to use these classes. You can actually copy this to the clipboard, so whenever you're building stuff with foundation, we can just pop into the kitchen sink and just grab some of this code and paste it in your editor really, really fast. Then you have the options for forms. Right, so you have the traditional inputs here. You have a numbered input with increment or decrement controls. What else do you have, a select the typical radio check boxes, labels. This is an input with a format in front of it, really nice. Similar to badges, we have labels, but these allow for more text to be entered in them. Then you have the Media Object, which consists of an image, a title, and a piece of text. So as you can see here, all of these have different classes, and a very specific HTML structure that you need to keep. Then you have the Orbit slider here, which is a very nice slider. You can have images, you can have HTML in here, very cool. Another form of navigation is the pagination. Again, with other options here. Then we have different sliders, vertical and horizontal, and also range sliders, which is very nice. Switches, the traditional table code here. As you can see, no styling, or no special classes are needed here. Tabs, again, this is another widely used feature. Thumbnails that add this border, and this hover effect, on top of images. Title bar. Tooltips can be pretty useful, and finally, a Top Bar, which is more or less like a Title Bar, but with some additional controls here, and actually, this titling on this one seems to be a bit off, maybe it's a mistake by the people at ZERP. Now remember this was released very recent, so you might find bugs like this every now and then, but yeah, with that said, this is basically the kitchen sink. These are all the components that you can use in your project, and, as I said, because they give you this code toggle, you can go back and forth between your code editor and this page, and grab all the components that you need, or actually, grab examples of them, and use in your own projects. Now, a quick note about browser compatibility. Foundation, or least this new version, is compatible with all major modern browsers, which means Safari, Chrome, Firefox, Opera, and even IE, Internet Explorer 9+. Foundation is mobile, first. That means it uses media queries to display different layouts on different screen sizes. That means the browsers that do not support media queries, which means IE 8 and below, will display the mobile styles first. So definitely keep that in mind. With that said, let's move on to the next lesson, and see what's changed in Foundation from the last version.