{"id":10588,"library":"bourbon-neat","title":"Bourbon Neat Sass Grid Framework","description":"Bourbon Neat is a lightweight, semantic, and fluid grid framework built with Sass. Currently at stable version 4.0.0, it aims to provide a flexible foundation for responsive layouts while being straightforward to integrate. Its release cadence involves major versions every few years, with more frequent minor and patch updates addressing fixes and enhancements. A key differentiator is its emphasis on semantic markup and a 'fluid first' approach to grid design, offering robust mixins for defining columns, gutters, and media queries without injecting excessive presentational classes into HTML. It is part of the 'Bourbon Family' of Sass tools, which implies good interoperability with other libraries like Bourbon and Bitters.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/thoughtbot/neat","tags":["javascript","columns","grid","layout","media","media-queries","neat","queries","sass"],"install":[{"cmd":"npm install bourbon-neat","lang":"bash","label":"npm"},{"cmd":"yarn add bourbon-neat","lang":"bash","label":"yarn"},{"cmd":"pnpm add bourbon-neat","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for compiling Sass stylesheets. Version 3.4+ for Ruby Sass.","package":"sass","optional":false},{"reason":"Alternative Sass compiler, version 3.3+.","package":"libsass","optional":false},{"reason":"Common Node.js binding for LibSass, used for Node-based asset pipelines.","package":"node-sass","optional":false},{"reason":"Optional module importer for Node-based Sass pipelines, simplifying `@import` resolution.","package":"eyeglass","optional":true}],"imports":[{"note":"For npm installations (with `node-sass` and correct `includePaths`) or Rails, 'neat' is the correct path. It resolves directly via `require(\"bourbon-neat\").includePaths`.","wrong":"@import 'bourbon-neat';","symbol":"@import 'neat';","correct":"@import 'neat';"},{"note":"When installed via RubyGems using `gem install neat` and then `neat install`, the files are typically placed in a 'neat' subdirectory, requiring the full path.","wrong":"@import 'neat';","symbol":"@import 'neat/neat';","correct":"@import 'neat/neat';"},{"note":"Configuration variables are typically prefixed with `$grid-` or `$neat-` for global settings like `$grid-columns` or `$neat-gutter`.","wrong":"$neat-grid-columns: 12;","symbol":"$grid-columns","correct":"$grid-columns: 12;"}],"quickstart":{"code":"@import 'neat';\n\n// Configure Neat variables (optional, defaults are fine)\n$neat-grid-columns: 12;\n$neat-gutter: 20px;\n\n// Define a custom grid for media queries (optional)\n$custom-grid: (columns: 6, gutter: 15px);\n\n.outer-container {\n  @include outer-container;\n}\n\n.main-content {\n  @include column(9);\n\n  @include media('max-width', 768px) {\n    @include column(12);\n  }\n\n  @include media('max-width', 480px) using ($custom-grid) {\n    @include column(6);\n  }\n}\n\n.sidebar {\n  @include column(3, omega()); // omega() mixin for the last column in a row\n\n  @include media('max-width', 768px) {\n    @include column(12);\n  }\n}","lang":"scss","description":"This quickstart demonstrates how to set up a basic responsive grid. It shows `outer-container` for overall layout, `column` for defining element widths, `omega()` for clearing floats on the last column, and responsive `media` queries, including using a custom grid."},"warnings":[{"fix":"Migrate your project to use `npm install --save bourbon-neat` or `gem install neat` for installation, updating your build process accordingly.","message":"Bower support has been entirely removed starting with Neat v4.0.0. Projects still relying on Bower for Neat will need to migrate to npm or RubyGems for package management.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Verify your project uses a modern Sass compiler (e.g., Dart Sass, `node-sass`) and update your build scripts if they implicitly relied on the Ruby Sass gem's presence.","message":"The Ruby Sass gem (deprecated) is no longer a runtime dependency as of v4.0.0. While this removes a legacy dependency, ensure your Sass compilation environment is updated to use Dart Sass or LibSass-based compilers like `node-sass`.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Review your Sass files for `grid-collapse` usage and adjust layouts that might be affected by the `float` property removal. Explore `grid-shift` for offsetting columns and `grid-media` for managing responsive grids.","message":"Version 2.0.0 introduced significant changes, including the addition of `grid-shift` and `grid-media` functionality, while `grid-collapse` removed its `float` property. These changes might break layouts relying on previous behaviors or expecting the `float` property within `grid-collapse`.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Update Neat to v1.9.1 or newer. For custom Sass, replace `&&` with the `and` keyword in boolean expressions.","message":"The use of `&&` for boolean 'and' in Sass was deprecated in older versions. Neat fixed this in v1.9.1, but if using an older version or custom mixins, be aware of this Sass warning.","severity":"deprecated","affected_versions":"<1.9.1"},{"fix":"Standardize on `@import` rules for all Sass dependencies, including Neat, and avoid using Sprockets directives in your `.scss` files if you wish to use Sass's `@import` functionality effectively.","message":"When using Neat in Ruby on Rails, `@import` rules in `application.scss` are not compatible with Sprockets directives (e.g., `//= require`). You must choose one or the other for your asset management.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `bundle update sass` to upgrade the `sass` gem to a compatible version within your Ruby on Rails project.","cause":"The `sass` gem (Ruby Sass) in your Gemfile or system is outdated and conflicts with Neat's requirements.","error":"Bundler could not find compatible versions for gem \"sass\""},{"fix":"This specific issue was fixed in Neat v3.0.1. Upgrade your `bourbon-neat` package to version 3.0.1 or newer. Ensure your `node-sass` `includePaths` are correctly configured if using npm.","cause":"An issue prevented Neat from being correctly resolved or found by SassC, a LibSass wrapper.","error":"Neat to not be found when using SassC."},{"fix":"This issue was fixed in Neat v2.1.0. Upgrade your `neat` gem to version 2.1.0 or newer. Also, ensure your `application.scss` correctly uses `@import \"neat\";`.","cause":"A bug in earlier versions of Neat prevented it from being correctly located by Rails' asset pipeline.","error":"Neat to not be found within Rails apps."}],"ecosystem":"npm"}