I've starting using foundation and this is my early impressions of it so far:
It's a double-edged sword in that is built with on the assumption that you want a responsive site. It uses a version of "grid layout" based on 12 columns. In English, this means that you wrap column divs inside of a row div:
Code:
<div class='row'>
<div class='three columns'></div>
<div class='three columns'></div>
<div class='six columns'></div>
</div>
And basically, that is where it is good and bad rolled up in one. As far as I can tell so far, you MUST have your columns add up to twelve, so you end up with something like this in order to make sure everything looks natural:
Code:
<div class='row'>
<div class='three columns'>content</div>
<div class='three columns'>content</div>
<div class='six columns'></div>
</div>
Although the above may look like you are creating a lot of divs, I've been deleting a lot of the divs I used with the Bootstrap. I have to be a tad careful with this statement because I did use a template, but I will also note that I did not use all of the pre-made divs from that template.
Things I don't like:
- The default colors are way too light. I wish they would have just let it be browser default. Not sure where this trend of making everything light-colored is coming from, but it clearly has to be breaking the W3C accessibility standard.
- The CSS is a whopping 6033 LOC. I'm going to have to research into finding something that will automatically erase all the excess code since I'll only be using about 100 LOC.
- To get the Sass version, you have to install Compass and then install the foundation gem. This isn't really a big deal since Sass depends on Ruby, but it is sort of an irritation that they offer you a config.rb file and tell you to place it in the root directory when you deploy your app. It's a bit presumptuous of people to assume you are using their favorite framework. They even pre-define the routes for you:
Code:
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"]
- It would be nice if there was a normal SCSS file that is similar to the Sass you'd create by hand. Instead they give you a huge file full of things that you can comment out, but I don't know what half of it means, but I haven't really dived into it either.
Things I do like:
- Sass, obviously. I don't know LESS, so that is a plus, but as I pointed out, this may be an illusory benefit.
- If you don't want to use Sass, you can use the straight-up CSS. The CSS is completely human readable and familiar, which Bootstrap isn't. (I would know this because I did edit the straight CSS in Bootstrap, yuck)
- As I mentioned earlier, I'm using less div-soup than I was before. Foundation feels more flexible and freeing than Bootstrap, but each appears to have their own opinions.
- The nice thing about foundation is that it doesn't really suggest that you are done once you slap something up. I don't get the sense that there will ever be a classical "Foundation" site like there is a "Bootstrap" site. I don't know if it is the way Bootstrap markets itself or if it is truly less designer-friendly.
This last sort of irritates me but it's not a "bad" thing per se: Foundation makes the assumption that you will create a semantic HTML site, and whilst that is true for some sites, it's not the truth for all sites, so similar to Bootstrap, you have the non-semantic div names, so you don't have a "nav" or "article" class in the CSS for example.