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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Setting Up a Project Using the ZURB Stack

In this lesson, you’re going to learn how to download the ZURB Stack and set up a project.

Before we begin, I want to mention that you should have some knowledge of Node and the command line. If that’s not the case, you should first check out Kezz Bracey’s beginner tutorial about how to install NPM; the link is down below.

Related Links

1.2 Setting Up a Project Using the ZURB Stack

Hello and welcome to this advanced Foundation course. In this lesson, you are going to learn how to download the ZURB stack and set up a project. And I just wanna make a quick note here. The ZURB stack is also known as the ZURB template. So I'm going to be using these two names interchangeably throughout the course. Just remember that they both refer to the same thing. Now, before we get started, you should have some knowledge of how to use the command line. And you should know how Node and NPM works. If you don't have that knowledge, then please check out the beginner tutorial made by Kezz Bracey on how to install NPM. The link is down below. Now, you can install the ZURB template in two different ways. First, to manually install it, you need to use Git. That means you need to have Git installed on your computer. But chances are, if you've used GitHub or if you've used that particular computer to push files to GitHub, then Git is already installed. If it isn't, go to git-scm.com/downloads. Click on the version that matches your operating system and follow the instructions. Now to install Git manually, as I have said, we need to clone this GitHub repository, which is the official ZURB template for foundation for sites. So you need a terminal for this. And I'm gonna navigate to my working directory, which in my case is the Desktop. And I'm simply going to say git clone. I'm gonna go back to my repository and I'm gonna copy this link right here by clicking this button. I'm gonna paste that in and then I'm gonna specify a project name. So I'll say zurb-stack-manual. So that will create a folder on my Desktop called zurb-stack-manual. And inside that folder, we have the following files. These are like the basic files that you will find in the ZURB stack. We have a source folder which contains all of our source files. We'll talk about this in a future lesson. We have a CHANGELOG markdown file, readme markdown file. And then the main gulpfile, which is responsible for powering this whole build system. A config.yml file, this is a configuration file. And finally, package.json will have a list of dependencies. Or in other words, a list of NPM modules that need to be downloaded in order for this entire build system to work. Now you saw that installing this was very fast, but we're not done yet. One thing that we're missing is the node modules. So to download those, we can simply change directory to our newly created directory, which is called zurb-stack-manual. And then we need to type npm install. Now this command will read the package.json file and will download all the necessary node modules from there, all right? And after about a minute, a minute and a half, all the NPM dependencies are downloaded. And if we'll take a look, we can see that we now have a folder called node_modules, which contains all the modules necessary for this entire system to work. Finally, the last thing we have to do is say, npm start. And that will power up the ZURB stack. It will launch a browser sync server that will listen for changes. It will compile all the files. And finally, it's gonna open the localhost:8000 address in my browser. This is the basic Foundation boilerplate. So at this point, we are ready to go. Now that was method number one. Method number two involves using a command line tool called the foundation CLI, where the CLI stands for command line interface. It's really simple to use, but first, we need to install that particular tool. So going back to my terminal here, I'm gonna stop the server using the Ctrl+C command. Here, we simple have to say, npm install --global foundation-cli. Now, if this gives you an error saying you don't have enough permissions or something like that, you will simply put sudo in front. And that's gonna ask for your administrator password. And it's gonna install that tool. Now I already have it installed of course, so I won't go through it again, but once you do. And I'm gonna navigate back to my desktop here and I'm gonna say, foundation new. And this will take us through kind of a very simple wizard. It asks us what kind of project we're building today. Either it's a website, a web app, or an email. In our case, we want a website, so it's gonna download Foundation for Sites. So we're gonna select that. Let's call the project zurb-template-cli for command line interface. And then it asks us which template would you like to use. So the basic template, we're not really interested here. What we are interested in is the ZURB template, this is the whole point of this course. So we're gonna select the ZURB template and that's gonna download the project template and install dependencies. So it's basically doing what we've done in the first step, which is to clone that repo. And also do an npm install to get all of those node modules, but doing that automatically for us. And a couple of minutes later, everything is installed, our project folders created the node modules, and the Bower components are installed. So now, we can go to the zurb-template-cli. And we can do the same command, npm start, which will start a browser sync server. And it's gonna watch for file changes. And the end result is exactly the same. We just used two different methods to get to this point. Personally, I like method two a lot better, because it's easier to remember, it's easier to use. I just install that command line tool once and then whenever I need a new Foundation project, I just type foundation new. And that's better than trying to remember our repository name and then cloning that with git. Now, the ZURB template uses Gulp to power everything basically. So to understand how this build system works, we need to take a closer look at that Gulp file you saw earlier. That's coming up in the next lesson.

Back to the top