If you use Sass, enjoy using Bourbon and would like to use a smart grid framework for lightweight layouts, Neat might very well become your trusted companion for the foreseeable future. In this short introduction piece I’ll provide you with a couple of sensible reasons to give this unopinionated grid framework a shot.
Welcome to Your New Favorite Tool
Bourbon Neat was conceived by Reda Lemeden and is part of the fantastic Bourbon suite. It’s a lightweight, responsive grid framework, built on top of Sass and Bourbon. The project itself is supported by thoughtbot and their designers take care of it.
A Word on Frameworks
Before we install anything, let me give you a couple of good reasons to look into it. There are countless frameworks that promise to deliver a stable frame for developing your designs. And most of them certainly succeed in one way or another. But to what degree? Ask yourself:
- Will you (easily) be able to switch frameworks in the future?
- Does it give you problems with cluttering your markup?
- Is it suited for scaling projects?
- Is it ridiculous in size?
- Does it come with a steep learning curve?
- Does it give your sites a generic look?
If answers to any of the issues above are sounding alarm bells, I just want to assure you that such headaches are easily avoidable these days. It’s very rare to come across a project that balances its payoffs so well as Bourbon Neat (Or just “Neat” for short). Why so? Here are a couple of good reasons:
- It’s super lightweight
- It’s future-proof
- It’s easy to use
- It’s responsive
- It’s semantic
- It’s scalable
- It’s elegant
Bourbon also aims to provide you with options,not answers. What I like especially is that it isn’t a factory for generic, pre-defined styles. That way it aids the designer’s own design decisions without standing in the way.
And Now a Word on Semantics
This is an important issue but I’ll make it short: ugly presentational classes and additional empty wrapper divs which you often find in front-end libraries are ghosts from the past (at least they should be ghosts). Neat plays a significant role in moving past these gnarly semantic habits. It helps you write clean, unobtrusive markup, and have all your grid styles cleanly separated in your stylesheets by way of mixins.
What’s in the Box?
Why deal with a grid framework at all? Well, design is all about relationships and relationships can be hard. Grids make them easier by helping you tie structures together in a more meaningful and organized way. They simplify, reduce and stabilize—in essence, they help trim the fat out of designs. Neat achieves this with just fourteen mixins..
reset-layout-directiondirection-contextshift-in-contextdisplay-contextouter-containerspan-columnsreset-displayfill-parentreset-allomegamediashiftpadrow
..a single function for setting breakpoints..
new-breakpoint
…and twelve variables for settings:
default-layout-directionvisual-grid-opacityborder-box-sizingvisual-grid-indexdisable-warningsvisual-grid-colordefault-featuregrids-columnsmax-widthvisual-gridcolumngutter
Boom, that’s it! Pretty low key, but it equips you with a lot of horsepower!
Responsive Grids
Change and the need for flexibility are constant future-proof necessities. Incorporating media queries should be smooth and easily manageable, but they can quickly become a mess if not handled with care.
Bourbon Neat encourages a DRY approach for handling your breakpoints with its ”new-breakpoint“ function. Save breakpoints in variables and resuse them wherever you need. Changing a bunch of media queries in one place is hard to beat.
To be more concrete, let me give you an example. Here’s a random Sass snippet using the “new-breakpoint” function for media-queries:
$mobile: new-breakpoint(max-width 500px 4)
.sidebar
+span-columns(3)
+media($mobile)
+span-columns(1)
.content
+span-columns(9)
+media($mobile)
+span-columns(3)
For now, don’t concern yourself too much with the mixins used in this example. In the coming tutorials I’ll dive deeper into the nitty-gritty of this. What should be apparent in this example, though, is the ease of use if you decide to change your media queries. Through the use of Sass variables and this function, you’ll have one consistent, authoritative place to change and tweak your responsive layout, without touching each element individually.
Installation
Now that you know what you’re getting yourself into, let’s install this beauty:
Note: you’ll need Sass installed before you start.)
Step 1: Install Bourbon
Take a look at my tutorial about Bourbon if you need to follow this step.
Step 2: Install the Neat gem
This is done via RubyGems, like so:
gem install neat
Step 3: Install Neat
Via the command line, change into a Sass directory of your choosing, then run:
neat install
This will install all the necessary mixins, settings and functions in your designated directory.
Step 4: Import Neat Into Your Sass Stylesheet
@import 'bourbon/bourbon' @import 'grid-settings' @import 'neat/neat'
Note: the import order is important here. Because Neat was built on top of Bourbon you need to import Bourbon first. The same goes for its grid-settings.
Installing With Rails
Step 1:
If you want to use Neat with Rails you’ll need to add:
gem neat
to your Gemfile.
Step 2:
Then run:
bundle install
in your terminal.
Step 3:
In “application.sass” you’ll then need to add:
@import 'bourbon' @import 'grid-settings' @import 'neat'
and you’re good to go. Remember though, that @import isn’t playing nice with Sprockets directives and therefore you’ll need to delete their references. In “application.sass”, “require”, ”require_tree”, and ”require_self” need to go.
Neat CLI
Last but not least, the fine folks at thoughtbot have provided us with a nice command line interface. It comes with three self-explanatory commands:
neat install neat update neat remove
Closing $0.02
Using intelligent tools like this, it’s a joy working with grids. This framework does a great job in planning for developer happiness (long and short term).
In the next tutorial we’ll take a closer, more technical look at how to use Neat.
Comments