7 ms·

Neat

375 points by Gertig 14y ago

jameswyse 14y ago
I wish there was something like this for Stylus.. It's by far my favourite CSS Pre-Processor
Shank 14y ago
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.
wasd 14y ago
Seems cool but why not just go with the bootstrap or 1140?
- Sharma 14y ago
  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 14y ago
    Sell me on how this is better than http://semantic.gs/ 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 14y ago
      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 14y ago
        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 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 14y ago
        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.
  - logical42 14y ago
    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..
  - logical42 14y ago
    http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a... Sorta interesting argument against this sort of grid system.
pie 14y ago
Susy (http://susy.oddbird.net http://susy.oddbird.net) is another well-designed option for semantic grids that's been around for awhile.
- bradgessler 14y ago
  Also, check out the Vertical Rhythm Compass mix-in (http://compass-style.org/reference/compass/typography/vertical_rhythm/ http://compass-style.org/reference/compass/typography/vertic...) It works great with Susy.
damncabbage 14y ago
Zurb Foundation (http://foundation.zurb.com/ 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 14y ago
  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 14y ago
    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 14y ago
      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 14y ago
        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 14y ago
        One of the guys who built Bootstrap actually built Foundation previously when he was at Zurb. Blanking on his name right now.
andr 14y ago
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; }
beernutz 14y ago
If anyone is looking for an AMAZING and well documented theme all ready to go: http://www.display-inline.fr/demo/developr/template/login.html 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-skin/2085628 http://themeforest.net/item/developr-fully-responsive-admin-... This guy kicks ass!
- netghost 14y ago
  Wow, that's actually quite well done. A bit over the top with some transitions and such, but looks pretty neat.
yycom 14y ago
"Neat" is not a headline
- kaishin 14y ago
  Agreed. Here is something better http://robots.thoughtbot.com/post/30928446434/introducing-bourbon-neat-a-sassy-grid-framework http://robots.thoughtbot.com/post/30928446434/introducing-bo...
betageek 14y ago
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 14y ago
  Thanks for pointing that out betageek. That's certainly an oversight. We will be working on more IE compatibility and a better documentation.
  - kaishin 14y ago
    Here: https://github.com/thoughtbot/neat#browser-support https://github.com/thoughtbot/neat#browser-support
sync 14y ago
I never understood why someone would use bourbon over compass (http://compass-style.org/ http://compass-style.org/).
- efields 14y ago
  Ditto, and this is basically their answer to (Susy)[http://susy.oddbird.net 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.
  - deleted 14y ago
    [deleted]

375 points by Gertig 14y ago

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

Shank 14y ago

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.

wasd 14y ago

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

Sharma 14y ago
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 14y ago
  Sell me on how this is better than http://semantic.gs/ 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 14y ago
    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 14y ago
      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 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 14y ago
        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.
- logical42 14y ago
  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..
- logical42 14y ago
  http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a... Sorta interesting argument against this sort of grid system.

pie 14y ago

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

bradgessler 14y ago
Also, check out the Vertical Rhythm Compass mix-in (http://compass-style.org/reference/compass/typography/vertical_rhythm/ http://compass-style.org/reference/compass/typography/vertic...) It works great with Susy.

damncabbage 14y ago

Zurb Foundation (http://foundation.zurb.com/ 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 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      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 14y ago
        One of the guys who built Bootstrap actually built Foundation previously when he was at Zurb. Blanking on his name right now.

andr 14y ago

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

beernutz 14y ago

If anyone is looking for an AMAZING and well documented theme all ready to go: http://www.display-inline.fr/demo/developr/template/login.html 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-skin/2085628 http://themeforest.net/item/developr-fully-responsive-admin-... This guy kicks ass!

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

yycom 14y ago

"Neat" is not a headline

kaishin 14y ago
Agreed. Here is something better http://robots.thoughtbot.com/post/30928446434/introducing-bourbon-neat-a-sassy-grid-framework http://robots.thoughtbot.com/post/30928446434/introducing-bo...

betageek 14y ago

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 14y ago
Thanks for pointing that out betageek. That's certainly an oversight. We will be working on more IE compatibility and a better documentation.
- kaishin 14y ago
  Here: https://github.com/thoughtbot/neat#browser-support https://github.com/thoughtbot/neat#browser-support

sync 14y ago

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

efields 14y ago
Ditto, and this is basically their answer to (Susy)[http://susy.oddbird.net 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.
- deleted 14y ago
  [deleted]