By Kyle Vermeulen

Video: Bootstrap or Foundation?

By Kyle Vermeulen

It’s that time again, time to start a new development project. You sit down at your desk, flip open your laptop, flex your fingers and fire up your favorite editor. First things first: which CSS framework do you drop into that project folder? Bobbing on the surface of the ocean of potential framework candidates are the two favorites: Twitter’s Bootstrap and Zurb’s Foundation. Which one is best?

This week we sat down with Alex Walker, front end developer at SitePoint, and Brad Barrow, front end developer at Flippa, and discussed the differences between the two CSS behemoths. Brad and Alex have both used Bootstrap and Foundation extensively, and offer insight the pros and cons of each.

Also, we’re hosting a special Talk With the Experts
session this Wednesday, November 27 at 12:30pm PST on Foundation. Don’t miss it!

  • Glow

    First things first: do you need a CSS framework?

  • Anonymous

    Need? Not sure about that.

    In my opinion, a well thought out, well formed, well supported CSS framework is a good thing. New hires can get right into the code and understand what is going on quick, devs that focus more on back end code can whip up something that looks great and is usable. You can work on the app/site structure, features etc and style it later.

    Since I’ve started using BS back in 1.x, I haven’t started a site w/o it and I’ve been better off for it. Using a framework doesn’t mean you forget how to code… but why not hit the floor running by saving time?

    We juggle a lot of hats too… that’s why Ruby devs use Rails, PHP devs use CodeIgniter or Laravel, Javascript… we use jQuery. Why should we re-invent the wheel all the time? Put that time and brain power to new and exciting things.

    To each his own… but I rather use it than not use it.

  • Anonymous

    @glow: Short answer. No.

    Our starting position for this particular discussion was ‘Assuming you identified the need for full-featured framework, which would you choose?’.

    @skattabrain has made some excellent points.

    I would question whether it makes sense to keep re-writing the same classes again and again for each project, but if you’re implementing a very simple design, there isn’t much lost by starting from scratch. Often developers begin copying code snippets from projects to project and suddenly bam! — you’ve accidently got your own framework. Except only you know it, and it’s not documented outside your brain.

    I think there is definitely a place for smaller pared-back, ‘grid-only’ frameworks like Skeleton and Inuit. You might write equivalent code, but IMHO you’re unlikely to write better.

    Bigger frameworks like Bootstrap and Foundation are big commitments and shouldn’t necessarily be your default for all projects. But with something the size of SitePoint/Learnable, we are getting a lot bang for our buck.

    I think CSS precompilers, and their ability to connect and disconnect modules easily has made large-scoped framework more viable than pure CSS frameworks ever were.

    It’s fairly trivial to strip Foundation back to it’s bare bones, and then to add modules back in if and when they become necessary.

    But, @glow, your question is a great topic for a future discussion!

  • Anonymous

    on large projects, Preprocessors like LESS or SaSS really shine

    • Anonymous

      I like foundation a little better but both are excellent, I just prefer Zurb’s products and I prefer SaSS over LESS

  • Anonymous

    please dun use bootrstrap , ididn’t say it’s bad, bad we too many see websites with that blue button style like twitter, and I’m bored. You may use bootstrap but consider to modify some styles, be createivee

  • James Edwards

    I’ve never used any of these frameworks, and I’m curious to know how they work in production — does your LINK element (or import) call a server-side script that compiles and outputs CSS on the fly? Or do you pre-compile the CSS and save it to a static file, and that’s what the link/import calls?

    • I actually use to compile all my less or sass files. After that I have normal css which is deployed.

  • James Edwards

    And is that the usual approach?

    Because it occurs to me, that if the stylesheet is being generated on the fly, that’s an unreasonable overhead.

    Pre-processors offer no benefits to users, they’re purely for our convenience, so if the resulting stylesheet takes longer to generate, or produces a larger file, then it cannot be justified (since we shouldn’t make users take responsibility for our problems).

    But like I say, I don’t know if that’s the case or not. I would need to be convinced that it isn’t, before I’d be prepared to use one.

    • I think it is the usual approach. You should never compile in production. You could maybe compile on the fly while developing.

      Take a look at the less website, they recommend you to pre compile.

      If you don’t want to compile less and simply use bootstrap you can use and link it in your html head.

      But take a look at less or sass, I prefer it over riding old-school css.

  • James Edwards

    I’m not sure I’d describe vanilla CSS as “old-school”. Pre-processors still write CSS, they’re just an abstraction layer.

    But anyway :-) I’m encouraged by what you’ve said, and I’ll look into it further, cheers.

Get the latest in Front-end, once a week, for free.