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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Installing a Building Block via Foundation CLI

Installing a building block manually is fairly easy to do, but it’s not the most elegant solution. Another option is to use the command line to do all the heavy lifting, and that’s what you’ll learn in this lesson.

Some knowledge of the command line and Node.js is required, but if you don’t know how to get started with those, please check out the lesson notes.

Let’s start by creating a new project using the Foundation CLI or Command Line Interface.

Related Links

2.3 Installing a Building Block via Foundation CLI

Installing a building block manually is very easy to do, but it's not the most elegant solution. Another option is to use the command line to do all the heavy lifting and that's what you're going to learn in this lesson. Now some knowledge of how to use the command line and Node.js is required, but if you don't know how to do that, then first check out the lesson notes where I've added some relevant resources. Let's just start by creating a new project using the foundation CLI or command line interface. Now I have a terminal window opened here, and the first thing I'm going to do is check if I have Foundation installed. So for that, I'm simply going to do foundation -v and that's gonna give me the version 2.2.3. Now if you get an error saying that command not found or something like that, then it means you don't have this utility installed. And to install it, you would do npm install --global foundation-cli and that's gonna go ahead and download the files, install it globally, so you can use it anywhere, in any folder. Now if you get an error saying that you need administrative rights, you need to put pseudo in front and rerun the command. Now since I already have this installed, I'm not going to install it again. Instead, I'm gonna go ahead and create a new foundation for sites project. First I'm gonna navigate to the folder I want. In my case, I'm gonna create my project on the desktop. So I'm just gonna say CD or change directory, desk top. And then to create the project, I'm simply gonna say Foundation new. This will ask me if I want to build a website, a web app, or an email. You can use the arrow keys to select the one you want, in my case, it's a website, the project name, let's say testing building blocks. Now it's gonna ask me which template do I want to use. The basic template only includes a SaaS compiler. But the ZURB template includes handlebar templates with Panini and includes all sorts of compilers and it also includes a workflow with Gulp. So this is the one that I need. I'm gonna hit that, enter, now I'm gonna wait for the utility to download all the necessary files and install the dependencies. All right, all done. I think it took about one or two minutes, so it created our project folder, it installed all of our Node modules and all of our Bower components. Now if I'm going to navigate into testing building blocks and I do a list, this is the structure that you are gonna find. So what I can do now is simply say foundation watch. Also as an alternative, you can say npm start, they both work. And what this would do is, it's gonna start a browser sync server, and it's gonna start watching the files for changes. So every time you make a change to any of the files, the browser refreshes, any SASS is compiled and it automatically opens that address in the browser. In my case, it's localhost:8000. This is also configurable but by default, this is what you get. Now having a look at this ZURB template in a code editor, and by the way, this is also called a ZURB Stack, you can find the following. First of all, you have the Gulp file which contains all the tasks, like for example compiling Sass into CSS. You can find the package JSON with information about the npm modules required for this to work. I can find the config.yml with all the configuration options, and the paths, you can see just how many components foundation is loading and these are by the way, the default ones. You have Bower json file with information about the Bower components and then you have the source folder. This contains all your source files, so everything from HTML files to images, to JavaScript to CSS. It's all here. And then there is a distribution or dist folder which is actually the one that you are seeing being served right here. So the index HTML that you see here is actually this file. It's not one that's grabbed directly from SRC. Now that was just a quick intro. How exactly do you use the ZURB Stack with the Foundation building blocks? Well first thing you have to do is find the building block that you want and for that, you can also use the terminal. You'll simply say foundation, blocks, list and that's gonna give you, it's a very big list, currently 169 building blocks. It gives you a list of all the building blocks right here with its name or its ID and also its title. You'll also have access to the kits. To list all the kits, you will simply do Foundation kits list and that's gonna give you a list of all the kits. Currently, there are eight of them. So lets say for example that we want to install that hover underline menu block that we used in the previous lesson, which is this one. Well when you go to the download section, it says installwithfoundatinCLI and it gives you a command here. So you copy that command, you come back into your terminal, you paste that in. You can see it's foundation blocks install hover-underline-menu. You hit Enter and now it says, installed hover-underline-menu. Now, by doing this, a couple of things happen. First of all, Foundation copied all the necessary files in their correct locations. So if we go to assets, JavaScript, you'll find a new building blocks folder here which contains the code for the underline-menu js. If we go to SCSS components, you'll see a new folder called building blocks which contains the SASS code necessary for the hover underlying menu. And also, if we go to partials, you'll find building blocks and also the HTML that's required for that component. Now I did not explain what's up with these partials and pages and layouts. Foundation, or this version of Foundation, the ZURB Stack uses something called Panini which is an engine for handlebars templates. Basically, you can use a templating language alongside your HTML. If we check out Layouts, you'll find that apart from normal HTML, we also have these place holders here. These are handlebars templates and what this is doing basically is, it's replacing this bit with the contents of my index HTML. So it's gonna grab this, everything that's in the index.HTML file and it's gonna put it instead of this body. All right, that's a very quick intro, and partials are small bits of code that you can reuse across the pages like for example, a header or footer or a button or something like that. So, Foundation created this partial for us. Now to include it, I can simply go into my index HTML and I'm gonna go right here on the top. And I'm gonna use the handlebars template syntax, and I'm gonna include Hover-underline-menu. So I type the exact name of my HTML file but without the HTML extension. So now if I I go back, you can see that that building block has been added to my page. Now you can see that it's already styled and that's because Foundation also added an import statement in app SCSS importing the SCSS file for that particular component, and it did the same thing in config.yml. It included this bit, src/assets/ JavaScript. So it included the JavaScript code necessary for that component and this is the beauty of the ZURB Stack. Just by installing a package like this, it does everything automatically. It copies the files and also updates the dependencies and imports for that particular component. Let's try something else. Let's find another component. Let's search for a footer maybe, for example, this marketing site footer. So again, I'm gonna grab the foundation CLI code, I'm gonna paste that in. It's installed, and of course it installed again the CSS or the SCSS, the JavaScript and also created this Partial here. So I can just go over, at the bottom of my document and I can say include marketing site footer. And now, this has been updated automatically and I have the footer, already styled, already working properly. And that's how you can install building blocks using the Foundation command line interface. I think it's pretty awesome just being able to install one of these components with a single command, a huge time saver. Now let's go build something with these components, I'm thinking something very simple, a simple UI like a landing page. We'll do that in the next lesson, I'll see you there.

Back to the top