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

trail-map

Lots of activity on trail-map this week. Thanks to Mike Munroe (mikepmunroe) for catching a broken link 1025a32. Adarsh Pandit (adarshpandit) added a Code Review trail e46792c and Gareth Rees (garethrees) added links for different style guides 4cf0643 47b6002. We had help from Dan Croak (croaky), who fixed some bad links d82a944 889aee8, a grammatical error 13e1335, copy-editing 6d2402c, and removed the .gitignore f2f147a.

shoulda-matchers

shoulda-matchers got some refactoring from Gabe Berke-Williams (gabebw) 7f208e7 and Jason Draper (drapergeek) tightened up ensure_inclusion_of for array matching dc5daca.

cocaine

cocaine got some help from Jon Yurek (jyurek) including removing official support for REE 6073cd0 and switching the order of pipe-reading and waiting 69d6b6c.

paperclip

In paperclip, Jon Yurek (jyurek) removed some ternary operators in favor of ifs 65f4941, and added a test to prevent regression of the E2BIG problem 69bcf6e.

factory_girl

Phil Cohen (phlipper) added MiniTest syntax methods to the GETTING_STARTED.md page for factory_girl in 06ff258.

neat

neat got some help from Reda Lemeden (kaishin) including a fix for breakpoint values in the README 120ce1b and support for using both min- and max- in breakpoint() 9292467.

dotfiles

Our dotfiles are now more tmux compatible thanks to Joshua Clayton (joshuaclayton) who added tab-completion to ack using the tags file d16a4fe and Dan Croak (croaky) who enabled better pbcopy/pbpaste and RubyMotion compatibility by using reattach-to-user-namespace in 3ef63fe.

suspenders

Dan Croak (croaky) tightened up our suspenders by replacing the style guide (most of the README file, really) with links to guides c912961, ignoring the .env file 58c22ff, and alphabetizing the .gitignore file 884eb08.

high_voltage

In high_voltage, Mike Burns (mike-burns) extracted an overridable PageFinder class 8494e51 and removed the ActionMailer usage 6eee9b0. Odin Dutton (twe4ked) and Mike Burns added a config option to disable default routes 7570889.

fake_braintree

fake_braintree was bumped to version 0.2.1 by Dan Croak (croaky) 44f62b7.

bourbon

In bourbon Mike Burns (mike-burns) added command parsing using Thor ac3b318.

laptop

Our laptop script got the same reattach-to-user-namespace help from Dan Croak (croaky) as he added to the dotfiles 50a1a1e.