confusions using zurb foundation

Question

After many projects writing my own responsive design i got a bit tired of it, after researching popular responsive frameworks decided to go with Zurb Foundation.

First i went for the css ready to go download. Then i tried to use the GEM, where i got a bit of resistance in trying to figure out things on my own. It seems the docs are not explaining enough scenarios, they are just raw docs.

First what i miss is a search for all the classes to find explanations fast, something like jquery's website has.

Many googling and reading to figure out i need to install ruby on windows. Then i ended thinking that my webserver also needs ruby installed, but figured out that SASS is just a preprocesor so it is only helping me write and maintain better code on my side :)

Here are some other problems i just can't figure out easy, without searching google for each thing:

1) I have configured dreamweaver to open .scss files also. Then each day i'm developing, i need to open ruby-console, navigate to project dir and put: compass watch. Now each time i save every modifications (so i can test i the browser), dreamweaver pops out message box: "file has been modified outside of dreamweaver,..do you want to save..blabla" - very very enoying

2) app.scss only holds a lot @import statements. _settings.scss holds the code i can change the default looks (this was my primary reason to use the gem since not a SASS guru yet). Should i uncomment some statement and change themn to my needs inside _settings.scss and will i lose all these changes after one day i succesfully update zurb with: gem update zurb-foundation? If so, is it better practice to create a new scss which holds all my overrides?

3) how to create new .scss file which should override some defaults that _settings.scss listens.

4) should i override the app.css or the _settings.scss

5) when changing top-bar links hover colors, why aren't these applied??? example: $topbar-link-color-hover: #fff; (_settings.scss)

6) i did not have an /img or /images folder in my project after creating it. Hence, i created one myself "/images"

7) any books to buy on foundation 4 with a lot of best practices and tutorials???

I'm sorry but for me honestly it seems way to much time to spend learning the very basics for zurb. I have a lot of experience in c++ projects as in mobile and desktop web projects, so i realy don't feel like a newby but it's almost like i'm pushed to buy support

Answer 1

First I will start off by saying, if you are new to frameworks try something that has a ton more documentation like Twitter-Bootstrap. However since you decided to use Foundation here are the answers to your questions.

1) Setup compass to write the files to another directory that Dreamweaver does not watch. Use a proxy like Charles Proxy to proxy in the files when you are developing locally. This will get rid of the annoying do you want to save this file message. Make the compilation of the SCSS files part of your build process before you deploy your application somewhere other than local.

2) Yes, app.scss has all the import statements. Some of which you might want to comment out if you are looking for raw speed, just fyi. In terms of overrides one thing that you can do is use the Mixins that are provided to you in the other files. Button.scss for example has some fantastic button mixins that allow you to not only create your own flair but inherit most of the Foundation Awesomeness. Another thing, if you notice how all of the variables have a !default. That means that if they are declared somewhere else(read import your variable first), the Default value will be overridden.

3) just make the file and add it as an import before the _settings.scss

4) app.scss has a ton of imports for all the parts of foundation, some you are most likely using and some maybe not.

5) Would need to see the compiled CSS for this one, my guess though without seeing anything is that you missed a variable.

6) Created it because Compass was looking for it? Unless you are planning on using images or creating a sprite (compass can create sprites, which is AWESOME) you can just comment or remove that from the config.rb.

7) Have not seen any. Foundation has much less of a community at this time when compared to Bootstrap. However you can get a leg up by studying up on SASS and SCSS, there is a lot more available on that part.