Quick start your Bourbon and Neat

As a designer, initializing a new project with dependencies, gems and general command line head-scratching can be a hassle, especially if you just want to get going with the actual designing and front-end coding.

thoughtbot built the Sass mixin libraries Bourbon and Neat to make the front-end coding consistent, fast and more fun. To have you focus on the design rather than vendor prefixes, re-inventions of the wheel or breaking grids.

Although these libraries are fairly simple to install and use, the screencasts below might make the transition into taking advantage of the Bourbon and Neat mixins even smoother. Sometimes you just want to start the car and drive without having to go through every part of the motor, so if you are a visual learner you may enjoy these screencast tutorials:

Installing Bourbon for a non-rails project

Installing Neat for a non-rails project

Installing Bourbon for a rails project

Installing Neat for a rails project

To learn more about what Bourbon and Neat can do, go here for Bourbon and here for Neat.

Version 1.0 of Bourbon Neat, a Sass-based responsive grid framework

When we released Neat—a semantic grid framework built on top of Sass and Bourbon—earlier this fall, it was welcomed with great enthusiasm in the Sass community. Today I’m pleased to announce that Neat is finally out of the beta, introducing new responsive features, a visual grid, and better support for non-Rails projects.

Responsive Web Design

The breakpoint() mixin becomes media() in Neat 1.0 in order to keep the syntax as close to CSS3 as possible.The update also introduces new-breakpoint(), a helper function that you can use to define new media contexts and use them throughout your project.

A media context is comprised of a width breakpoint and an optional total column count that would redefine the grid. For instance, using a four-column grid for mobile devices would involve defining a new media context with a max-width of 480px and a grid column count of 4, like so:

$mobile: new-breakpoint(max-width 480px 4);

Once defined, you can use the $mobile context throughout your project using the media() mixin:

div {
  height: 500px;

  @include media($mobile) {
    // All layout mixins in this context will use a base grid of 4 columns
    height: 100px;
  }
}

Which would output the following CSS:

div {
  height: 500px;
}

@media screen and (max-width: 480px) {
  div {
    height: 100px;
  }
}

Additionally, you can now use both min-width and max-width in the same context:

$tablet: new-breakpoint(min-width 481px max-width 991px 8); // Use an 8 column grid on tablets

Keep in mind that each call of the media() mixin would result in a separate @media block in the CSS output, a Sass limitation that is still being actively discussed.

Visual Grid

Due to popular demand, we’ve baked in a pure-Sass visual grid in this milestone release. You can now display the underlying grid either as a background or as an overlay, and even change its color and opacity to better fit your content. Add the following line in your Neat settings to turn the visual grid on:

$visual-grid: true;

You can then change its look by overriding the default variables:

$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.3;

Bonus: If you use new-breakpoint() to change the base grid, the visual grid will automatically follow. You’re welcome.

Non-Rails Workflow

If you are planning to use Neat on a non-Rails project, you’re in for some good news. Neat 1.0 comes with a command line interface that allows you to install, update and remove the framework without hassle.

Start off by installing the gem in your Ruby environment:

gem install neat

Then run the neat install command in your project Sass folder:

cd your-project/your-sass-folder
neat install

To update Neat:

gem update neat
cd your-project/your-sass-folder
neat update

Make sure you don’t alter any internal Neat files as any changes would be overridden when you run this command. Lastly, you can remove Neat either by deleting the folder or by running neat remove.

Minutiae

This update also comes with a few bug fixes, namely the compatibility between nested columns and the shift() mixin, and a new _neat-helpers.scss file that you can use to access helper functions without having to import the whole framework.

Your Turn

The only thing we’re missing at this point is your feedback, so give Neat a spin and let us know what you think through comments, tweets and pull requests.

This Week in Open Source

High Voltage

High Voltage is a Rails engine for static pages.

You can now use it with Rails 4 thanks to Arvid Andersson (arvida) in 176895f.

Capybara Webkit

Capybara Webkit is a Capybara driver for headless WebKit so you can test Javascript web apps.

You can expect fewer bugs in it thanks to Matthew Horan (mhoran) in 7289a8e and f20d32d.

You can use it with Qt 4.8 thanks to Matthew and Joe Ferris (jferris) in 67b8a33, cbb58d0, f95e4eb, ecfa783, e9a4b77, and e531c1a, and cae5119.

You can expect nodes hidden with css rule visibility: hidden to correctly return false on visible? thanks to Timur Vafin (timurvafin) in 3bab97d.

Dotfiles

Dotfiles are a set of Vim, zsh, git, and tmux configuration files.

You can now tab complete in Vim even faster thanks to Dan Croak in c7efed4.

You can do some awesome git things in Vim thanks to fugitive.vim in d836af8:

• :Gblame for interactive vertical split with git blame output.
• :Ggrep to search the work tree (or any arbitrary commit) with git grep.
• :Glog to load all previous revisions of a file into the quickfix list so you can iterate over them and watch the file evolve.
• :Gbrowse to open the current file on GitHub, with optional line range (try it in visual mode) .

You can safely ignore certain files in git repositories machine-wide thanks to Dan in 0060e0a.

You also now have a clear strategy for managing files with personal information like ~/.gitconfig in a shared dotfiles repo thanks to Joe and Dan in 52b2ee1.

Bourbon

Bourbon is a lightweight mixin library for Sass.

You can now optionally use Rails’ asset pipeline in the font-face mixin thanks to Phil LaPier (plapier) in f93cf9e.

Suspenders

Suspenders is a CLI for creating Rails apps with thoughtbot defaults.

When you use Suspenders-generated Rails apps, you’ll now automatically track your slowest-running specs thanks to Dan Croak (croaky) in 69c7fdd.

You will also automatically track your test coverage thanks to Joe Ferris (jferris) in 2787281 44c51c1.

The validity of your factories will always be tested first thanks to Dan in 52444eb.

Your Ruby version will be determined by your Gemfile thanks to Dan in 389ceda.

You will bundle using binstubs and the 37signals’ bin/stubs directory convention thanks to Dan in 4b7e40a.

You can format time through localization thanks to Dan in fbf3fcd.

Your Postgres database will automatically be configured to encode using UTF-8 thanks to Yi-Ting Cheng (xdite) in c2c46a7.

You can use these new features in Suspenders version 1.1.5.

Factory Girl

Factory Girl is a library for setting up Ruby objects as test data.

You can now use a block with build_list and create_list so you can call methods on each instance of the array thanks to bbugh in 488e42d.

Bourne

Bourne adds test spies to mocha.

You can now see the master Travis CI build thanks to Harlow Ward (harlow) in 74dd8f4.

Paul Revere

Paul Revere is a library for “one off” announcements in Rails apps.

Support for Rails 2 apps will be dropped in Paul Revere versions greater than 1.1 thanks to Gabe Berke-Williams (gabebw) in e8ae883.