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 [email protected]: wanted: {"node":">=0.10.33"} (current: {"node":"0.10.25","npm":"1.4.21"})

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

npm WARN engine [email protected]: 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

[email protected] /usr/local/lib/node_modules/foundation-cli

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected] ([email protected])

├── [email protected] ([email protected])

├── [email protected]

├── [email protected] ([email protected], [email protected])

├── [email protected] ([email protected])

├── [email protected] ([email protected])

├── [email protected] ([email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected]

└── [email protected]

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

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 [email protected]: wanted: {"node":">=0.10.33"} (current: {"node":"0.10.25","npm":"1.4.21"})

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

npm WARN engine [email protected]: 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

[email protected] /usr/local/lib/node_modules/foundation-cli

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected] ([email protected])

├── [email protected] ([email protected])

├── [email protected]

├── [email protected] ([email protected], [email protected])

├── [email protected] ([email protected])

├── [email protected] ([email protected])

├── [email protected] ([email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected]

└── [email protected]

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

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!