Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Prototyping with Foundation Building a Top Bar Navigation

Srdjan Cestic
Srdjan Cestic
6,855 Points
Posted by Srdjan Cestic
Srdjan Cestic
6,855 Points

Setup Foundation

When I download foundation, what's next step to do? How to include files on workspace/any other text editor?

4 Answers

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi Srdjan Cestic,

Adrian Patrascu is right, but he's referring only for the style of Foundation framework. Foundation comes with css and some js.

Imagine that you have downloaded the complete version

You have two main possibilities:

The first is unzip the folder and start working with the file inside of it, that are all linked togheter. The second is to unzip the folder that you have downloaded and copy only the file that you want inside your project folder or if your are using Workspace you need to upload the files.

In the second case after that you copy the file that you need you have to include them into you html file like this:

index.html 
<!-- inside the <head> tag-->
<link rel="stylesheet" href="css/foundation.css" />

<!-- before the closing body tag -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>

So your index.html file would look like this:

index.html 
<!doctype html>
<html>
  <head>

    <!-- your site information -->

    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
  </head>
  <body>

    <!-- your content -->

    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/what-input.min.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

If you're new to the Foundation framework I suggest you to start working with the file that you download from their site and look at the docs to start customize your site with this awesome framework!

If need help, don't hesitate to ask!

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

I found this article. Is for Foundation 5, but the steps to install are the same for Foundation 6, maybe can change only the name of the file that you link.

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Yes it is, for Foundation 5! if you see in the link it points to .../v/5.5.3/... that means that point to the version 5.5.3 which is the last for the version 5.

If you have downloaded the version 6 here's the documentation for the new version of this framework!

Adrian Patrascu
Adrian Patrascu
15,279 Points
Adrian Patrascu
Adrian Patrascu
15,279 Points

Hi Srdjan,

You will need to include the foundations css like you include any other css in the head of your HTML page:

<link href="folder-location/foundation.css" rel="stylesheet" media="screen">

Thank you, Adrian

Adrian Patrascu
Adrian Patrascu
15,279 Points
Adrian Patrascu
Adrian Patrascu
15,279 Points

<link href="folder-location/foundation.css" rel="stylesheet" media="screen">

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

That's when I start workspace with foundation, but how to include foundation when I start with my own text editor? http://foundation.zurb.com/sites/docs/installation.html Which of these steps I need to do?

Thanks

Jake Porritt
Jake Porritt
10,356 Points
Jake Porritt
Jake Porritt
10,356 Points

In the <head> tag place a link to Foundation like so... <link rel="stylesheet" href="INSERT LOCATION HERE">