Comment by lucisferre | Hacker News Reader

Comment by lucisferre | Hacker News Reader

One of my biggest complaints with Bootstrap is the grid system (classes or mixins) and the very strict hierarchy of container > row > columns. I find this pattern leads to a lot more extraneous elements than I would like.

I'd compare this to [Bourbon Neat](http://neat.bourbon.io/) (which I've only looked over) and [Foundation's grid](http://foundation.zurb.com/docs/components/grid.html) mixins which seem to be much more flexible and offer the ability to use columns without rows (and no "container" required) allowing for a much more "semantic" results.

I spent a lot of time trying to decide between Bootsrap, Foundation and Bourbon + Neat recently and in the end had to settle for Foundation for the following reasons:

* Has decent default typography settings (not available with Bourbon + Neat though Bootstrap's is fine)

* Much better Grid than Bootstrap (though I think I may like Neat better)

* SASS not LESS (all my current work is in SASS though switching wouldn't be all that painful)

I say "settle" because I think so much of Bootstrap's styles and UI components are superior. Particularly the forms, but also progress bars, badges, labels, navigation, menus are all nicer.

Right now I think what I'd love to have is a set of extension defaults for Bourbon + Neat that bring in nice styling for forms, buttons, typography, etc. In fact I'm half tempted to just copy it all from Bootstrap. Who knows when I'll have time to do something like that though.

you can use semantic naming with bootstrap too.

  .wrapper {
    .make-row();
  }
  .content-main {
    .make-column(8);
  }
  .content-secondary {
    .make-column(3);
    .make-column-offset(1);
  }
  <div class="wrapper">
    <div class="content-main">...</div>
    <div class="content-secondary">...</div>
  </div>

This is the exact thing I'm talking about. Try doing that without a container as a top-level container so you actually have:

<div class="container"> <div class="wrapper"> <div class="content">

Besides what, semantically speaking, is a wrapper anyways?

And what is a div, semantically speaking? Wrapper is the same, only with class attached for identification/styling purposes.

I'm not sure why that is a counter argument. The point I'm making is that I can use Foundation's Grid with a minimum of extraneous container divs levels which I prefer. Bootstrap has a minimum of two.

Bootstrap's grid styles use negative margins and other weirdnesses that make them awkward if not used exactly as they were intended to be. If that's fine for what you're doing great, but I found Foundation's grid easier to use as a result of it's different design.

The timing of this post is fortuitous, as I'm looking at building a landing page and had a long discussion last night with a front-end developer about using Bootstrap to do it. He's urging me to use Foundation instead.

I haven't developed production level front-end code for years, and Bootstrap looks like a quick and easy way to get something up that doesn't look like arse (instead, it looks like Bootstrap). But I am hearing great things about Foundation as a good basis for long-term development; semantic design being a major point, plus lack of bloat.

I don't know why people say Bootstrap is "bloated" and Foundation is not. They are pretty similar, in fact the Foundation CSS has a larger footprint (86kb vs 65kb). I think people say it because Foundation feels more "raw" but this is not a selling point in my opinion. In fact I find that Foundation's biggest flaw is that it's components don't look that hot.

I will also agree Bootstrap is a quick and easy way to get something up. I would argue it is quicker and easier than Foundation, but many people with serious CSS skills don't want to work with it for some of the reasons I brought up. I think that Foundation is more flexible and extensible which is a big strength.

However, none of this is that important for a landing page, I have been able to build landing pages quite comfortably with both and don't think either has a huge advantage here. A landing page isn't a huge task either so I'd try doing a rough design on paper and building with both to see which you like best.

I will probably concede though for most "product/fit" finding experiments Bootstrap may still have the speed advantage, particularly if you are not that familiar with CSS (in fact I credit Bootstrap with teaching me a lot about CSS).

What's funny is how many people use the kitchen sink (all-in) bootstrap.min.css files... I generally pull the source .less files and then copy the variables, and mixins file, and create my own bootstrap-custom.less that points to the copied files, and the rest of the original... from there, I can modify the copied bits at will, and better integrate my own extensions.

The bloat argument I was given - and I may be rephrasing it incorrectly - is that for Bootstrap, you include the base CSS and then override a bunch of stuff, so you often end up with elements that get defined in multiple places multiple times. Especially so if you use a "Bootstrap style" on top of the default.

Honestly don't get why people can't just use CSS for something like this.

Talk about over-engineering

The subject is Bootstrap. The landing page is just a way to show some of Bootstrap...

>SASS not LESS

Did you try bootstrap-sass? https://github.com/thomas-mcdonald/bootstrap-sass

Bootstrap 2 or 3 or both? BS3's grid system is certainly an improvement over BS2 and looks like it was modelled on Foundation's grid system from your link. I haven't used Foundation or Bourbon Neat though.

I've used both, but I'm talking about 3. I tried it out after extensively trying out Foundation's grid and found it does not work nearly as well. It does some odd things with negative margins and such that make it impossible to use any of the mixins without following the exact prescription of container > row > column.

Why not use Neat for your grid and Foundation for typography?

Honestly, I've been thinking about it. Have not tried it out that way yet. One step at a time. Step one was upgrading from 3 to 4 and doing some semantic cleanup (no more grid classes anywhere).

Reply on news.ycombinator.com