A Meteor package of Thoughtbot's, Neat.
A lightweight, semantic grid framework built on top of Bourbon
Neat is a fluid grid framework built on Bourbon with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
##Install
- Make sure to add sass support to your meteor app:
meteor add fourseven:scss
- From within your Meteor app's directory:
meteor add wolves:bourbon
- From within your Meteor app's directory:
meteor add wolves:neat
- Create a
scss.json
configuration file in the app's root with:
{
"includePaths": [
".meteor/local/build/programs/server/assets/packages/wolves_bourbon",
".meteor/local/build/programs/server/assets/packages/wolves_neat"
]
}
Example of scss.json using full bourbon suite
(This would be used after installing the wolves:bitters
& wolves:neat
packages along with bourbon)
{
"includePaths": [
".meteor/local/build/programs/server/assets/packages/wolves_bourbon",
".meteor/local/build/programs/server/assets/packages/wolves_bitters",
".meteor/local/build/programs/server/assets/packages/wolves_neat"
]
}
##Usage
- Simply import Bourbon at the top of your sass file, then import neat directly after it
*.scss
@import "bourbon/bourbon";
@import "neat/neat";
*.sass
@import bourbon/bourbon
@import neat/neat
Because Meteor will attempt to compile you app's local stylesheets prior to copying the server assets directory, the first time you run the app after installing the package your app will complain that it is unable to find it. For the moment this can be resolved by either stopping and restarting the app, at which point you should no longer get this error message, our running touch
on you local stylesheet thats attempting to access the package, triggering a reload.
It’s not recommended to add or modify the Neat files so that you can update them easily.
More information can be found in the wiki.
First off, if you are planning to override the default grid settings (12 columns), it is recommended to create a _grid-settings.scss
file for that purpose. Make sure to import it right before importing Neat:
@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";
In your newly created _grid-settings.scss
, import neat/neat-helpers
if you are planning to use new-breakpoint()
, then define your new variables:
@import "neat/neat-helpers";
// Change the grid settings
$column: 90px;
$gutter: 30px;
$grid-columns: 10;
$max-width: em(1088);
// Define your breakpoints
$tablet: new-breakpoint(max-width 768px 8);
$mobile: new-breakpoint(max-width 480px 4);
See the docs for a full list of settings.
Next, include the outer-container
mixin in the topmost container (to which the max-width
setting will be applied):
div.container {
@include outer-container;
}
Then use span-columns
on any element to specify the number of columns it should span:
div.element {
@include span-columns(6);
}
If the element’s parent isn’t the top-most container, you need to add the number of columns of the parent element to keep the right proportions:
div.container {
@include outer-container;
div.parent-element {
@include span-columns(8);
div.element {
@include span-columns(6 of 8);
}
}
}
To make your layout responsive, use the media()
mixin to modify both the grid and the layout:
.my-class {
@include media($mobile) { // As defined in _grid-settings.scss
@include span-columns(2);
}
}
// Compiled CSS
@media screen and (max-width: 480px) {
.my-class {
display: block;
float: left;
margin-right: 7.42297%;
width: 46.28851%; // 2 columns of the total 4 in this media context
}
.my-class:last-child {
margin-right: 0;
}
}
By setting $visual-grid
to true
, you can display the base grid in the background (default) or as an overlay. You can even change the color and opacity of the grid-lines by overriding the default settings as detailed in the section below.
The visual grid reflects the changes applied to the grid via the new-breakpoint()
mixin, as long as the media contexts are defined before importing Neat.
Using omega()
with an nth-child
pseudo selector in a mobile-first workflow will cause the style to be applied to wider-viewport media queries as well. That
is the cascading nature of CSS.
One solution would be to provide an omega-reset()
mixin that negates the effect of omega()
on that specific nth-child
pseudo selector. While this is
often the most suggested solution, it is also a lazy hack that outputs ugly code and can quickly get out of hand in complex layouts. As a general rule, having to undo CSS styles is a sign of poor stylesheet architecture (more about CSS code smells).
The other, more elegant, solution is to use mutually exclusive media queries, also referred to as media-query
splitting. This would guarantee that omega()
styles are only applied where desired.
$first-breakpoint-value: 400px;
$second-breakpoint-value: 700px;
$medium-viewport: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value));
$large-viewport: new-breakpoint(min-width em($second-breakpoint-value + 1));
.element {
@include media($medium-viewport) {
@include span-columns(6);
@include omega(2n);
}
@include media($large-viewport) {
@include span-columns(4);
@include omega(3n);
}
}
If, for some reason, you still think that omega-reset
is the only way you want to go, check out Josh Fry’s omega-reset.
The visual grid is built using CSS gradients whose stops might contain decimal values depending on the default settings of your grid. In order to render the gradient, browsers round the pixel values since they can’t deal with pixel fractions.
As a result the viusal grid might be few pixels off in some browsers. The result is also inconsistent across browsers. For best results, preview your website on Firefox as it renders closest to the expected outcome.
At this point, writing an internal rounding mechanism is not high priority.
Unless you open a pull request, the answer is most likely going to be no. Neat is lightweight and simple compared to other grid frameworks, and strives to remain so. We have plans for adding new features in future versions of the framework, but these will be most likely to support new ways of working with layouts on the Web, not patches to existing ones.
- Add the docset to Dash 1.8+ (Preferences > Downloads > + Add Docset Feed >
http://neat.bourbon.io/docset/Neat.xml
) - Ask questions on Stack Overflow. Don’t forget to tag them
bourbon
andneat
. - Suggest features or file bugs in Issues.
- Join
#bourbon-neat
onirc.freenode.net
.
- Chrome 4.0+
- Firefox 3.5+
- Internet Explorer 9+ (visual grid is IE 10 only)
- Internet Explorer 8 with selectivizr (no
media()
support) - Opera 9.5+
- Safari 4.0+
- Bourbon: A simple and lightweight mixin library for Sass
- Neat: A lightweight semantic grid framework for Sass and Bourbon
- Bitters: Scaffold styles, variables and structure for Bourbon projects
- Refills: Prepackaged patterns and components, built on top of Bourbon, Bitters & Neat
Neat is maintained and funded by thoughtbot, inc. Tweet your questions or suggestions to @bourbonsass and while you’re at it follow us too.
Copyright © 2012–2014 thoughtbot, inc. Neat is free software, and may be redistributed under the terms specified in the license.