

Neat - Gertig
http://thoughtbot.com/neat/

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

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

~~~
kaishin
Here: <https://github.com/thoughtbot/neat#browser-support>

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

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

~~~
citricsquid
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?

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

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

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

------
andr
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;
        }

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

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

It works great with Susy.

------
beernutz
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...](http://www.display-
inline.fr/demo/developr/template/login.html)

use any un/pw to log in.

[http://themeforest.net/item/developr-fully-responsive-
admin-...](http://themeforest.net/item/developr-fully-responsive-admin-
skin/2085628)

This guy kicks ass!

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

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

~~~
Sharma
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!

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

~~~
kaishin
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().

~~~
alexanderh
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?

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

------
yycom
"Neat" is not a headline

~~~
kaishin
Agreed. Here is something better
[http://robots.thoughtbot.com/post/30928446434/introducing-
bo...](http://robots.thoughtbot.com/post/30928446434/introducing-bourbon-neat-
a-sassy-grid-framework)

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

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

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

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

