Menu icon Foundation

Coder

My Posts

  • 4
    Replies
  • "Complete" download package errors

    By Pentool

    complete

    There are two errors in the console when you download the "Complete" package from this page: http://foundation.zurb.com/sites/download.html/ Open the HTML page, and you will see two "Failed to load resource" errors, due to missing map files.

    Last Reply by Marc McGee almost 4 years ago


My Comments

Pentool commented on Jozef Banuelos's post almost 4 years

Thanks for the reply Rafi.

So from what I heard you saying, including a simple download of the Sass version without any build process would be you preferred method to install?

That is correct. It's an option. Currently a "simple" install of everything produces a folder with over 9,800 files in it!!! That's nearly ten thousand files! This does not include the already globally installed npm/node universe, the foundation-cli, and their respective modules.

After nearly 7 hours of frustration today, I was able to finally install everything and do a build at the Terminal. So 7 hours and 10,000 files got me a simple starting index.html file that has some basic foundation elements featured (to start out with). I believe this is what it's called the "template".

From this point, it took me less than 5 minutes to weed out all the build files, the modules, the various invisible files stored in various directories, which reduced the 9,800 files to only 181. This included all javascript and scss files.

I created a simple npm build file (using npm init) to create a script to run sass to compile and minify the scss files I need. In the main "foundation.scss" file I can quickly comment out all the scss imports I am not using, save, sass will auto compile and spit out the final css. Done.

As long as I am doing development, I don't need to uglify the js file(s) so I can leave them as is. I only had to copy a TOTAL of 4 files (out of the 9,800) that I need: foundation.min.css, foundation.min.js, jquery.min.js, and what-input.min.js. (This last one is optional.) Once I get to the point that the site is production ready, I can simply take the two js files (or even if I have more) and copy paste them into an online js concatenator/uglifier. Takes less then a minute and I have a single js file to work with - just for those who will nitpick about the extra http request(s).

During development, I can put all my project specific styles in a separate scss file and just watch that single file to recompile with sass. Done. It's not rocket science. For me, I can't justify having 10,000 files as "templates" for a project. If I create 10 simple websites (even if each has only a single page), that's already 100,000 files (NOT counting the actual site pages)!

So someone please tell me that I am a retard (which I am), because I just don't see the forest from the trees with all this build processes that needs zillions of build files and packages and winter tires, etc, what have you.

Maybe as I work more with foundation, at some point I will see the light at the end of the tunnel and realize that yes, I do indeed need two-hundred-forty-nine-thousand-five-hundred-and-twenty-three files for a template project that only consists of a single page. But right now, I'm still in the dark :-)

Pentool commented on Rafi Benkual's post almost 4 years

Well, first, thanks for your explanation. I realize now that yes, it confused me.

But, second, I had some weird issue going on, because even though I used the same code, I could not get it working. I even created a new project starting from scratch and it just didn't work. I emptied my cache, restarted the browser, etc. Nothing. Until finally I restarted my machine which made it work. Something weird must've happened.

Anyhow. Thank you again.

Pentool commented on Rafi Benkual's post almost 4 years

Thanks James! Indeed, your sample does work. Sorry, it's my fault. I forgot to specify that I don't want the responsive menu to work for "medium" screens. I want it to work for "small" screens.

So where it says:

<div class="title-bar" data-responsive-toggle="ex-menu" data-hide-for="medium">

I have changed "data-hide-for" from "medium" to "small". And that is where it doesn't work.

Pentool commented on Pentool's post almost 4 years

UPDATE

It seems there's some issue with the downloaded minified code. When I took the original css and compressed it, the error went away.

The error for the jQuery map was solved when I just simply linked to the online, minified jQuery CDN version (https://code.jquery.com/jquery-2.2.0.min.js).

So something is up with them downloaded packages.

Pentool commented on Rafi Benkual's post almost 4 years

At the moment, I can't even get the responsive navigation menu working.

  1. Go to this page and download the "Complete" package:
    http://foundation.zurb.com/sites/download.html/#customizeFoundation

  2. Go to this documentation page: http://foundation.zurb.com/sites/docs/responsive-navigation.html and copy the last sample code in the box at the very bottom of the page (under the "Responsive Toggle" heading.)

  3. Go to the html page that you just downloaded with the "Complete" package, and remove everything from the body tag (except the javascript stuff at the bottom of course) and paste the sample code from the documentation page.

It doesn't work!

When you change the browser window width to narrow, the menu is not changing to the black, responsive/mobile style menu. It does changing on the documentation page itself, but not when you copy/paste the sample code into the downloaded "Complete" template.

So it seems the documentation page is using something very different that seems to be missing from the download package...or...?

Safari 9.0.3
OS X El Crapitan 10.11.3

Pentool commented on Yan Wong's post almost 4 years

This is still an issue. I've recently made a post about it also (http://foundation.zurb.com/forum/posts/38501-complete-download-package-errors) and just found this thread.

[Error] Failed to load resource: The requested URL was not found on this server. (foundation.css.map, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (jquery.min.map, line 0)

Safari 9.0.3
El Crapitan 10.11.3

Pentool commented on Pentool's post almost 4 years

Ok, scratch that. This seems to be the case with all download packages (complete, essential, custom).

[Error] Failed to load resource: The requested URL was not found on this server. (foundation.css.map, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (jquery.min.map, line 0)

Safari 9.0.3
OS X 10.11.3

Pentool commented on Jozef Banuelos's post almost 4 years

Thanks for the response! But I don't think we are on the same page. Where did "bower_components" came from? There's no such directory. I downloaded foundation 4 different ways and none of them has "bowwer_components" directory.

The various download methods can be found on this page:
http://foundation.zurb.com/sites/download.html/#customizeFoundation

Download method 1:
Use the "Complete" download.

Download method 2:
Use the "Essential" download.

Download method 3:
Use "Custom" and include all assets.

Download method 4:
Install via SCSS. Well, I outlined my frustration with that method above, but let's grab the templates from...

Basic Template:
http://foundation.zurb.com/sites/docs/installation.html
This doesn't have any "bower_components" folder.

Or let's go with the ZURB Template:
https://github.com/zurb/foundation-zurb-template
That doesn't have a folder called "bower_components" either.

Download method 5:
At this point my agony and frustration is a tad much for trying to make this simple responsive menu working for about 4-5 hours now. But let's continue...

At the Terminal install foundation as such:
npm install foundation
Nope. No "bower_components" folder in sight.

Download method 6:
Let's take it one step further. Again, at the Terminal enter:
npm install foundation-sites
Again, no "bower_components" folder.

So where, in your example, does the folder "bower_components" comes from?

However...

At this point, I am really frustrated and so I started a new blank project. Not that my previous attempt was any complicated, since it only had a simple grid and I was just trying to add a responsive menu to the page. So...

  1. Go to this page and download the "Complete" package:
    http://foundation.zurb.com/sites/download.html/#customizeFoundation

  2. Go to this documentation page: http://foundation.zurb.com/sites/docs/responsive-navigation.html and copy the last sample code in the box at the very bottom of the page (under the "Responsive Toggle" heading.)

  3. Go to the html page that you just downloaded with the "Complete" package, and remove everything from the tag (except the javascript stuff at the bottom) and paste the sample code from the documentation page.

IT DOESN'T WORK!

When you change the browser window width to very narrow, the menu is not changing to the black, responsive/mobile style menu. It does changing on the documentation page itself, but not when you copy/paste the sample code into the downloaded "Complete" template.

FRUSTRATING! VERY FRUSTRATING!

PS: I am using Safari 9.0.3 on the Mac (El Crapitan 10.11.3) but this should not make any difference, I believe.

Pentool commented on Jozef Banuelos's post almost 4 years

I am having the same issue. The problem is, there's no "vendor" folder in the downloaded foundation folders.

I think my major problem is that nowadays everything is grunt/gulp/npm/node/bower and such when it comes to front-end dev. I don't have experience with those so I've been trying to catch up with them in the past month or so., Still, I find them confusing, insanely bloated and a major headache for trying to achieve something simple. I really don't like to use any of those tools/technologies because everything has a dependency and I end up with 6,000 files, scattered all over in dependency folders.

Why can't I simply download a zipped EVERYTHING that includes the sass files with the latest and greatest, including the "vendor" js files in one go?

I do have npm and foundation-cli installed. Doing an "npm install foundation" or "npm install foundation-cli" will not install the sass workflow.

When I download the "complete" package (from http://foundation.zurb.com/sites/download.html/#customizeFoundation), that does give me the "vendor" folder for the necessary js, but, again, it does not create the sass workflow.

It seems that in order to create a sass workflow, git is required (as pointed out in the docs). I don't want to install git because I am using SourceTree, which is already a git client. But I can't input the git URL for the correct sass workflow location (which would also include the "vendor" js folder" because I don't know what it the correct git URL.

The git URLs mentioned at http://foundation.zurb.com/sites/docs/installation.html or only pointing to templates and none of them templates include the "vendor" specific js folder.

I know am just a noob trying to get this started, but so far I find this workflow so convoluted, complex, and bloated and I have no understanding why would anyone use this!? What happened a the simple workflow:

  1. Zip all the required files (for a sass workflow, and the required "vendor" specific js files) and place the package somewhere that I can download it.
  2. Download the zip file
  3. Extract
  4. Grab the needed files and go.

What could I be possibly missing for this simple workflow?

Do you have any recommendation where can I download the foundation project files that

  1. Use the sass workflow
  2. Include the necessary "vendor" folder with the correct js file?

Thanks.

Posts Followed




Following

    No Content

Followers

My Posts


My Comments

You commented on Jozef Banuelos's post almost 4 years

Thanks for the reply Rafi.

So from what I heard you saying, including a simple download of the Sass version without any build process would be you preferred method to install?

That is correct. It's an option. Currently a "simple" install of everything produces a folder with over 9,800 files in it!!! That's nearly ten thousand files! This does not include the already globally installed npm/node universe, the foundation-cli, and their respective modules.

After nearly 7 hours of frustration today, I was able to finally install everything and do a build at the Terminal. So 7 hours and 10,000 files got me a simple starting index.html file that has some basic foundation elements featured (to start out with). I believe this is what it's called the "template".

From this point, it took me less than 5 minutes to weed out all the build files, the modules, the various invisible files stored in various directories, which reduced the 9,800 files to only 181. This included all javascript and scss files.

I created a simple npm build file (using npm init) to create a script to run sass to compile and minify the scss files I need. In the main "foundation.scss" file I can quickly comment out all the scss imports I am not using, save, sass will auto compile and spit out the final css. Done.

As long as I am doing development, I don't need to uglify the js file(s) so I can leave them as is. I only had to copy a TOTAL of 4 files (out of the 9,800) that I need: foundation.min.css, foundation.min.js, jquery.min.js, and what-input.min.js. (This last one is optional.) Once I get to the point that the site is production ready, I can simply take the two js files (or even if I have more) and copy paste them into an online js concatenator/uglifier. Takes less then a minute and I have a single js file to work with - just for those who will nitpick about the extra http request(s).

During development, I can put all my project specific styles in a separate scss file and just watch that single file to recompile with sass. Done. It's not rocket science. For me, I can't justify having 10,000 files as "templates" for a project. If I create 10 simple websites (even if each has only a single page), that's already 100,000 files (NOT counting the actual site pages)!

So someone please tell me that I am a retard (which I am), because I just don't see the forest from the trees with all this build processes that needs zillions of build files and packages and winter tires, etc, what have you.

Maybe as I work more with foundation, at some point I will see the light at the end of the tunnel and realize that yes, I do indeed need two-hundred-forty-nine-thousand-five-hundred-and-twenty-three files for a template project that only consists of a single page. But right now, I'm still in the dark :-)

You commented on Rafi Benkual's post almost 4 years

Well, first, thanks for your explanation. I realize now that yes, it confused me.

But, second, I had some weird issue going on, because even though I used the same code, I could not get it working. I even created a new project starting from scratch and it just didn't work. I emptied my cache, restarted the browser, etc. Nothing. Until finally I restarted my machine which made it work. Something weird must've happened.

Anyhow. Thank you again.

You commented on Rafi Benkual's post almost 4 years

Thanks James! Indeed, your sample does work. Sorry, it's my fault. I forgot to specify that I don't want the responsive menu to work for "medium" screens. I want it to work for "small" screens.

So where it says:

<div class="title-bar" data-responsive-toggle="ex-menu" data-hide-for="medium">

I have changed "data-hide-for" from "medium" to "small". And that is where it doesn't work.

You commented on Pentool's post almost 4 years

UPDATE

It seems there's some issue with the downloaded minified code. When I took the original css and compressed it, the error went away.

The error for the jQuery map was solved when I just simply linked to the online, minified jQuery CDN version (https://code.jquery.com/jquery-2.2.0.min.js).

So something is up with them downloaded packages.

You commented on Rafi Benkual's post almost 4 years

At the moment, I can't even get the responsive navigation menu working.

  1. Go to this page and download the "Complete" package:
    http://foundation.zurb.com/sites/download.html/#customizeFoundation

  2. Go to this documentation page: http://foundation.zurb.com/sites/docs/responsive-navigation.html and copy the last sample code in the box at the very bottom of the page (under the "Responsive Toggle" heading.)

  3. Go to the html page that you just downloaded with the "Complete" package, and remove everything from the body tag (except the javascript stuff at the bottom of course) and paste the sample code from the documentation page.

It doesn't work!

When you change the browser window width to narrow, the menu is not changing to the black, responsive/mobile style menu. It does changing on the documentation page itself, but not when you copy/paste the sample code into the downloaded "Complete" template.

So it seems the documentation page is using something very different that seems to be missing from the download package...or...?

Safari 9.0.3
OS X El Crapitan 10.11.3

You commented on Yan Wong's post almost 4 years

This is still an issue. I've recently made a post about it also (http://foundation.zurb.com/forum/posts/38501-complete-download-package-errors) and just found this thread.

[Error] Failed to load resource: The requested URL was not found on this server. (foundation.css.map, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (jquery.min.map, line 0)

Safari 9.0.3
El Crapitan 10.11.3

You commented on Pentool's post almost 4 years

Ok, scratch that. This seems to be the case with all download packages (complete, essential, custom).

[Error] Failed to load resource: The requested URL was not found on this server. (foundation.css.map, line 0)
[Error] Failed to load resource: The requested URL was not found on this server. (jquery.min.map, line 0)

Safari 9.0.3
OS X 10.11.3

You commented on Jozef Banuelos's post almost 4 years

Thanks for the response! But I don't think we are on the same page. Where did "bower_components" came from? There's no such directory. I downloaded foundation 4 different ways and none of them has "bowwer_components" directory.

The various download methods can be found on this page:
http://foundation.zurb.com/sites/download.html/#customizeFoundation

Download method 1:
Use the "Complete" download.

Download method 2:
Use the "Essential" download.

Download method 3:
Use "Custom" and include all assets.

Download method 4:
Install via SCSS. Well, I outlined my frustration with that method above, but let's grab the templates from...

Basic Template:
http://foundation.zurb.com/sites/docs/installation.html
This doesn't have any "bower_components" folder.

Or let's go with the ZURB Template:
https://github.com/zurb/foundation-zurb-template
That doesn't have a folder called "bower_components" either.

Download method 5:
At this point my agony and frustration is a tad much for trying to make this simple responsive menu working for about 4-5 hours now. But let's continue...

At the Terminal install foundation as such:
npm install foundation
Nope. No "bower_components" folder in sight.

Download method 6:
Let's take it one step further. Again, at the Terminal enter:
npm install foundation-sites
Again, no "bower_components" folder.

So where, in your example, does the folder "bower_components" comes from?

However...

At this point, I am really frustrated and so I started a new blank project. Not that my previous attempt was any complicated, since it only had a simple grid and I was just trying to add a responsive menu to the page. So...

  1. Go to this page and download the "Complete" package:
    http://foundation.zurb.com/sites/download.html/#customizeFoundation

  2. Go to this documentation page: http://foundation.zurb.com/sites/docs/responsive-navigation.html and copy the last sample code in the box at the very bottom of the page (under the "Responsive Toggle" heading.)

  3. Go to the html page that you just downloaded with the "Complete" package, and remove everything from the tag (except the javascript stuff at the bottom) and paste the sample code from the documentation page.

IT DOESN'T WORK!

When you change the browser window width to very narrow, the menu is not changing to the black, responsive/mobile style menu. It does changing on the documentation page itself, but not when you copy/paste the sample code into the downloaded "Complete" template.

FRUSTRATING! VERY FRUSTRATING!

PS: I am using Safari 9.0.3 on the Mac (El Crapitan 10.11.3) but this should not make any difference, I believe.

You commented on Jozef Banuelos's post almost 4 years

I am having the same issue. The problem is, there's no "vendor" folder in the downloaded foundation folders.

I think my major problem is that nowadays everything is grunt/gulp/npm/node/bower and such when it comes to front-end dev. I don't have experience with those so I've been trying to catch up with them in the past month or so., Still, I find them confusing, insanely bloated and a major headache for trying to achieve something simple. I really don't like to use any of those tools/technologies because everything has a dependency and I end up with 6,000 files, scattered all over in dependency folders.

Why can't I simply download a zipped EVERYTHING that includes the sass files with the latest and greatest, including the "vendor" js files in one go?

I do have npm and foundation-cli installed. Doing an "npm install foundation" or "npm install foundation-cli" will not install the sass workflow.

When I download the "complete" package (from http://foundation.zurb.com/sites/download.html/#customizeFoundation), that does give me the "vendor" folder for the necessary js, but, again, it does not create the sass workflow.

It seems that in order to create a sass workflow, git is required (as pointed out in the docs). I don't want to install git because I am using SourceTree, which is already a git client. But I can't input the git URL for the correct sass workflow location (which would also include the "vendor" js folder" because I don't know what it the correct git URL.

The git URLs mentioned at http://foundation.zurb.com/sites/docs/installation.html or only pointing to templates and none of them templates include the "vendor" specific js folder.

I know am just a noob trying to get this started, but so far I find this workflow so convoluted, complex, and bloated and I have no understanding why would anyone use this!? What happened a the simple workflow:

  1. Zip all the required files (for a sass workflow, and the required "vendor" specific js files) and place the package somewhere that I can download it.
  2. Download the zip file
  3. Extract
  4. Grab the needed files and go.

What could I be possibly missing for this simple workflow?

Do you have any recommendation where can I download the foundation project files that

  1. Use the sass workflow
  2. Include the necessary "vendor" folder with the correct js file?

Thanks.

Posts Followed

Following

  • No Content

Followers

  • No Content