Bourbon Neat—A lightweight semantic grid framework for Sass and Bourbon (neat.bourbon.io)
over 9 years ago from Matt Achariam, Intent Renderer
over 9 years ago from Matt Achariam, Intent Renderer
This has been my framework of choice for the past year and I doubt I'll be switching to anything in the near future.
Love what the guys at thoughtbot are doing with Bourbon. Keeping things light and to the point instead of being as verbose as Compass. +10xp for thoughtbot.
I use bourbon + neat for all my projects. It's definitely my favourite sass framework, with great documentation. virtual high five to thoughtbot.
I've been using this framework since the beginning of the year & I'm loving it. Super simple terms & paired with bourbon, it's really solid.
I love Bourbon, but I also appreciate the useful components that come with Bootstrap and Foundation (forms, collapsing nav, js behaviors, etc).
I came across this: http://thoughtbot.github.io/bourbon_ui_smash/ but I don' t think it's being maintained.
In reality, I don't use 90% of the components in Bootstrap or Foundation. But knowing I can lean on them in a pinch informs my decision when I choose a framework. Just saying.
Nice find, hopefully it actually just hasn’t been released yet?
They did release Bitters relatively recently in the whole scheme of things, and Bourbon had some attention recently, so maybe this Smash thing is forthcoming. It does look like the form dropdowns are unfinished.
Check out a sneak peak of Refills: http://refills.bourbon.io/.
Refills is similar to UI-Smash. Ryan got it right, UI-Smash was a prototype, but it's now unmaintained.
dat 404 :(
Wow, that's just great. High-five, thoughtbot.
I had a problem with the link above, but I believe this is the same page: http://thoughtbot.github.io/refills/
+1 for Neat & Bourbon. They're both the starting point for any project I start.
Thoughbot are doing some great work on both of these projects. There's some key differences between Bourbon/Neat and Compass though.
Firstly, Bourbon/Neat do not require any 'unsemantic' classes in your markup (if you have an issue with that). No row
and column
classes required.
Secondly, Bourbon/Neat are pure Sass whereas Compass has some native C extensions. That's cool because you can use libsass (via grunt-sass), the super-fast C implementation of Sass rather than the Ruby based one. If you're using large frameworks like Foundation then compilation can become quite slow. libsass helps with this a lot.
Wait... I don't need compass to use bourbon.. man I feel like a fool! I've been using both (actually using things from both, such as vertical rhythm etc)..
I like Neat, a lot. I'm still fairly new to making my own grids, but I think I like it. I think i am starting to understand it too.
Can highly recommend Bourbon and Neat. Been using them on my projects for the past couple of years now and they're the base for a rapid prototyping framework I'm developing at the moment. So quick to put things together, very flexible and no need for the ugly column span classes you get in more prescriptive frameworks.
I've started to use Susy, which is apparently one of the preferred frameworks used by Sass core contributors.
It's great. I look forward to trying Bourbon & Neat to compare, though.
Susy is my grid-maker of choice. I've found that it makes IE debugging so much easier. I have zero complaints about it.
I definitely love Bourbon, and want to give Neat on a project soon!
Bourbon and Neat were both the first libraries of their kinds that I used (we worked with Thoughtbot in our early days to get off the ground). I've tried several others, but I always come back to Bourbon and Neat because they are rather un-opinionated and stay out of my way.
We are almost done with a redesign of our flagship website and we are thinking of using Neat. It looks very cool, I would like to see it get more traction though.
Why is this more semantic than a class based grid? Classes have no semantic meaning and neither do wrapping divs :)
Not sure if I'm understanding your question, but basically you can just use the provided mixins/functions and build custom classes as they make sense in your particular setup/layout :)
You're right. classes don't have any meaning so semantic isn't the right word. But it lets you keep all your layout and mediaquery stuff in the CSS file, away from the content.
Recently I completed a project using Neat. We had a large last minute change to the layout on a family of pages. So I jumped into my _layout.sass file, changes a couple numbers around, and then it just worked. it saved me from having to dig through multiple .haml documents and change classes throughout.
Oh right. As an added bonus you can also specify decimal grid widths, not that is really required.
I've built my last several projects with Neat! It's incredible useful. Sometimes I do find myself setting float: none, but that might be a me problem rather than a Neat problem.
Both of those sites are inspiring! I especially love the animation on the links in your footer on Meeet.co. So nice.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now