As much as Bootstrap, I imagine. Not sure if moreso or lessso though. Perhaps different use cases? It looks like developers prefer Bootstrap, not entirely sure why - perhaps something as simple as the documentation is structured better for them - or that was the initial crowd who was exposed to it.
They're not though. The author worked for Twitter when he released the first version of Bootstrap, but Twitter never actually used it in production. Twitter doesn't promote it anymore either; BS3 got moved to twbs/bootstrap on GitHub, and the new marketing site doesn't call it Twitter Bootstrap anymore.
ZURB doesn't have a huge consumer product, but they're a pretty big name in design, and they have half a dozen people who regularly work on Foundation/Foundation support.
I agree that I should have written it past-tense... But, until recently, it was clear that Twitter's name was attached to the project. A Google search for "Twitter Bootstrap" pulls up all the relevant docs, and the first line of the 2.3.2 docs is "Built at Twitter by @mdo and @fat"
Foundation's enough of a standard that you don't have to worry about that. It'll be around indefinitely and won't get abandoned like some hobbyist project or superseded by Bootstrap.
I think jQuery and Bootstrap are "developer ready". IE , easy to use. The easiest lib/project to use will always be the most successfull one. Doesnt mean there is no place for competition, and it doesnt mean it will always be the framework everybody use. Furthermore this is "Twitter" bootstrap. Most people have no idea what Zurb is.
The Interchange plugin saved my butt on a recent project. Client wanted to have 5 different images for different sizes, it was a breeze to setup even when having to integrate it with the supersized slider.
I started to notice that and have since moved over to it now. The feature updates and add-ons are coming much faster with Foundation than Bootstrap IMO.
I believe Foundation is much better for front-end design than Bootstrap. The main benefit of Bootstrap is in backend design because it managed to get more popular and consequently its much easier to find 'bootstrap ready' js based widgets etc
That's my interpretation of the comment, and real-world experience. I've written two admin sites with Bootstrap because it has all the widgets and plugins I might need on short notice.
I use Bootstrap exclusively, but I've played with Foundation (back on version 3). But honestly, I can't see what the difference in the frameworks are. Do you have a reference comparing them so that I could see what I'm missing?
I don't know why (maybe I'm just not good with css and html in general), but I'm always confused when looking at these grid systems. Trying to use zurb in a project now and I'm kinda lost. Any good resources other than their docs for sort of showing how to use zurb in a full project?
Are you talking about Zurb's grid system[0] specifically, or referring to Zurb/Bootstrap as "grid systems"?
If it's the latter, a simple Google search for "how to use Bootstrap" turns up a lot of resources, including this one[1], which looks good. You might be able to find Foundation-specific ones, but Bootstrap seems to have the edge in popularity.
Where are you hung up? It might just be something simple that I, or anyone else around here can answer quickly. Everything I learned was from trial and error through messing with F4's grid system.
Webdesigntuts+ has a thorough series covering Foundation 4 you might be interested in. If your a Lynda subscriber, they’ve got a couple of courses on Foundation 4, as well. There’s not a whole lot of difference between the grid in Foundation 4 and Foundation 5. Foundation 5 does add a new medium breakpoint which is great for tablets.
Man, the quality of the videos on Lynda.com always impresses me. But I don't wanna pay $25 when that's the only series I want. Wish I could just do a la carte.
When I was choosing a framework for a redesign for my blog (switching from Bootstrap since it was getting cumbersome), I decided to try out UIkit, since I ended up not needing any of the JavaScript plugins or super-fancy CSS effects.
However, after taking a look at Foundation 5's plugins, I will definitely try using the framework if I need to undertake a website with more ambitious functionality.
The only thing you get with bootstrap at this point is an insane amount of plugins (datepickers, etc). In general, you just have to pick the vanilla jquery plugins and theme them up to use foundation's syntax. I just recently did this with xeditable and poshytip.
I'll take the semantics of foundation any day. Love this framework.
You could also argue than a plugin that ships with hard-wired skin for only one CSS framework is a signal of bad underlying engineering, i.e. no separation of concerns
I fully agree with this. It's one of the things I love about datatables.js. The library comes with the ability to edit the sdom and templating for just about everything that library produces. The only funky shit is getting foundation to properly apply it's js to ajaxed content.
Foundation is without a doubt the nicest CSS framework I have ever used. It really, really helps me, as a programmer, create amazing interfaces without much effort at all. Combined with SASS and it's a winning combination.
I would just like to say that I love Foundation! Kudos to the team and congrats on the new release. I look forward to exploring the new version. That being said, I am not really digging the new documentation page. The sample code containers should have a non-white background or at least some kind of a border.
Tested and duplicated on an iPad air here. It's Safari's issue, though.
There's a bug in mobile Safari that I can replicate on other sites. Scrolling on Craigslist's map view when the page is loading also crashes the browser, which leads me to believe it's something related to attaching to events in certain states.
First, a big thanks to all the Zurb folks who work on Foundation, I can't wait to dig into the new release!
Just for the sake of another data point (albeit an obscure one): The page crashed Chrome on my iPhone 4 running iOS 7.03, both with other pages open and as the only page.
On the one hand it's never been a better time to be a front end dev, and on the other it's absolutely crazy how fast front end technology is progressing the last couple years. I just caught on to Foundation 4 in the last 4 months or so, and now here's a new release that's way more evolved. Amazing.
Thanks to the Zurb team! I'll definitely be ripping off lots of ideas for my company's tortoise-speed Drupal sites.
It may have been breaking but they did well to state that it would be breaking and was in development long enough (with RCs) that no-one should be caught by surprise.
I say this as someone who launched a site based on 2.3 as 3.0 entered RC status.
Can anyone tell me how to make a split button / dropdown that goes upwards (dropup)? This is one thing bootstrap has which I've been missing in foundation.
Thanks, I was hoping I wouldn't have to make changes to the js which makes upgrading a headache. I'm probably better off writing my own angular directive.
I looked at the project on Github [1] and the latest tagged release is 4.3.2. It seems odd that they'd release 5.0 for download on their website before tagging it on Github; is there a particular reason for that?
I've been looking through this, trying to remember why I recently switched to Bootstrap. Was it a widget that was missing? Maybe a date-picker? Foundation doesn't really have date-pickers and such.
Hrm. Oh, right. It was angular-ui, which uses Bootstrap.
Angular integration for any of these projects is a BIG win. Because of that, I'm eagerly awaiting an RC for Angular-Semantic[1], so that I can cut over to Semantic-UI, which is, I think, best of breed as far as these frontend aesthetics go.
I'm aware of that, but there are styling differences between Foundation and Bootstrap.
The Angular-UI implementation, while self-contained, is going to have a different .modal() implementation than Foundation's, so there's always going to be relics in the implementation.
Implementing twice the framework for the same functionality seems a sure fire way to induce headaches.
Your advice isn't wrong, and worked great for a good number of months, but requires ignoring the JS components of Foundation altogether, which somewhat negates the benefits of having a big ol' framework in the first place (IMHO).
I've recently done a project with Semantic-UI, and there are still a lot of gocha's with specific nestings you'll have to follow and some ui blocks that don't mix wel, but the worst thing for me are the modals. If you have more than one modal, you will get both modals being triggered at some times, sometimes, you'll get the fade in/out animation 2 or 3 times, etc.
It's still a young project, and imho one of the best looking ones, but there are still a lot of quirks to work out.
I've started shying away from Angular a little because it's not very simple to work with existing JQuery and JavaScript components with having to re-wrap everything in directives (and supporting it when the underlining components change) has become a huge-PIA....
I'm curious as to why Zepto support was removed. Zurb was pretty big on it for Foundation 3. Smaller size than jQuery, faster load time on mobile, etc. Any ideas why this was scratched?
There were some definite compatibility issues we ran into and while jQuery 2 isn't perfect, it's pretty good, good enough we felt confident switching back from Zepto. Nothing against Zepto, just pragmatism.
So for the HTML deficient are there any template sites for foundation yet? These exist for bootstrap, and for someone who doesn't have even a single bone of design talent in his body they're a godsend.
FoundationMade owner here. We're still working on adding themes to the collection, but it hasn't been easy. Hopefully with extra attention on Foundation 5 in general it will bring in some extra Foundation theme developers.
Hi. Our company, Blue Jay Themes, specializes in making good-looking Foundation themes. Please follow us on Twitter and we’ll let you know when we launch in just a couple of weeks. Another great way to stay updated is by subscribing to our newsletter, which can be found on our website. Thanks.
Verifying email addresses is vitally important for building a high quality list. Otherwise, you can easily sign up other people for the list, they get essentially a spam email, report it as spam, and all of a sudden your list is crap because they didn't have double opt-in.
Keep double opt-in, it's necessary (and I think required in Mailchimp's case unless you use the API directly).
already foundation 5. I've only just had two dates with foundation 4. Between foundation and Jeet, I'm so stoked to have these to work and collaborate on.
As with prior versions of Foundation, Yeoman will get plenty of generators for it. At least ZURB's CLI guarantees an easy way to get the canonical version, which is not always apparent among the various Yeoman generators. Also ZURB seems more Ruby-oriented than JS-oriented, as most of their installation methods are based on the Ruby ecosystem.
I love Foundation, but I had to switch to Boostrap because I found it... ugly. And Bootstrap is great to quickly create "pretty" prototypes. But I've always found Foundation having better... foundations. I've used both on numerous projects and here's my take :
* The grid system now looks like bootstrap, and I don't like that. You have to choose the type of column you want to use (and I don't want to be bothered by that). so no .six anymore, it's .medium-6 or .large-6 or .small-6... They should call the .small-6 just .six so we know its the default one.
* It does look a bit better, although they removed styling of the radiobox in forms? Why?
* Overall I still prefer bootstrap's theme, I wish Foundation would offer an optional theme like bootstrap 3 does.
* OffCanvas menu is great ! I can already see plenty of applications (but for mobile only)
* The CLI is a nice thing to have but I'm gonna stay away from it. I like the easiness of copypasting files to quickly begin a small project.
* Documentation is hard to go through, doesn't allow to glance at what it offers. It's a huge improvement from F4 or F3 though.
* I use sublime text snippets all the time and this might be a huge addition!
* I like the JS that verifies forms. I usually always use this on my projects so it's nice to have it by default.
Overall I don't really know if I should switch back to Foundation. But I'll definitely use it for my next project to see how good it is.
Interesting that I prefer Foundation (if I had to choose one or the other) over Bootstrap for exactly that reason: it's uglier.
Whenever I see a new app thingy launch with Bootstrap buttons I cringe a little bit. At least Foundation forces you to make some decisions about how you're presenting things to your users rather than just leaving it how it is (although we've all seen default Foundation apps too).
> I love Foundation, but I had to switch to Boostrap because I found it... ugly.
I consider this is a strength, the styling is thinner so it's easier to customise. Bootstrap can feel like a bit of a battle if you want to customise it a lot. I think bootstrap is perfect for admin pages but for something a bit more custom I think foundation strikes a good balance.
yup, if I want to start a big project from scratch I'll tend towards Foundation.
But if I need to prototype something quickly, make a beautiful admin etc... I'll use Bootstrap. And I'm so used to use bootstrap that I use it for big projects as well now.
Yeah, I use Foundation for sites because I know that I'm going to completely customize the CSS.
I use Bootstrap for web apps because I rarely need to write any CSS to get a working beta that looks nice. After I've gotten input back from the initial users I'll go back and customize the look.
I've tried to use Foundation before and it's responsive grid was ghastly. This was the first time I tried anything responsive mind you. So I jumped towards Bootstrap 3 and it's grid was phenomal to use.
Predictable, simple and quick to iterate - everything I wanted.
I'm going to give this release a try. The interchangable items based on device widths looks fantastic! I'm really excited to give Zurb a try. :)
I've had the same experience. Debugging Foundation's responsive grid turned out to be a nightmare. Just migrated the project to the latest Bootstrap and it's much more intuitive to work with. Also, Foundation has more styling of form elements which gets really annoying really fast.
Looks like it dropped support for IE8, which unfortunately eliminates this as an option for a lot of client work. Seems like a solid go-to for more forward-thinking projects though.
I suspect that will no longer the case much longer, if it's not already. One of the sites I run has a VERY non-techncical/older skewing customer base, and even in that group IE <= 8.0 is down to 12% of traffic, from about 28% a year ago.
Also, a year ago non-IE browsers were split pretty much 50/50 with IE, but now down to about 35/65. (Chrome and Safari were the big risers, Firefox actually dropped from 2nd to 5th)
For basic stuff like the grid, it's quite easy to manually add IE8 support, given that you're never going to be seeing IE8 on a mobile phone or tablet. For some of the more advanced components you could run into issues.
Year to date 27% of our IE users are on 8 or less, which oddly enough accounts for 27% of our revenue from visitors using IE. IE 8 or less is 10% of our site revenue. I simply cannot exclude 10% of our revenue.
With that being said, traffic from IE 8 or less is down 58% from last year. Windows XP isn't going to die fast enough for me to begin supporting Foundation 4+.
I could push Firefox or Chrome aggressively, but that's an unfriendly half-measure.
...this being Foundations greatest failure. Until IE8 is under 2% usage, it going to be hard to convince an ecommerce client that it's OK to leave these users on the table. Sure we can implement workarounds, but that adds a lot of overhead to development.
Does it not make sense for a front-end framework to handle cross-browser compatibility for us?
I'm more curious about this which is mentioned on the page: https://github.com/hcatlin/libsass/ has anyone got it working with rails? Faster SASS compilation would make life much better (especially when bootstrap or compass are involved).
https://github.com/hcatlin/sassruby - Written by the same guy, ruby wrapper around libsass. I am pretty confident that a Rails gem is the eventual goal.
173 comments
[ 2.3 ms ] story [ 220 ms ] threadThat's pretty much it.
ZURB doesn't have a huge consumer product, but they're a pretty big name in design, and they have half a dozen people who regularly work on Foundation/Foundation support.
If it's the latter, a simple Google search for "how to use Bootstrap" turns up a lot of resources, including this one[1], which looks good. You might be able to find Foundation-specific ones, but Bootstrap seems to have the edge in popularity.
[0]: http://foundation.zurb.com/docs/components/grid.html [1]: http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bo...
http://www.webdesign.tutsplus.com/tutorials/htmlcss-tutorial...
http://www.lynda.com/Foundation-training-tutorials/1628-0.ht...
However, after taking a look at Foundation 5's plugins, I will definitely try using the framework if I need to undertake a website with more ambitious functionality.
Of course, one uses SASS and one uses LESS. I knew LESS, so I picked Bootstrap.
But I'm more than willing to switch.
I'll take the semantics of foundation any day. Love this framework.
It's that good.
Can't wait to start playing with version 5.
Anyway, looking at it on my laptop now. It looks great!
There's a bug in mobile Safari that I can replicate on other sites. Scrolling on Craigslist's map view when the page is loading also crashes the browser, which leads me to believe it's something related to attaching to events in certain states.
Just for the sake of another data point (albeit an obscure one): The page crashed Chrome on my iPhone 4 running iOS 7.03, both with other pages open and as the only page.
Thanks to the Zurb team! I'll definitely be ripping off lots of ideas for my company's tortoise-speed Drupal sites.
For example bootstrap 3 is a breaking upgrade and suddenly your just finished bootstrap 2 is using 'unsupported' framework.
I say this as someone who launched a site based on 2.3 as 3.0 entered RC status.
http://stackoverflow.com/questions/18648307/make-zurb-founda...
https://github.com/jlong/sass-bootstrap/blob/master/lib/_dro...
1: https://github.com/zurb/foundation
"Interchange uses media queries to dynamically load responsive content that is appropriate for different users' browsers.”
http://foundation.zurb.com/docs/components/interchange.html
Offcanvas Javascript (Originally bolt-on, not bundled)
http://foundation.zurb.com/docs/components/offcanvas.html
"Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes."
http://foundation.zurb.com/docs/components/abide.html
Zepto support has been removed from Foundation 5.
Docs are continuing to look better, and they still have docs back to Foundation v2.
Thanks Zurb!
The only migration that should have to happen at this point is JS fixes.
http://foundation.zurb.com/docs/upgrading.html
as well as a migration plugin that will allow you to use the f4 style js and get deprecation warnings via the console:
https://github.com/zurb/foundation-migrate
Why not just use Interchange itself?
Hrm. Oh, right. It was angular-ui, which uses Bootstrap.
Angular integration for any of these projects is a BIG win. Because of that, I'm eagerly awaiting an RC for Angular-Semantic[1], so that I can cut over to Semantic-UI, which is, I think, best of breed as far as these frontend aesthetics go.
[1] - https://github.com/caitp/angular-semantic.
https://github.com/najlepsiwebdesigner/foundation-datepicker
The Angular-UI implementation, while self-contained, is going to have a different .modal() implementation than Foundation's, so there's always going to be relics in the implementation.
Implementing twice the framework for the same functionality seems a sure fire way to induce headaches.
Your advice isn't wrong, and worked great for a good number of months, but requires ignoring the JS components of Foundation altogether, which somewhat negates the benefits of having a big ol' framework in the first place (IMHO).
It's still a young project, and imho one of the best looking ones, but there are still a lot of quirks to work out.
http://www.themplio.com/categories/foundation-free
http://www.foundationmade.com
http://www.bluejaythemes.com/ http://www.twitter.com/bluejaythemes
Keep double opt-in, it's necessary (and I think required in Mailchimp's case unless you use the API directly).
edit: Apparently it's mostly js fixes for migration: https://news.ycombinator.com/item?id=6776912
Docs are here: http://foundation.zurb.com/docs/.
I love Foundation, but I had to switch to Boostrap because I found it... ugly. And Bootstrap is great to quickly create "pretty" prototypes. But I've always found Foundation having better... foundations. I've used both on numerous projects and here's my take :
* The grid system now looks like bootstrap, and I don't like that. You have to choose the type of column you want to use (and I don't want to be bothered by that). so no .six anymore, it's .medium-6 or .large-6 or .small-6... They should call the .small-6 just .six so we know its the default one.
* It does look a bit better, although they removed styling of the radiobox in forms? Why?
* Overall I still prefer bootstrap's theme, I wish Foundation would offer an optional theme like bootstrap 3 does.
* OffCanvas menu is great ! I can already see plenty of applications (but for mobile only)
* The CLI is a nice thing to have but I'm gonna stay away from it. I like the easiness of copypasting files to quickly begin a small project.
* Documentation is hard to go through, doesn't allow to glance at what it offers. It's a huge improvement from F4 or F3 though.
* I use sublime text snippets all the time and this might be a huge addition!
* I like the JS that verifies forms. I usually always use this on my projects so it's nice to have it by default.
Overall I don't really know if I should switch back to Foundation. But I'll definitely use it for my next project to see how good it is.
Whenever I see a new app thingy launch with Bootstrap buttons I cringe a little bit. At least Foundation forces you to make some decisions about how you're presenting things to your users rather than just leaving it how it is (although we've all seen default Foundation apps too).
I consider this is a strength, the styling is thinner so it's easier to customise. Bootstrap can feel like a bit of a battle if you want to customise it a lot. I think bootstrap is perfect for admin pages but for something a bit more custom I think foundation strikes a good balance.
But if I need to prototype something quickly, make a beautiful admin etc... I'll use Bootstrap. And I'm so used to use bootstrap that I use it for big projects as well now.
Also Bootstrap 3 is a lot easier to customize.
I use Bootstrap for web apps because I rarely need to write any CSS to get a working beta that looks nice. After I've gotten input back from the initial users I'll go back and customize the look.
Predictable, simple and quick to iterate - everything I wanted.
I'm going to give this release a try. The interchangable items based on device widths looks fantastic! I'm really excited to give Zurb a try. :)
Also, a year ago non-IE browsers were split pretty much 50/50 with IE, but now down to about 35/65. (Chrome and Safari were the big risers, Firefox actually dropped from 2nd to 5th)
For basic stuff like the grid, it's quite easy to manually add IE8 support, given that you're never going to be seeing IE8 on a mobile phone or tablet. For some of the more advanced components you could run into issues.
With that being said, traffic from IE 8 or less is down 58% from last year. Windows XP isn't going to die fast enough for me to begin supporting Foundation 4+.
I could push Firefox or Chrome aggressively, but that's an unfriendly half-measure.
It's not a huge deal except for the navbar, which is horribly broken in IE8. There are workarounds though.
Does it not make sense for a front-end framework to handle cross-browser compatibility for us?
Problem is - some widgets I depend on - like date-pickers and X-Editable - only support Bootstrap.
[1] http://getbootstrap.com/customize/#less [2] https://github.com/thomas-mcdonald/bootstrap-sass
Bootstrap has more styles so you can...bootstrap. Foundation is meant to be a foundation to build on.
That being said, of course their functionality is very close, but be aware of the core differences in outlook between the 2.
There are other implementations available: https://github.com/hcatlin/libsass/wiki/Implementations