Menu icon Foundation
Ubuntu installation with CLI

hi,
i have created enough projects using the standalone Foundation framework (extracted everything in a folder and building the css and html).
I think you can really unveal the power of Foundation using Sass and the CLI.
I find it incredibly difficult to set up the environment. I am using Ubuntu 14.04 LTS OS.
The instalation guide fails and every time i have a different problem i cannot resolve even though i try hard for long hours.
Is there an official Ubuntu guide out there that explains step by step?

so i have created the _custom.scss file inside the scss directory and imported it through the app.scss file.
I add some css inside the _custom.scss file the i run "compass watch" but nothing happens. there is no css update message and the index.html page has no styling at all. it is just the html one below the other. thus the changes i make have no effect.

i have really tried a lot of stuff and need some help.

thanks

ubuntuinstallationerrorscli

hi,
i have created enough projects using the standalone Foundation framework (extracted everything in a folder and building the css and html).
I think you can really unveal the power of Foundation using Sass and the CLI.
I find it incredibly difficult to set up the environment. I am using Ubuntu 14.04 LTS OS.
The instalation guide fails and every time i have a different problem i cannot resolve even though i try hard for long hours.
Is there an official Ubuntu guide out there that explains step by step?

so i have created the _custom.scss file inside the scss directory and imported it through the app.scss file.
I add some css inside the _custom.scss file the i run "compass watch" but nothing happens. there is no css update message and the index.html page has no styling at all. it is just the html one below the other. thus the changes i make have no effect.

i have really tried a lot of stuff and need some help.

thanks

Brian Tan almost 4 years ago

Foundation 6 template setup requires nodejs and git. Install these via apt-get or whatever package manager, or download from nodejs.org and git-scm.com . Then,

run as root or sudo
# npm -gS install bower
# npm -gS install foundation-cli

run as user in a project parent directory
$ cd {project_parent}
$ foundation new 
create say newproject

$ cd newproject
$ foundation watch

kostas almost 4 years ago

hi Brian,
thanks so much for the answer. I hope you will help me short it out eventually.
After giving:

npm -gS install foundation-cli

i got the error messages

```HTML npm ERR! Linux 3.19.0-49-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "-gS" "install" "foundation-cli"
npm ERR! node v5.6.0
npm ERR! npm v3.6.0
npm ERR! path /home/xbass/.npm/npm/2.14.20
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall mkdir

npm ERR! Error: EACCES: permission denied, mkdir '/home/xbass/.npm/npm/2.14.20'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES: permission denied, mkdir '/home/xbass/.npm/npm/2.14.20']
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'mkdir',
npm ERR! path: '/home/xbass/.npm/npm/2.14.20',
npm ERR! parent: 'foundation-cli' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR! /home/xbass/npm-debug.log

kostas almost 4 years ago

hi,
everything went fine eventually. i had to add sudo to all commands like you mentioned.
now when i give foundation watch i get the error: Could not find command "watch".

the "compass watch" command is working.

Now i created the _custom.scss file inside the scss folder and also imported it into the app.scss file.

When i add a css rule inside the _custom.scss file there no update in the terminal window and the change has no effect, like before.

thanks

Brian Tan almost 4 years ago

Hi Kostas

F6 foundation is a symlink in /usr/bin or /usr/local/bin to ../lib/node_modules/foundation-cli/bin/foundation.js It happened to be the same name as as F5 client. If you have existing F5 client, you may have to remove the F5 foundation client, as per http://foundation.zurb.com/sites/docs/installation.html#command-line-tool

# gem uninstall foundation

kostas almost 4 years ago

hi,
i uninstalled the old foundation.

now when i give :

foundation new my_project

it gives:

bash: /usr/local/bin/foundation: No such file or directory

Brian Tan almost 4 years ago

I think system still looking for old foundation in /usr/local/bin. May have to login again. Can you try /usr/bin/foundation new ?

kostas almost 4 years ago

it worked!

i need to add the /usr/bin/foundation first.

also the same for the foundation watch command it has to be:

/usr/bin/foundation watch.

but still the _custom.scss commands are not recognised.

i can see that the terminal window now is updated when i click save on the editor, but hte change does not take place in the index.html file.

kostas almost 4 years ago

in the previous tep when i created the project
i chose a foundation with sass compiler project not a template.

Brian Tan almost 4 years ago

I'm assuming you setup basic template. Does css/app.css reflect the changes?

Edit: ok zurb template. Check timestamp and content of dist/assets/css/app.css file.

kostas almost 4 years ago

Yes the app.css reflects the changes. i can see the rule from custom.scss appears in the app.css file

kostas almost 4 years ago

it looks like finally the changes are overriden.

Brian Tan almost 4 years ago

Please click HELPFUL if my posts help you. Thanks.

kostas almost 4 years ago

ok just did it and followed your profile :)
thanks for the great help. it looks you know foundation in depth.
Could you please troubleshoot my last question as well and propose me of some good reading/web site on the Foundation framework.
thanks

Brian Tan almost 4 years ago

which one is that?

kostas almost 4 years ago

Yes the app.css reflects the changes. i can see the rule from custom.scss appears in the app.css file but i cannot see the css taking place on the page.

i set a

body{background:brown;}

rule in the custm.scss file but i don't see the index.html page having a brown background.

Inspection with firebug gives me the same rule further in the app.css file on line 386. My custom css is written on line 12

Brian Tan almost 4 years ago

Not sure if the css line alone is effective. You probably want to take a look at $body-background in _settings.scss

kostas almost 4 years ago

ok got it,
i need to get familiar with the new environment.
If you could suggest some good readings or websites about foundation CLI and sass i would be gratefull.

thanks so much for the help you are great!!

Brian Tan almost 4 years ago

You're welcome. I think there are many sass tutorials out there. But you can probably start here http://sass-lang.com/guide