Menu icon Foundation
Trouble installing a new foundation project

Good afternoon.

I am a seasoned PHP developer really trying to wrap my head around how the sass/node/bower/etc/etc/etc all plays together.

First, let me start by saying: the ***only*** reason I am going down this rabbit hole is because I need a 100% page width layout for my already existing Foundation 6 project.  Project is done, client wants some visual tweaks - one of them being whole page width layout.

So I figured.. the documentation keeps blabbing about how EASY it is to customize this whole thing with a single line edit and a single command and... PRESTO!  Right?!  Erm... no.

So began the headache...

Step 1:  Install node (as root) (I think?)

apt-get install nodejs

-> This seems to have gone well.

Step 2: Install foundation (as root) with npm?

npm install --global foundation-cli

Here is the result:

------------------------------------------

npm WARN engine foundation-cli@2.1.0: wanted: {"node":">=0.10.33"} (current: {"node":"0.10.25","npm":"1.4.21"})

npm WARN deprecated graceful-fs@3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.

npm WARN engine deep-extend@0.4.1: wanted: {"node":">=0.12.0","iojs":">=1.0.0"} (current: {"node":"0.10.25","npm":"1.4.21"})

/usr/local/bin/foundation -> /usr/local/lib/node_modules/foundation-cli/bin/foundation.js

foundation-cli@2.1.0 /usr/local/lib/node_modules/foundation-cli

├── is-root@1.0.0

├── colors@1.1.2

├── async@0.9.2

├── nopt@3.0.6 (abbrev@1.0.7)

├── string-length@1.0.1 (strip-ansi@3.0.1)

├── semver@4.3.6

├── which@1.2.4 (isexe@1.1.2, is-absolute@0.1.7)

├── multiline@1.0.2 (strip-indent@1.0.1)

├── paint-by-number@1.0.0 (chalk@1.1.1)

├── rimraf@2.5.2 (glob@7.0.3)

├── update-notifier@0.2.2 (is-npm@1.0.0, chalk@0.5.1, semver-diff@2.1.0, latest-version@1.0.1, configstore@0.3.2)

├── inquirer@0.8.5 (ansi-regex@1.1.1, figures@1.5.0, through@2.3.8, readline2@0.1.1, cli-width@1.1.1, chalk@1.1.1, lodash@3.10.1, rx@2.5.3)

├── npm@2.15.2

└── bower@1.7.7

--------------------------------------------------------------------------------

Let me take a moment to point out: whoever wrote npm really needs a lesson is good application design.  This output is garbage and hardly readable.  I gather from the output that it is wanting node version 0.10.33 or greater and I have 0.10.25.  But I am not sure if the install actually failed, or the npm command is just complaining and installed foundation-cli anyway.

And if it DID install, is "foundation-cli" now a node.js command/executable?  I am asuming at this point I can run "foundation new" to create my project and - underneath the hood - the node.js executable is going to provide me everything I need to start a foundation project - correct?  Or am I supposed to git clone a repo first?  The docs get real fuzzy here.

So anyway, lets assume I can move to the next step, install a new foundation project (as normal user):

foundation new

-> I answer "A Web App" at the prompt <enter>

-> I enter the project name (foo) <enter>

Here is the result:

-------------------------------------------------------------------------------------

There were some problems during the installation.

 

 ✓ New project folder created.

 ✗ Node modules not installed. Try running npm install manually.

 ✓ Bower components installed.

 

Once you've resolved the above issues, run foundation watch while inside the itl folder.

------------------------------------------------------------------------------------------------------

Now I have googled around for a solution, but am really stuck here.  I have spent the past decade primarily doing back-end and back-end-front-end development and have largely been out of any real CSS/HTML layout.  So I kinda feel like Justin Bieber got ahold of modern web development aproaches and added WAY too much complexity to something that really should be simple.

I always thought sass was just a simple command interpreter you ran on a directory of .sass files and got a simple .css spit out?  Perhaps there is a more sane way to go about doing this?  Or perhaps there is simply a version of foundation that is full page width?  Would it be more practical to git-clone the foundation project and run the command?  Or will I run into issues here?

Once the "foundation new" command runs, there is some stuff hanging around in the directory, but.. 

My OS is Ubuntu 15.10.  Everything is up-to-date.

Somebody throw a perl/php dinasaur a bone here.  Please!

 

 

installnpm

Good afternoon.

I am a seasoned PHP developer really trying to wrap my head around how the sass/node/bower/etc/etc/etc all plays together.

First, let me start by saying: the ***only*** reason I am going down this rabbit hole is because I need a 100% page width layout for my already existing Foundation 6 project.  Project is done, client wants some visual tweaks - one of them being whole page width layout.

So I figured.. the documentation keeps blabbing about how EASY it is to customize this whole thing with a single line edit and a single command and... PRESTO!  Right?!  Erm... no.

So began the headache...

Step 1:  Install node (as root) (I think?)

apt-get install nodejs

-> This seems to have gone well.

Step 2: Install foundation (as root) with npm?

npm install --global foundation-cli

Here is the result:

------------------------------------------

npm WARN engine foundation-cli@2.1.0: wanted: {"node":">=0.10.33"} (current: {"node":"0.10.25","npm":"1.4.21"})

npm WARN deprecated graceful-fs@3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.

npm WARN engine deep-extend@0.4.1: wanted: {"node":">=0.12.0","iojs":">=1.0.0"} (current: {"node":"0.10.25","npm":"1.4.21"})

/usr/local/bin/foundation -> /usr/local/lib/node_modules/foundation-cli/bin/foundation.js

foundation-cli@2.1.0 /usr/local/lib/node_modules/foundation-cli

├── is-root@1.0.0

├── colors@1.1.2

├── async@0.9.2

├── nopt@3.0.6 (abbrev@1.0.7)

├── string-length@1.0.1 (strip-ansi@3.0.1)

├── semver@4.3.6

├── which@1.2.4 (isexe@1.1.2, is-absolute@0.1.7)

├── multiline@1.0.2 (strip-indent@1.0.1)

├── paint-by-number@1.0.0 (chalk@1.1.1)

├── rimraf@2.5.2 (glob@7.0.3)

├── update-notifier@0.2.2 (is-npm@1.0.0, chalk@0.5.1, semver-diff@2.1.0, latest-version@1.0.1, configstore@0.3.2)

├── inquirer@0.8.5 (ansi-regex@1.1.1, figures@1.5.0, through@2.3.8, readline2@0.1.1, cli-width@1.1.1, chalk@1.1.1, lodash@3.10.1, rx@2.5.3)

├── npm@2.15.2

└── bower@1.7.7

--------------------------------------------------------------------------------

Let me take a moment to point out: whoever wrote npm really needs a lesson is good application design.  This output is garbage and hardly readable.  I gather from the output that it is wanting node version 0.10.33 or greater and I have 0.10.25.  But I am not sure if the install actually failed, or the npm command is just complaining and installed foundation-cli anyway.

And if it DID install, is "foundation-cli" now a node.js command/executable?  I am asuming at this point I can run "foundation new" to create my project and - underneath the hood - the node.js executable is going to provide me everything I need to start a foundation project - correct?  Or am I supposed to git clone a repo first?  The docs get real fuzzy here.

So anyway, lets assume I can move to the next step, install a new foundation project (as normal user):

foundation new

-> I answer "A Web App" at the prompt <enter>

-> I enter the project name (foo) <enter>

Here is the result:

-------------------------------------------------------------------------------------

There were some problems during the installation.

 

 ✓ New project folder created.

 ✗ Node modules not installed. Try running npm install manually.

 ✓ Bower components installed.

 

Once you've resolved the above issues, run foundation watch while inside the itl folder.

------------------------------------------------------------------------------------------------------

Now I have googled around for a solution, but am really stuck here.  I have spent the past decade primarily doing back-end and back-end-front-end development and have largely been out of any real CSS/HTML layout.  So I kinda feel like Justin Bieber got ahold of modern web development aproaches and added WAY too much complexity to something that really should be simple.

I always thought sass was just a simple command interpreter you ran on a directory of .sass files and got a simple .css spit out?  Perhaps there is a more sane way to go about doing this?  Or perhaps there is simply a version of foundation that is full page width?  Would it be more practical to git-clone the foundation project and run the command?  Or will I run into issues here?

Once the "foundation new" command runs, there is some stuff hanging around in the directory, but.. 

My OS is Ubuntu 15.10.  Everything is up-to-date.

Somebody throw a perl/php dinasaur a bone here.  Please!