giant robots smashing into other giant robots
Written by thoughtbot
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.
Introducing Bourbon Neat, a Sass-based responsive grid framework
Bourbon Neat—or Neat for short—is a lightweight, open source fluid grid framework built on top of Sass and Bourbon with an emphasis on flexibility and ease of use. The framework comes with sensible defaults and useful mixins to help get both developers and designers up and running in minutes.
For instance, applying a grid-based layout to this markup…
<body>
<section class="blog">
<aside></aside>
<article></article>
</section>
</body>
…is only two mixins away:
section.blog {
@include outer-container;
aside {
@include span-columns(4);
}
article {
@include span-columns(8);
}
}
And the result would be:
Here are some live examples of what you can build with Neat.
Why another grid framework?
We built Neat with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute the HTML with presentation classes and extra wrapping divs. It is less explicit—as in requires fewer mixins—than most other Sass-based frameworks and comes with built-in table-cell layout support.
The main motivation behind Neat is allowing anyone to build fluid, entirely semantic grid layouts without having to wade through hundreds of lines of documentation. We also believe that giving designers the ability to override the default behavior without hassle is key.
Getting Started
To start using Neat in one of your existing projects, place the /neat directory in your main stylesheets folder and make sure you have Bourbon installed. Import both mixin libraries in this order:
@import "bourbon/bourbon";
@import "neat/neat";
Although not required, you are welcome to override the default settings, namely $grid-columns and $max-width, by redefining them in your site-wide _variables.scss and importing it before Neat:
@import "bourbon/bourbon";
@import "variables";
@import "neat/neat";
Ruby Gem
For Rails apps, use the gem instead. In your Gemfile :
gem 'neat'
After running bundle install you will be able to use Bourbon and Neat together.
If you get this error:
Bundler could not find compatible versions for gem "sass"
Run:
bundle update sass
Within your application.css.scss file place the following:
@import "bourbon";
@import "neat";
Neat is fully responsive
Using Sass 3.2 block mixins, Neat makes it extremely easy to build responsive layouts. The breakpoint() mixin allows you to change the total number of columns in the grid for each media query. You can store these values in project-wide variables to DRY up your code:
$mobile: max-width 480px 4;
When used as a breakpoint() argument, $mobile instructs Neat to use a 4 column grid in mobile-size viewports:
.my-class {
@include breakpoint($mobile) {
@include span-columns(2);
}
}
Would compile to:
@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
}
.my-class:last-child {
margin-right: 0;
}
}
Feel free to refer to the documentation for more on how to use breakpoint() and all the other mixins. Don’t forget to check out the examples for some inspiration.
Now go get Neat and build something awesome.
Design with a sip of Bourbon
- Listen Now (16.3MB mp3)
- Subscribe via RSS
- Subscribe in iTunes
Ben Orenstein is joined this week by Phil LaPier, the creator of Bourbon and a designer at thoughtbot.
In episode #2 Ben and Phil discuss the design process, fundamentals of visual design, common design errors, and how to be a better designer (even if you’re a developer), and how to work with designers as a developer. They also answer some audience questions about design: How to handle feedback from clients, and HAML vs. HTML.
To have your questions answered on the air
Call us toll-free at 1-877-9-ROBOTS x198 and leave a voicemail. That’s (877) 976-2687 x198, email your questions to info@thoughtbot.com or Tweet to us @thoughtbot.
Show Notes & Links
Bring your grid to Yoga class
I’ll have to admit that, for years, I have resisted designing with flexible (fluid) layout mostly because I didn’t want to figure out all the math to make it work properly. My other problem was that, at certain sizes, the design just seemed to fall apart. For the longest time I was unconvinced that it was worth all of the effort that it would take to get the grid working correctly and looking good.
After reading Ethan Marcotte’s article and book on responsive design, I was convinced to try it again. I thought that I could amend the grid-width function already in Bourbon to my needs by giving the variables percentage value. I was wrong. It didn’t handle sub-containers because the ratio between columns and gutters changes.
I could still use Sass to do the math ( target ÷ container = percentage ). I gave the grid-width function a makeover to accommodate this and the result is flex-grid.
Getting Started
Start off by declaring a couple variables for the function. $fg-max-columns is the total number of columns in your grid. $fg-column and $fg-gutter define the relationship between column and gutter. I use pixels here because it is what I am most accustomed to.
// 960 12 column grid $fg-max-columns: 12; $fg-column: 60px; $fg-gutter: 20px;
The function takes two values: the number of columns that you want the element to span and its container column (which defaults to $fg-max-columns). This way the function allows you to nest containers without losing the relationship between column and gutter. For example:
body {
margin: 0 auto;
max-width: 1400px;
width: flex-grid(12);
section {
float: left;
width: flex-grid(8); // No second value needed since it's inside the main container
article {
float: left;
width: flex-grid(6, 8); // Since the article is inside the 8 column section
}
aside {
float: left;
width: flex-grid(2, 8);
}
}
}
Gutters
You’ll notice the grid doesn’t have any gutters yet. They too can take two arguments, a container column count and gutter width. Container is set to your default max columns ($fg-max-columns) and gutter is set to $fg-gutter, which you’ll almost never need to change.
section {
float: left;
margin-right: flex-gutter();
width: flex-grid(8);
article {
float: left;
margin-right: flex-gutter();
width: flex-grid(6, 8);
}
aside {
float: left;
width: flex-grid(2, 8);
}
}
The last touch
I add a max-width to my main container, mostly for me because I’m usually browsing at full screen on a 30” monitor. Since the grid is totally percentage based, I usually look to where the line-length becomes too long.
body {
margin: 0 auto;
width: flex-grid(12);
max-width: 1400px;
}
This week in open source
bourbon
So this bourbon gem…people seem to like it: there was a RailsCast about it and the principle author (Phil LaPier) will be speaking at Frontend United about it.
This week people cleaned up the obsolete CSS attributes: Thibaut (Thibaut) removed -moz-inline-block (d73ea46), Chad Mazzola removed both -ms-border-radius and -o-border-radius (10a5908), and Phil LaPier (plapier) removed -moz-box-orient (6331e26). Gabe Berke-Williams (gabebw) fixed support for Rails 2 (eacd5ee and e9347e7) and, lesson learned, removed Gemfile.lock (671ad33).
factory_girl
Version 2.6.3 of factory_girl is out, all y’all. In this action-packed version we got a cucumber step named e.g. Given the following post exists (note the lack of : at the end), via cj (cj) (d4b8cac and 48afe24). Barun Singh (barunio) fixed a bug where the factory’s traits weren’t compiled in the very first time the factory was used (68ca50f), plus a factory can use all the traits on any ancestor (f14a8cf). Joshua Clayton (joshuaclayton) is now listed as an author (07d2834), so congrats to him and his hard work. As part of that hard work he discovered that the vintage syntax broke in MRI 1.9.2-p318, and then fixed it (a7acc3e).
This just in! Version 3.0.0.rc1 is now public! It breaks everything, again! Please try it and open issues with what breaks:
gem 'factory_girl', '3.0.0.rc1'bourne
Oh hey version 1.1.1 of bourne is out (650afb0)! Bourne is an extension to mocha that adds test spies so your tests can read like normal tests. Tristan Dunn (tristandunn) added support for mocha 0.10.5 (286d8f9) and fixed a long-standing error message that occurs when you forget to stub a method before spying on it (17dc7d2).
Gabe Berke-Williams (gabebw), who pushed the release, also did some maintainance: adding Travis CI notifications to the README (7d6eb37), removing Gemfile.lock (950a445), and some general code cleanups (4bbe610 and b0f1f99).
shoulda-matchers
The big deal in shoulda-matchers over the past week was when Fujimura Daisuke (fujimura) added the ability to specify the key for the flash message in the set_the_flash matcher (0e0339e, ef866e2, and fd4aa53):
it { should set_the_flash[:alert].to("Password doesn't match") }Gabe Berke-Williams (gabebw) did his usual maintainance of converting the docs to use Markdown (85c37c4), cleaning up the ModelBuilder that’s used in the tests (31595b0), and showing off how often our build is broken in the README using Travis CI (eebb806), which he also did to shoulda proper (7d805d0).
cocaine
Also victim to the Travis CI treatment was cocaine, via Gabe Berke-Williams (gabebw) again (ac47b6f and 490c406).
paperclip
The paperclip project is gearing up for a groundbreaking (maybe app-breaking?) release, but in the meantime Mike Boone (boone) fixed an infinitely-growing PATH environment variable (06d69af) while Mike Burns (mike-burns)—also known as: me—totally broke backward compatibility by changing the default :path and :url configuration setting (26f4d40). These new settings avoid overwriting files on different models and also scales to more than 1024 instances of the same model.
capybara-webkit
In capybara-webkit news, Joe Ferris (jferris) controversially allowed the user to interact with invisible elements (02f2a8a), and caught the fact that Capybara.timeout is deprecated (4d954b7).
