Neat | Hacker News Reader

Neat

thoughtbot.com

375 pointsGertig36 comments

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.

Thanks for pointing that out betageek. That's certainly an oversight. We will be working on more IE compatibility and a better documentation.

Here: https://github.com/thoughtbot/neat#browser-support

Zurb Foundation (http://foundation.zurb.com/) is another great one that's done with Sass.

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 second foundation, did two big projects with bootstrap and it kept getting in the way of what I wanted to do.

I've now done two sites with Foundation and it's my new standard, way more designer friendly and always feels flexible.

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?

The only downside is the javascript libraries are a bit underdeveloped and lack the large OSS-community scrutiny that Twitters benefits from.

But the basic stuff is pretty similar, so it's easy to switch.

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.

One of the guys who built Bootstrap actually built Foundation previously when he was at Zurb. Blanking on his name right now.

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).

One of the things I like about Foundation is their nested column syntax. I don't have to worry about how many columns I have to work with.

In Neat I have to write something like: @include span-columns(4 of 8); If I'm in a div with @include span-columns(8);

In Foundation I always just allocate 12 (default) columns no matter where I am. Shown here: https://gist.github.com/3009035

This makes the css much more reusable.

Neat looks like a nice, lighter weight alternative to Foundation, but I can't switch for this reason.

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.

Foundation looks great but it seems I'd need an entire ruby stack to use the SCSS features? Am I misreading something?

It depends on compass, so yes. I haven't found an isolated SCSS subset.

I still don't quite understand what exactly compass does.

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.

Good and bad on both frameworks.

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.,

    .userprofile {
        .well;
    }

Susy (http://susy.oddbird.net) is another well-designed option for semantic grids that's been around for awhile.

Also, check out the Vertical Rhythm Compass mix-in (http://compass-style.org/reference/compass/typography/vertic...)

It works great with Susy.

If anyone is looking for an AMAZING and well documented theme all ready to go:

http://www.display-inline.fr/demo/developr/template/login.ht...

use any un/pw to log in.

http://themeforest.net/item/developr-fully-responsive-admin-...

This guy kicks ass!

Wow, that's actually quite well done. A bit over the top with some transitions and such, but looks pretty neat.

Seems cool but why not just go with the bootstrap or 1140?

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!

Sell me on how this is better than http://semantic.gs/

Semantic.gs has been absolutely great for me. I can do any kind of responsive design I could imagine.

And it works with Sass, Less, and Stylus.

Looking at Neat's mixin examples, I can already tell you their actual mixin names arent semantic... even if their generated CSS/HTML is.

Semantic GS is 100% semantic, even the mixins.

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?

Edit: http://semantic.gs/examples/responsive/responsive.html they even have a Responsive example on the front page of their website, so I really dont understand why you think Semantic.gs isnt responsive?

> i.e. it doesn't come with a straightforward way to change the grid for specific breakpoints.

isn't that what media queries are for?

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..

http://nicolasgallagher.com/about-html-semantics-front-end-a...

Sorta interesting argument against this sort of grid system.

"Neat" is not a headline

Agreed. Here is something better http://robots.thoughtbot.com/post/30928446434/introducing-bo...

I never understood why someone would use bourbon over compass (http://compass-style.org/).

Ditto, and this is basically their answer to (Susy)[http://susy.oddbird.net].

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.

I wish there was something like this for Stylus.. It's by far my favourite CSS Pre-Processor

Reply on news.ycombinator.com