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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Installing a Building Block Manually

The easiest method of using a building block is to do it manually, either by copying the necessary code or by downloading the component as a whole.

Let’s take a look at both options.

2.2 Installing a Building Block Manually

The easiest method for using a building block is to install it manually, either by downloading the entire package as a zip file or by copying the necessary code form the foundation building blocks website. We'll take a look at both options. Now the components we're gonna be looking at, or the building block is the Hover Underline Menu. So let's go ahead and download it as a zip. So we're gonna save it, save the file and that gave us these files, right? So if we open, there's HTML. In the browser window, you'll see that it just looks unstyled. And that's because you need a foundation project for this to work, but I just wanted to show you what's in the package. So you get on HTML, that contains this channel code. You get a file that contains the JavaScript code, and you also get two SCSS files, one for layout, one for the menu itself. Now the second option is to copy this code directly and paste it in your project, but for that we need a foundation project. So let's go ahead and set one up. You go to foundation.zurb.com, click foundation for sites, and click on download. You have a couple of options here, let's just go with the complete package, so hit download everything. So now I'm just gonna delete this, I'm gonna paste in my foundation files. And if we open this, Yeah, you're gonna find the standard Foundation learning page. All right, now this this let's say we want to add this Hover Underline Menu to this page. Well let's open this inner code editor and we're gonna open index HTML, and we're gonna paste our component right here at the top of our page. So first we're gonna copy the HTML, we're gonna paste it in. Let's do a quick check, refresh, all right? Now we need to copy the styling, and the Foundation. This version of Foundation comes with just the CSS files. So we're gonna grab the CSS, copy, we're gonna paste that in. And also we're gonna copy the JavaScript, which we're gonna paste in this app.js file right here. Just like that, save, and now if we're gonna refresh, you can see that we have our underlined menu. Well let's add another component, for example, instead of these buttons, maybe I want to add a card. So I have this info card with labels here, gonna click it. You can see a preview. And I'm simply gonna grab the HTML, and I'm gonna put it, let's see where we have those buttons, yup right here. So I'm gonna delete this and I'm just gonna paste that HTML, and then I'm gonna copy the CSS. I'm gonna paste it in my CCS file, and then when I refresh I have a nice card. And that's how you can install a Foundation building block manually. Now if you're comfortable using the command line and tools like gulp, then you might wanna check out the next lesson. Because you're gonna see how to install a building block using the Foundation CLI, or command line interface. I'll see you there.

Back to the top