Menu icon Foundation
How do you use "bower_components"

Are you supposed to be editing any of the files in the "bower_components" folder? I understand that it makes it easy for updating any of those files using the "foundation update" command but that would over-write any changes made.

So how are you supposed to use the files provided when using the Sass Foundation setup (I followed the steps here: http://foundation.zurb.com/docs/sass.html). The instructions just seems to end.. and doesn't tell you how to best make use of the resources that gets installed.

Do I copy all the files from bower_components folder to where I want them to be on my server?

To add to the confusion the Foundation documentation in several places refer to other files than the ones referenced in the sample index.html file.

For example when installing a fresh SASS/Compass project it gives you a sample index.html file that uses:

bower_components/modernizr/modernizr.js
bower_components/jquery/jquery.js

But looking at both the docs and then in the folders downloaded, there are also files located:

bower_components/foundation/js/vendor/custom.modernizr.js (smaller file than the one above)
bower_components/foundation/js/vendor/jquery.js

Why are there two different ones? Which ones are you supposed to use?

There is also discrepancies with Normalize.css. In the docs it says if you use Gem you don't have to include the css file, however looking at the css created it does not contain any of the Normalize.css styles. So I do have to either include the file or import the styles through Sass, or?

It just seems very messy and not clear at all how you are supposed to use the bower components.

bowerSasscssjs

Are you supposed to be editing any of the files in the "bower_components" folder? I understand that it makes it easy for updating any of those files using the "foundation update" command but that would over-write any changes made.

So how are you supposed to use the files provided when using the Sass Foundation setup (I followed the steps here: http://foundation.zurb.com/docs/sass.html). The instructions just seems to end.. and doesn't tell you how to best make use of the resources that gets installed.

Do I copy all the files from bower_components folder to where I want them to be on my server?

To add to the confusion the Foundation documentation in several places refer to other files than the ones referenced in the sample index.html file.

For example when installing a fresh SASS/Compass project it gives you a sample index.html file that uses:

bower_components/modernizr/modernizr.js
bower_components/jquery/jquery.js

But looking at both the docs and then in the folders downloaded, there are also files located:

bower_components/foundation/js/vendor/custom.modernizr.js (smaller file than the one above)
bower_components/foundation/js/vendor/jquery.js

Why are there two different ones? Which ones are you supposed to use?

There is also discrepancies with Normalize.css. In the docs it says if you use Gem you don't have to include the css file, however looking at the css created it does not contain any of the Normalize.css styles. So I do have to either include the file or import the styles through Sass, or?

It just seems very messy and not clear at all how you are supposed to use the bower components.

Bjorn Blomqvist almost 6 years ago

Not sure what happened to the line breaks...

Is it advisable to simple copy /bower_components/foundation/ to the root of your project and work with those instead?

Toby Stokes almost 6 years ago

You shouldn't be editing anything in that folder, no. That's the basic 'stuff' of foundation, and the idea is that bower can be used to update that when new versions are available.

So ideally, you want to use bower to check out that stuff in the root of your project in the first place, but if you're not keen on using bower and don't mind updating Foundation manually if a new version comes out, then theoretically, yes you could just copy it's contents to your project. But you'd be missing a trick!

Bjorn Blomqvist almost 6 years ago

Do you mean I keep the folder structure and upload the entire "bower_components" folder to my server and use the files provided as they are?

Or am I missing something.. do I have to learn bower to actually use Foundation?

Toby Stokes almost 6 years ago

If you navigate to the root of your project folder, and then install bower, then it will be in the right place! I haven't tried it, but I see no reason why you couldn't just copy the bower_components folder elsewhere.

If you've got that folder already, then I think you can get away with no more bower knowledge than that.

Bo Sjosten almost 6 years ago

Sorry for chiming in, but I am confused about the same issues as Bjorn.

For instance, why are there two instances of jquery in different places in the project, like Bjorn points out?

Also the samples give different paths than what I find I need to use, the end of my files look like this:

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

And what is the app.js file supposed to do? It also contains the $(document).foundation(); statement.

Am I missing something?

/Bo

J. James almost 6 years ago

Toby, just copying the bower components into your project file doesn't work because of those 2 duplicate files. Deleting the duplicates doesn't work either.

In F4 I had no trouble using the standalone with Codequery - not in F5.

Steve Trask almost 6 years ago

I was searching for the answer also, then I ran a test project to check the index file and below it shows this in the head:

<link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>

And then at the bottom:

<script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>

app.js has inside:

      $(document).foundation();

So this looks like the duplication is not there any more and the correct way is to copy the bower_components folder when you deploy to live.

Just my thinking but hope this helps

Henrique Dias over 5 years ago

Can I delete the next folders: "bower_components", "scss" and "languages"? I'm using only css (with file app.css) but I can delete these folders?

Regards,

P.S.: Sorry for my english.

Chris Matthias over 5 years ago

If you are only using the CSS part of Foundation and aren't familiar with bower/grunt/sass and all that then you should just download the "Default CSS" version of the library at http://foundation.zurb.com/develop/download.html

The version of Foundation you check out from Git is intended more for advanced development using the framework and SASS.

The "Default CSS" version doesn't have those folders you want to delete. If you go that route, however you will run into issues with easily updating the Foundation library in your project which is what the SASS/bower workflow is for.

Chris Matthias over 5 years ago

Everyone else who wants to use the bower and grunt can use an adapted Gruntfile.js to copy the bower_components scripts to a /js/ folder or anywher you'd like them in your project.

If you have grunt/npm installed then just run: npm install grunt-contrib-copy --save-dev to install the grunt copy utility.

Next, add your 'copy' method to your Gruntfile.js:


copy: {
main: {
expand: true,
cwd: 'bower_components',
src: '**',
dest: 'js'
},
}

Then add grunt.loadNpmTasks('grunt-contrib-copy'); to the other npm tasks in your Gruntfile.js. You can see my Gruntfile i have for a project that uses the 'copy' method as well as some minification and concatenation: https://github.com/thetrickster/FoundationPress-child/blob/master/Gruntfile.js

Henrique Dias over 5 years ago

Thanks! =D

Greg Gunner over 5 years ago

It would be great if the Sass Foundation setup page gave more details on Grunt, Libsass, etc. My first attempt at that page led me to run away. But slowly I've been clearing the understanding and getting to grips.

So for new people, it would really help if Zurb just gave a little more help on how to get started with zurb from the ground up. Perhaps as an article.

That's my vote.

Aaron Khare over 5 years ago

The code Chris Matthias gave works when you enter the following in the command line

 grunt copy

However, it copies the entire 'bower_components' folder contents into your 'dest' folder, which is a little overkill, if you only plan on uploading it to your server and are looking at non-webapp uses, I guess.

I tweaked it so that it only copies the .js files inside 'bower_components' - including subdirectories.
It now goes like this:

copy: {
      main: {
        expand: true,
        cwd: 'bower_components/',
        src: ['**/*.js'],
        dest: 'js/'
      },
},

This still copies some bloat, especially from the 'modernizer' and 'foundation' folders, but it is lighter.
You obviously also have to prefix all the links in your .html pages with your destination folder name, so src="bower_components/foo/abc.js" becomes src="dest_folder_name/foo/abc.js"

Reference: http://gruntjs.com/configuring-tasks#globbing-patterns

Ps. You could also flatten the folder structure of the js files copied, leaving just the js files (no folders) using the options - flatten: true and filter: 'isFile'

Jim Preston over 5 years ago

My impression as a newbie is that the Bower files are only used in development and compiled into files in _css/ and _js/ folders for production.

For example you use Grunt and/or Compass to compile _custom.scss, _settings.scss and app.scss into app.css and then app.css is uploaded to production. Same routine on the JS side with Grunt. Minify with Uglify in Grunt.

Use a Grunt task per above to copy the vendor files, such as jquery.js, to your production folders such as root/_js/

I agree with others. Getting our heads around this system, even as a coder, it a bitch and a huge time sink. I have everything working but not with the Bower files yet.

Jim
Santa Clara, CA

Karl Ward over 5 years ago

I am also relatively new to Bower, and although it is somewhat intimidating, I think it is good that Foundation follow industry-standards. Not only will Foundation benefit from following best practices, but you and I will stay on top of useful emerging technologies.

In essence, Bower helps you update and manage all your javascript plugins. Ultimately it works well as long as you are not customizing any vendor JS files (ultimately you shouldn't, but sometimes you must). Another thing, is that not all JS plugins are available with Bower, so you can`t expect to maintain all your vendor JS plugins only with Bower.

Personally, I use Bower with grunt+uglify, and simply refer to the specific JS files I wanted loaded into my app.js file. Some javascripts that are not available through bower, customized JS files, and my own JS files are loaded from another custom JS src directory.

 uglify: {
      js: {
        files: {
          'public/js/app.min.js': [
            'bower_components/foundation/js/foundation.js', 
            'bower_components/jquery-waypoints/shortcuts/sticky-elements/waypoints-sticky.js', 
            'javascript-source/vendor/*.js', 
            'javascript-source/custom/*.js', 
            'javascript-source/mine/*.js'
          ]
        }
      }
    },

Edward Beckett over 5 years ago

@Karl

I agree that this build config is as close to dependency and configuration intensive as an enterprise java build... Just getting acquainted to the compass, foundation, sass build system is way too difficult... This is CSS were talking about... Not Java, Scala, C or C++ ...

This is a classic example of over-engineering ... Ruby, Sass, Compass, Foundation, Node, Grunt, Bower, ad nauseam...

Karl Ward over 5 years ago

@Edward: This is the worlds most advanced responsive frontend framework we are talking about, not plainly "CSS". SASS is an incredibly useful tool, and any framework launched today without LESS or SASS is dead in the water before launch. Unfortunately, SASS requires Ruby, and compass is a practical library for SASS. Grunt is the best tool to process Sass (and does a lot of other useful stuff), and if you dont use Grunt, you will need something like codekit. Grunt requires Node.

There is a very good reason why these tools are embraced as industry-standards, because they are incredibly useful and time-saving for those willing to extend their web dev skills.

Tom Hogan over 5 years ago

After spending some time getting Grunt and Libsass along with Ruby, Bower, Git, NodeJS, etc. up and running on Windows, I created a step-by-step How-To that some may find helpful.

http://foundation.zurb.com/forum/posts/11597-how-to-install-grunt-and-libsass-on-windows

Tom

Lee over 5 years ago

I had these same issue, and came to the same conclusion that creating a grunt script to copy the required files was the only way to avoid having all that cruft in production.

Here is a link to the scripts I created if that helps and a link to a post I wrote.

https://gist.github.com/lperry65/9297976
https://gist.github.com/lperry65/9298005

https://plus.google.com/115294181449858910258/posts/RVxinVnsqHt

Although I did find a way around these issues I wasn't happy with the solution and in the end used Twitter Bootstrap, sorry if that upsets anyone but I just found the whole process to be a pain including issues using my own git repo.

Glenn Sjöström over 5 years ago

Hi guys!

I really recommending reading this article http://fuseinteractive.ca/blog/automating-bower-library-integration-grunt

Its gives you the perfect workflow with Grunt and Bower with the module grunt-bower-concat