Foundation and Bootstrap


I’m not an expert on this, but I am pretty sure somebody here will know the answer. The two main platforms for responsive design appear to be Bootstrap and Foundation. They seem to be relatively equal and in constant development, so there is no clear winner from what I can tell.

In the recent past I’ve been using Foundation, but Blocs uses Bootstrap and I just wondered if it will be possible in future to integrate features from Foundation with Blocs?

I ask this out of genuine curiosity and wondering what would be technically possible, because I’ve read a couple things online about being able to mix the two frameworks. If that’s not possible would it be feasible for Blocs to run Foundation in much the same way as it currently runs Bootstrap?


From the Blocs perspective, It’s more likely that at some point in the future you will be able to build foundation pages with Blocs, I’m not familiar with merging them, it could be over bloat.

What would be even cooler is if sites with Blocs could just be exported to whatever framework you like from one bloc file, I like that type of flexibility.


Being able to export from Blocs as either Bootstrap or Foundation sounds interesting, but from a layman’s perspective I guess that would entail specifying the framework at the start of the workflow, since they presumably offer different features in terms of development, but that’s just thinking aloud.

Before starting with Blocs I’ve been working exclusively with Foundation 5, but it looks like both Foundation and Bootstrap have progressed a good deal over the last year. It should be exciting when Blocs can incorporate Bootstrap 4.


A better approach would be to define what specifically you would want from Foundation and try to implement within Bootstrap or some custom code. Having both frameworks would be overkill and way more code than required.

IMO Bootstrap 3 has a lot of stuff I like that Foundation 5 doesn’t have and similarly B4 has more stuff than F6 so I can’t see any advantage. F5 has column height equalisation and I recall that F6 has proportional padding but there are other ways of achieving these features. It’s a debate that will rage on forever.


Finding the means to incorporate the good parts of Foundation into Bootstrap would be ideal if possible. For example, using separate mobile, tablet and desktop images in Foundation is not the same as visibility using display:none, which simply hides items from view, but still loads them in the background.

Foundation uses a component called interchange:

For small devices this will only load the image defined in the small setting and therefore much faster.


There are a kazillion other responsive frameworks out there as well.

I think the time is coming when all browsers will support a more inclusive range of features and a fuller range of specification. Certain support is still absent across browsers, and certain usage still lingers, looking at you older IE users, among others.

So the time is coming which will allow for widespread easier vanilla development without the need for any framework such as Bootstrap or Foundation, etc.,. It’s already here in many aspects. Speaking in general both frameworks are bloat for most peoples needs, as the sites they build don’t leverage 90+% of the frameworks features, yet they use them for ease of use, such as grids, menus, etc., etc., that can all easily be accomplished with vanilla HTML5, CSS, etc. Combining the two frameworks on the same project would only compound this even with stripped down custom builds of each.

Go vanilla @norm. :wink:

[quote=“webdeersign, post:4, topic:320”] It’s a debate that will rage on forever.

Indeed. :thinking:


For this type of site design, you are right. Other forms of responsive design vary, with some being far more powerful, far less restrictive, and far more challenging (and some being very easy but with certain trade-offs).

The advantage of a block-based design is that the big strokes are already taken care of and designers can focus on getting good-looking and functional sites out the door with minimal hair-pulling. (Some block-based platforms can become quite complex, however, but the main difference is in approach: It is like the difference between building a custom chopper from a catalogue of cool parts versus fabricating it largely from scratch.)