Menu icon Foundation
"Recommended Install for Foundation"

Hello! I am new to this forum. First let me say, that I like Foundation very much and used 3 and 4 to build some small and medium websites. I've used the static versions and they worked fine. Alas, once you need to change or modify this or that, it gets really difficult very fast. So I decided to try the recommended install and get going with Foundation 5 and sass.

The installation process made me jump through a plethora of hoops: git, node,js, ruby, npm (which is not mentioned in the requirements), compass and whatnot, aside from having to do some of this stuff as root as well. It wasn't a pleasant experience,

I am not a professional programmer or webdesigner, but I'm not a newbie either. I find my way around a linux command line well enough and am (or in one case was, you may guess which one) fluent in PHP, python, javascript, shell programming, HTML and CSS.

Even so I failed on getting the install to run. I followed the steps of the recommended install, but when I open index.html in chrome (or firefox), quite bluntly - it does not show any of the foundation classes. An app.css is created and loaded just fine, but all I get to see is the vanilla UA-Style (after a bit of searching I was able to correct the names-space bug). Now, after two days and about 6 hours of dabbling I am pretty much frustrated. I do not get any error messages (bower, compass or from the browser), app.css has lots of stuff in it though no usefull foundation classes. I can't find any usefull information and am ready to give up.

Any hints would be very appreciated. I am sorry that I can not give you any error messages, as there simply are none. The styles are not loaded, which does not really surprise me, as there are none in the apps.css which otherwise is created without errors.

Regards

installingSassbowercompass

Hello! I am new to this forum. First let me say, that I like Foundation very much and used 3 and 4 to build some small and medium websites. I've used the static versions and they worked fine. Alas, once you need to change or modify this or that, it gets really difficult very fast. So I decided to try the recommended install and get going with Foundation 5 and sass.

The installation process made me jump through a plethora of hoops: git, node,js, ruby, npm (which is not mentioned in the requirements), compass and whatnot, aside from having to do some of this stuff as root as well. It wasn't a pleasant experience,

I am not a professional programmer or webdesigner, but I'm not a newbie either. I find my way around a linux command line well enough and am (or in one case was, you may guess which one) fluent in PHP, python, javascript, shell programming, HTML and CSS.

Even so I failed on getting the install to run. I followed the steps of the recommended install, but when I open index.html in chrome (or firefox), quite bluntly - it does not show any of the foundation classes. An app.css is created and loaded just fine, but all I get to see is the vanilla UA-Style (after a bit of searching I was able to correct the names-space bug). Now, after two days and about 6 hours of dabbling I am pretty much frustrated. I do not get any error messages (bower, compass or from the browser), app.css has lots of stuff in it though no usefull foundation classes. I can't find any usefull information and am ready to give up.

Any hints would be very appreciated. I am sorry that I can not give you any error messages, as there simply are none. The styles are not loaded, which does not really surprise me, as there are none in the apps.css which otherwise is created without errors.

Regards

Darryl about 5 years ago

I agree...i got 3/4 of the way through the process and gave up because i couldn't get things working
There must be a simple step by step walk through for windows users?

James Stone about 5 years ago

I am working on a windows walk through. Basically you have to use the windows ruby installer

http://rubyinstaller.org/

and run the node.js windows installer

http://nodejs.org/download/

after that if you run

gem install foundation

then run

npm install -g bower grunt-cli

both from the cmd program / console. power shell should work too if that is your thing.

ping me on twitter if you still haven't gotten it running @jamesstoneco

Rafi Benkual about 5 years ago

@ Darryl - Here is a good step by step http://foundation.zurb.com/forum/posts/11597-how-to-install-grunt-and-libsass-on-windows

@ Peter - What Sass version are you using - run 'Sass version' in command line

Peter W about 5 years ago

Thank you for your answers. Just to make this clear: I am developing on a Linux box running Kubuntu LTS 14.04.

@Rafi: I am running Sass 3.4.3 (Selective Steve).

The index.html of the newly created project looks just fine if I add the static foundation.min.css in the header manually, but I guess that kind of defeats the purpose of using Sass in the first place.

Peter W about 5 years ago

I'm sorry to say this, but I am finally giving up, having spent way too much time trying to get this to work. I really wanted this to pan out. But if I'd stuck with the static version, I'd probably been quicker making all the changes manually.

There was a reply here this morning suggesting a compatibility issue of foundation 5 and the Sass version I am using. Which is strange, as I did no custom installation at all and used the recommended install path exclusively. There also were some some diffs but before I could try them out, the post was deleted.

Strangely enough, there now is a warning in the installation guide for the libsass version (which I am not using) concerning sass 3.4. The link there hints at a solution by altering the code but actually leads to a closed discussion thread with no information on how to get this to work.

As it is, I am very sorry to say that Foundation 5 with Sass is a hassle to set up, buggy, finally not usable and a rather frustrating experience. This saddens me because I do know how much time and effort goes into such (free!) projects and I understand how frustrating it is if such things do not work out with the intended audience.

I still appreciate the time you invest in this forum and try to help out as well as in the Foundation framework, which is really great. Thank you.

Giuseppe about 5 years ago

I had a problems with foundation 5 and compass a couple of days ago.
The fix problems with compilations and bower.json file is realy easy.

  1. Install the lastes compass gem version ( 1.1.0) using command prompt.
 [sudo] gem install compass [--version 1.1.0]
  1. Install sass gem using version 3.4.0
[sudo] gem install sass --version 3.4.0
  1. Uninstall sass gem with 3.4.3 version.

[sudo] gem uninstall sass
press 2 for select sass-gem 3.4.3v

 [sudo] gem uninstall sass
press 2 for select sass-gem 3.4.3v

Peter W about 5 years ago

@Guiseppe: Thank you very much for your effort.

Unfortunately, for me it fails at the very first step:

 ERROR:  Could not find a valid gem 'compass' (= 1.1.0) in any repository

James Stone about 5 years ago

@Peter what command is giving you that error? Did you install the compass gem? How did you install ruby? (rbenv or rvm) Do you have anti-virus installed? Can you traceroute rubygems.org and get a connection?

Peter W about 5 years ago

@James:
I used:

 sudo gem install compass --version 1.1.0

I've got the compass gem V 1.0.1 (Polaris) installed. The result of a previous run of

sudo gem install compass

I installed ruby from my packet-manager:

sudo apt-get install ruby

It is v1.9.3p484.

I've got no antivirus installed.

Though the site rubygems.org works fine in my browser, it resolves to 54.186.104.15 but does not return pings. tracepath terminates with no reply after 16 hops (somewhere behind amazons cloud border). curl rubygems.org works just fine.

Meanwhile I've installed manually from foundation-master.zip 5.4.3 (ditching the foundation CLI, git, bower, node.js, npm, libsass and grunt) and everthing works flawlessly. The jQuery-namespace problem does not occur and the app.css ist generated completely. I've tested with sass (3.4.0 and 3.4.3) and both worked, as well as with compass 1.0.1. It works too.

So my best guess is that something is broken in the convoluted installation process. Which is really strange as I've kept my initial directory from the recommended install trying to run compass and sass directly on it. In both cases the app.css is not generated with all necessary styles (no error message given) and on loading the page the jQuery error is still there and needs the namespace fix. Foundation is 5.4.3. So you see my a bit nonplussed.
And yes, I've checked permissions. Twice. Really.

Giuseppe about 5 years ago

install Ruby 1.9.3-p545 and devkit for this version ( DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe ) or

sudo apt-get install ruby-dev

Reinstall compass and sass.

Dave Wood about 5 years ago

Unfortunately im with Peter, im a newbie without bags of experience. I had everything up and running for the past three months whilst learning sass etc. Two weeks ago however i had to reset my computer due to a fault and ever since i have been unable to get it back up and running, for over a week now i have been trying everything even tutorials on here. Like Peter i appreciate the amount of work put into free projects like this but with only 2 weeks to go till i need to complete a site i feel it is now time to go back to the drawing board and start again elsewhere. Frustrated doesn't even cover it. also @ rafi i just followed that step by step guide this afternoon and whilst it is brilliantly wrote it still will not work for me

Rafi Benkual about 5 years ago

Giuesippe gave some good advice. Did you try that?

Peter W about 5 years ago

Well I've got it running now. I did not, however upgrade to compass 1.1.0. In my opinion it had nothing to do with the problem. As I explained over at http://foundation.zurb.com/forum/posts/19139-foundation-sass-installation-process it seems there was a bit of version mangling going on. The short version: The different versions of Sass and Foundation depend on each other so changing one without the other does NOT solve the problem. Even doing so failed until recently due to some weird version mismatch.

So what I did was (do NOT do this quite yet, read til the end, maybe you will come back to this, should everything else fail) to download the foundation-master.zip and copied the foundation scss branch into the bower-components directory. As soon as I did this, it worked. Yeah! But why?

I won't explain it again, as you can read up at the above link. Anyway, the problem seems to be solved now. (You may want to try this. I do not give the actual shell commands as those may be different on a Windows machine.)

  1. I deleted the bower-components directory of my project
  2. I ran bower cache clear
  3. I ran bower uninstall foundation (this may have been redundant, but I try to go through every step I took).
  4. I made sure I had 'zurb/bower-foundation" in my topmost bower.json file for the foundation version.
  5. I ran bower update
  6. I ran bower install foundation.
  7. I ran 'compass compile' (you may want to try 'compass watch')

It worked and compiled correctly, index.html looked like it should.

Now my twopence to the why:
Sass 3.4.3 needs Foundation 5.4.3 to work.
5.4.3 was regardless what bower has told you (until appearantly fixed a short while ago) actually 5.4.2.
So it did not work.
I may have had the wrong 5.4.3 in my bower cache, though I do not actually know why, I've never had 5.4.2 installed).

But there is more:
libsass does not support Sass 3.4, only 3.2. So you may want to downgrade, if you do not use compass. Use the path Giuseppe sketched out.
Furthermore Sass 3.4.3 does not work with Foundation < 5.4.3. You need to upgrade both.

I hope this helps, it cost me some hours for the last days to figure it out.

Dave Wood about 5 years ago

Brilliant news Peter, glad you have got there. I have just managed to find a solution (all be it temporary) but it works. i managed to piece together bits from this forum and others and by just deleting the !global from grunt scss file allowed me to get up and running after too many days scratching my head. i will bear in mind what you said i may try this fix soon to fix it fully

Darek Wędrychowski about 5 years ago

Peter W that deleted post you refer too was mine. I've deleted it, since it talked about the issues that I had few weeks ago when I've updated Sass to version that wasn't working with Foundation yet, but later I realized that it is already fixed, so my post was not longer valid.

Rafi Benkual almost 5 years ago

We had to make some changes to the Command to create a new project and process for updating for 5.4.5/ In 5.4.4 you will not have any issues.

More info here:
http://foundation.zurb.com/docs/changelog.html

New commands if you are on Sass 3.4 and Compass 1.0 are:
Before running Compass watch, run 'bundle' **only once per project
then to compile - 'bundle exec compass watch'

This is so you dont have to downgrade Sass versions

To know what Sass version you have
Sass -v
compass -v