There'e been a lot of buzz recently about the new Foundation 4 framework and with the upcomoing release of the mobile-first Twiiter Bootstrap 3 things are hotting up. I'm wondering what are your pro's and cons of using either. Personally I've never used a framework, but I'd guess the big advantage is the responsiveness is built in and so aid rapid development. Add to that, are there any advantages of using Sass over Less as a css preprocessor? What experiences good or bad have you had with these frameworks and which do you recommend to learn and why.

I was an advocate of Foundation and still have much love for it. It's intended to be used for rapid prototyping, but based on my workflow, I ended up spending more time configuring it. That's not to say it isn't any good - just not great for my time management.

 

I got the email saying it was being released but things have changed since I last used Foundation 3. Bootstrap is the more popular of the two and has more features but I prefer Foundation out of the two. The fact that they're are acknowledging mobile first is a nice step forward in my opinion as I believe mobile first is the way to go. Could be proven otherwise, but works for me

 

Going to download Foundation 4 in the coming weeks when I get time to have a meddle and no doubt the newer Bootstrap.

 

I prematurely saw SASS as a learning curve when I posted about it a month ago. It's definitely more efficient once you get to grip with the conventions (more your existing habits . I use SASS with a custom made grid for all my projects at the moment using CodeKit. When you get the hang of it, it's certainly useful. If you use something like Sublime Text, you can get a package that interprets SASS and LESS. It's all good...

I too am a fan of foundation and, up until this week, was still using version 2. I downloaded version 4 and in my opinion it is extremely bloated and a massive change from the version I am used to. Kind of mulling through it trying to rip out the parts I don't need and restructure in a way I understand.

Really? That much bloat already? That's a bit disappointing. I really like Zurb's style and would have thought it would have been a lot more simplified. Still, prefer it than Bootstrap (I do like Bootstrap for the record - not starting a comparison battle )

Really? That much bloat already? That's a bit disappointing. I really like Zurb's style and would have thought it would have been a lot more simplified. Still, prefer it than Bootstrap (I do like Bootstrap for the record - not starting a comparison battle )

Yeah, unfortunately so. I have been using version 2 for about a year now, and I honestly have no idea where to start with version 4

Cheers guys,

 

Frameworks by nature can be bloated. I have actually used the Skeleton WP theme to create a Wordpress site and found that it required a lot of tweaking to override the framework style, which inevitably added extra time onto the dev. Ease of customisation is a deciding factor. and the naming conventions they use. eg a column layout would be: .span1 in Bootstrap or .one.column in Foundation.

 

I have to say I find bootstrap sites all look the same that's down to the creative though, whilst foundation looks more polished, so I'm leaning more towards that option. Interestingly in Foundation IE8 is no longer supported and the typography has changed from px- to em-based. Im pretty confident in CSS so curious about how Sass - mixins, variables, selector inheritance etc can streamline my production.

 

Done a bit of looking around and found this handy comparison: http://responsive.vermilion.com/compare.php

CSS-trick got a nice intro to Compass and SaSS http://css-tricks.com/video-screencasts/88-intro-to-compass-sass/

Agree with you on Bootstrap sites looking the same, but as you rightly said, that's down to creativity. There's a lot you can do with Bootstrap without it looking generic. One of the reasons Foundation sites don't look the same is because they don't rely on the 'Hero Unit' so much. That's not to say that there could be an equal amount of Foundation generic sites currently being generated. That bit is down to the designer (unless the client requests it).

 

As tends to be the case of repeating myself (sorry to be playing the same record over and over), Skeleton is a great start. I did dabble with the Skeleton WP theme - made by SimpleThemes I think - but it didn't have the patience for it and it seemed to lose the beauty of the original. SuperSkeleton is probably the most popular of them all. I almost bought it for myself (yeah yeah, I know but I would only spend far too much time on creating my own) but opted for a theme by Orman Clark. He is quite the wizard.

 

Anyways, if you're confident in CSS, try out SASS or LESS. I use SASS but wouldn't discriminate in using LESS. Bones is good example of a LESS based WordPress starter (if that's what you're looking at doing), as is the Roots theme. Going back to your reference to Bootstrap and Twitter again, I got a bit frustrated with all the .span1 .one.column malarky. If you have the time, try out semantic.gs (that's the site address). It's, you guessed it - a semantic grid as endorsed by Smashing Magazine and yours truly (if that means diddly squat ). It's a nice alternative to frameworks if you put in the leg work.

 

Ta-ra for a bit

I probably do a couple of WP sites a year, and the other 99% coding from scratch. WP not a big requirement but I'll have a look at Bones and SuperSkeleton for the next WP project that comes up. I agree Orman Clark produces some standout themes. I guess Foundation 4 and SaSS it is.

Thanks

Pam

You're welcome

One thing to keep in mind is, with the latest version of 4 there's no / minimal support for IE8. It's still a 20-25% usage globally for most average markets, so if you hop in with version 4 this is something to consider. IE8 is supported under version 3, though, so it may be a safer bet to make use of it before getting ahead of ourselves.

I too have gone back and fourth trying to decide between the two. I've been using Foundation and have been pretty happy with it. Bootstraps UI elements do look nicer but I would be restyling these anyway. I tend to mostly just use the grid stuff, which I think Foundation has the edge on. One thing I did notice today in Bootstraps favour was it was much easier to implement their Nav bar, Foundation required two more js files for it, I'm not really sure why?

 

Another consideration would be if you use LESS (used by Bootstrap) or SASS (Foundation). I don't use either yet, but I plan to play with both and see what I take to - which I expect will have a baring on my framework choice.

 

Of course Bootstrap 3 is on the way, matching Foundation 4 mobile first approach.

 

IE8 and Foundation 4 - Take a look at this https://gist.github.com/zurbchris/5068210

I've just added it to a new site and seems to work just fine.