Menu icon Foundation
Foundation 5 SASS without Bower?

Hi!

Is there any way to use Foundation 5 SASS without Bower?

My project is very(!) small and lightweight (5 static pages on hyde - simple python static website generator). In previous versions of Foundation i've used only Compass (compass watch) to compile sass files and everything was fine.

But now I should to install to all of my computers number of components (node, bower) are absolutely not needed in my workflow. And my project folder looks like a bunch of folders of unknown purpose. Is there any way to fix this? =)

bower

Hi!

Is there any way to use Foundation 5 SASS without Bower?

My project is very(!) small and lightweight (5 static pages on hyde - simple python static website generator). In previous versions of Foundation i've used only Compass (compass watch) to compile sass files and everything was fine.

But now I should to install to all of my computers number of components (node, bower) are absolutely not needed in my workflow. And my project folder looks like a bunch of folders of unknown purpose. Is there any way to fix this? =)

Oleg Fomin almost 6 years ago

In other words: how can i get SASS wersion of foundation 5 without installation of node and bower?

Tommie Landström almost 6 years ago

Perhaps you could grab the F5 scss files from github and compile it localy?

Steve Adams almost 6 years ago

I really miss this also. Having a the gem in 4.x made things so much easier. I suppose that the new CLI might work for some people. I've not been successful getting it to work with my old workflow. How hard would it be to have a F5 gem that works in the same context as the zurb-foundation did?

Don't take me wrong, I understand the F5 is free and that is really cool for Zurb to work so hard offering such a boon to the community. I just don't think they may have thought it out well enough regarding how changing the requirements would affect existing workflows and how that might place a barrier between F5 and community adoption.

James Dullaghan almost 6 years ago

Oleg,

The bower-foundation repo can be found here
You can copy the assets and compile locally if it suits you.

If you decide to take this route, know that you will have to update assets manually as newer versions of foundation are released.

Steve Adams almost 6 years ago

"If you decide to take this route, know that you will have to update assets manually as newer versions of foundation are released."

That's kinda the point isn't it.

buseca over 5 years ago

I basically agree with the topic: there is no indication in the website about how to download Foundation-SCSS just like normal files, without installing stuff and adding path variables to the system.
Maybe i'm wrong but I think the great part of users here, are designers, not back-end developers,.. come on guys, make it easy or make a real tutorial about how to use it properly with bower..

Mark Phillips over 5 years ago

I agree with this topic also. The documentation for using the SCSS version of Foundation 5 is extremely sparse. I cannot wrap my head around how to deploy all of this stuff to a live server once I'm done my local project. All of the css & js paths point to the bower_components folder, requiring all of these assets to be sent to the live server for all of the paths to work correctly. While it's great being able to update the entire Foundation Framework using Bower, it simply adds to much bloat to projects that don't require it.

I think the best bet would be to offer a SCSS version of Foundation that isn't dependent on Bower and/or work on more documentation/tutorials outlining how to properly deploy sites using all of these extra pieces. Because there are so many different components involved, figuring out how they all work together has been a challenge as most tutorials deal with only one product, and not how to integrate all of them into a workflow from production to live site.

Erick over 5 years ago

If I am not mistaken, taking the files from bower components and placing them into your project folder would be the same as what you are referring to.

I have done this on a few occasions, I know I will have to update manually but that is something I am ok with.

I am now at the point where i use a standard foundation project folder and keep the file structure as is for updating purposes and use that when new versions are released, then I use the new contents and place it accordingly.

I may be doing it wrong but I haven't ran into a problem yet.

Mark Szymanski over 5 years ago

I was on the bower train for a minute and felt awesome starting new projects, but, fell into quite a few issues after moving code into WP sites, and file paths being wrong, JS just not working. My new flow is downloading a custom CSS folder, where I can at least choose some default sizes and colors and css and js I even want in my project. Then just CD into the project and watch with Sass or compass. Makes everything so much easier. I'm a long time lover of Foundation, but seeing a ton a tickets being open and believe it's somehow due to their packaging of everything.

Josh Vaughn over 5 years ago

I couldn't help but join this conversation because I'm learning Foundation with Sass and Compass primarily using version 4 - because the few tutorials Ive been able to run through (Jenn Kramer at Lynda, some random blogs) that deal with all three are using that.

I'm seeing these threads now that are talking about Bower being necessary to use the three in F5. This is true?

And if so - why is there not a friendly, clear explanation from Zurb - preferably a video tutorial - that goes over all of the installation issues, maintenance issues, file structure, and recommended workflows for typical setups? There are a lot of threads about this here.

I am using Prepros under windows to handle Sass and Compass and it is simple and works great. I don't need enterprise or even medium shop sized package managers for my workflow - I do smaller sites for small business and I like as little moving parts as possible. My one experience messing with Grunt made me drop it and go back to using Prepros.

I hope Zurb is out there reading these posts and is planning on addressing this. I'm spending a lot of study time and effort learning specifically this approach - Foundation + Sass + Compass - and to get this far and have a gap in the documentation for a core thing like this is ... ugh. Can we get some help Zurb? :) Thankya

James Stone over 5 years ago

There are two simple solutions.

1) Install node / bower on a single machine or vm

  • install ruby, the foundation gem, node, bower, etc.
  • use the foundation cli to install the latest version
  • zip or create a git repo for this and use it as the starting basis for your projects

2) Install Foundation Manually

  • clone or download the master tarball/zip of the foundation-compass-template

https://github.com/zurb/foundation-compass-template

  • this is the root of your project
  • create a directory called bower_components
  • clone or download the master tarball/zip of the bower-foundation repo in that directory

https://github.com/zurb/bower-foundation

  • rename this directory to just "foundation"

alternatively you can place this somewhere else or move the files around. Just update your config.rb so that the add_import_path reflects the change.

i.e. add_import_path "bower_components/foundation/scss"

  • add jQuery and update the link in index.html to a local copy that you can download from the jQuery site or by linking to a CDN, depending on your preference.

I am in agreement that it would be great if ZURB maintained a standalone compass / sass version repo that doesn't have the node / bower requirements. Maybe this could be updated with Travis CI like some of their other repos.

ajaymittal about 1 year ago