1. Introduction

1.1 Introduction

Foundation is an awesome framework that allows you to quickly get your project from prototype to production. And that's possible thanks to a collection of modular and flexible components. Now, recently ZURB launched Foundation Building Blocks, which is a collection of coded components meant to supplement the existing ones. You can find blocks like custom menus, social buttons, custom forms and much, much more. In this short course you'll learn how to install these components, and also how to use them to build a simple UI. I'm Adi Purdila, let's begin.

2. Working with Foundation Building Blocks

2.1 What Is a Building Block?

A building block is a stand alone component coded to be compatible with any Foundation project. Now most of these blocks are made by the Zurb team. But there are also community made ones and you can even submit your own building block. Now let's take a look at some of these building blocks and see what they're all about. And for that we can go foundation.zurb.com/buildingblocks. This is a page that Zurb made recently. And here you can see a list of all the components and they're nicely organized into these categories. And you can click on an individual component, you can see a preview right here. You have some options for download. Either a zip or via the Foundation CLI rule. We're gonna learn about this in a future lesson. And under it you will find the code that's necessary for that component. And we have HTML, CSS, and JavaScript. Now not every single component has JavaScript, some of them just have HTML and CSS. But once you are here, basically, you can toggle two of this sections, on and off and you can copy the code for each one just by clicking this button. On the CSS part, you also have the option to choose between SCSS and regular vanilla CSS. Further down, you have access to some similar building blocks and on each one you're gonna find its category, on the top right here. You'll find its name, the preview, the author of that block and also the version of Foundation it works with. So if we check out this Top Bar Navigation, you'll see again a full preview. And this one actually does not have any corresponding JavaScript, only HTML and CSS. Now, coming back to the homepage here, you're gonna see a section here for filtering these building blocks. For example, here are the navigation ones. We're gonna see a bunch of menus and nav bars and stuff like that. Medium, what else do we have, some quotes, articles, loading button. So you can see that these components are varied. They're not just menu's and just image containers and stuff like that. There are pretty complex components. For example, you have a section here for an article that has a title, it has content, it has images. We can scroll further down. Let's see, we find an article header with everything that it contains. Let see what else? If we go to forms, we're gonna find forms ranging from very simple, like this Plus Minus Buttons, to entire contact sections or registration forms or social logins. Like this one over here. Now, Zurb also offers something pretty cool, it's called Kits. Now kits are collections of building blocks, basically. So, for example, we have a blog kit right here. And if we click on See Details, we're gonna find all of the building blocks that are included in that particular kit, all right? So this is for a blog. And we have a blog post, a blog footer, tag cloud, breadcrumbs, pagination. So basically, everything that you would need to create a blog page, you can find in this kit. And, of course, you can go ahead and download just like any other building block. Now if you're wondering why you should use these building blocks, well it's a matter of convenience, really. Because Foundation, the framework itself, has a few components. It has a few building blocks, I guess you can call them. But they're very simple, right? And that was the whole point with the framework. The guys at Zurb did not want to, Load it with too much stuff, right? They just have the basic stuff, they're the core components. But with building blocks you can extend those components, right? You can grab already made, already coded components that you know for sure they work. With your Foundation project, with the Foundation styles and JavaScript and all that stuff, they're already tested, right? And you can just grab them from there, put them in your project, and they just work. And that saves you a lot of time. And instead of coding that particular stuff yourself. You can grab a component, for example, I saw one. This first one, Hover Underline Menu, right? It's a pretty nice component and instead of writing this code yourself, you can just grab it from here, put it in your project and it just works. All right, and that's a very quick look at Foundation building blocks. In the next lesson, you're going to learn how to get one of these blocks and install it manually. I'll see you there.