Dear CSS framework writers (not just Neat) can you start adding a section to your docs that states what Browsers your frameworks are supposed to support. This doesn't work in IE8 at all, which is fine if your not going to support it as long as you make that clear.
I tend to prefer it over the more intrusive styles Bootstrap seems to add; Foundation lets you more easily pick and choose what you do and don't want to drag in.
I'm starting a new project and I've been thinking about Foundation for a while, I'm going to take your recommendation and go with it. Any major differences between Foundation and Bootstrap that might catch someone coming from Bootstrap out, or is it plain sailing?
I actually started a project with Zurb, and switched to Bootstrap, because it offers a bit more, and looked a bit better out of the box. I think Bootstrap has more momentum, which can be important for these kinds of things.
As one of the designers behind Neat, I like what Zurb have been doing with Foundation, but I'm not entirely fond of their semantic grid framework. Many decisions have left me scratching my head and wondering if there wasn't a better way to do things (innerRow() and mobile[...]() mixins are some of these).
Fair enough. Until we come up with a better way to detect nested columns, I don't think explicit nested rows is the route we want to take. Our primary goal is to use as few mixins as possible to achieve proper nesting.
Foundation does seem really cool but there's a lot of little things that kind of bother me. Take a look at their "tabs" documentation (http://foundation.zurb.com/docs/tabs.php). Is a <dl> really the best element for tabs? The markup also has to link to "#about" to activate the content in <foo id="aboutTab"></foo> which is the opposite of what I've been doing all these years, <foo id="about"></foo> should be what it links to. Maybe I just worry too much.
One annoying thing about Zurb, it overrides the default styling of forms!
I find that really annoying because sometimes you want to use something like formtastic, which works by add a class name on the form element, but won't work because zurb has overridden the default style.
Twitter bootstrap does not do this.
I love the grid layout on zurb. It stretches to fit the width for tablets and phones. With bootstrap, the stretching happens only on phones.
What I do to avoid the class soup Bootstrap expects you to use in your HTML is import bootstrap.css in LESS/SASS and then inherit its classes in my semantic classes. E.g.,
Short but some details are there for 'why?'
"it relies entirely on Sass mixins and does not pollute your HTML with presentation classes and extra wrapping div's"
So they are just promoting an approach which is nonorthodox!
Hi, I'm one of the thoughtbot designers behind Neat. I have been using Semantic.gs for a while and it is one of my favorite grid frameworks out there. My gripe with Semantic.gs is that it is not responsive, i.e. it doesn't come with a straightforward way to change the grid for specific breakpoints.
I also don't see how span-columns() is any less semantic than .column().
I was thinking more of the "alpha" and "omega" mixins which made no immediate sense to me. I'm guess its part of your "golden ratio" code, but it still doesnt seem truly "semantic"
And I really dont see how Semantic.gs isn't responsive? Set its grid representation to percentages, write a few media queries, and its as responsive as any other grid system out there. The inherent behavior of the CSS box model + Percentage based semantic.gs + media queries is as responsive as I think you can get.... its all I've ever needed to do ANY responsive design I can imagine. I've never felt limited by Semantic.gs in terms of responsive design.
I really dont see how you could make that any easier? Are your mixins generating media queries? Is it really that hard to calculate a golden ratio and use it with Semantic.gs?
Please take some time to read the documentation and see the examples. The omega() (there is no alpha() mixin btw) mixin doesn’t compile to CSS, so debating whether it's semantic or not is beside the point.
If, after having a closer look, still think that Neat would not be solving any of your current problems, then you are more than welcome to stick to your guns. No tool is perfect for everyone.
not that i'm disagreeing that semantic html is a good thing, but shouldn't one consider the costs of using a system such as this? specifically, doing css modifications in the browser becomes more difficult since we can't just plop in a mixin the same way we could in the sass file. i can't really say how much more difficult it would be to debug css in the browser when using this system either.. though i don't see a reason why it should be easier than a traditional grid system to debug, i could think of some reasons that it might be more difficult.
i'm not trying to knock on this framework. i think thoughtbot is great, i love paperclip. i am a bit hesitant about the practical value of this though..
Susy's pretty awesome, and Eric Meyer and the Compass community have been working on it for a good year or more. This line sums it up best, "We don't design your site or dictate your markup, we just do the math and get out of your way."
Neat's solution is almost identical in every way, just newer and less tested.
Definitely nice if all you want is the flexible grid system from something like Bootstrap. Sometimes it can be a pain attempting to only use a certain component, and for something as core as a grid system, this is most certainly the lightest method.
