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).

This week in open source

bourbon

As a programmer I love the change that made it into version 1.3.6 (10f978d) of bourbon: Phil LaPier (plapier) added to work done by Frank (frankzilla) to add a monospaced font family, $monospace—with support for Bitstream Vera Sans Mono, my favorite monospace typeface (3467fe3 and c86e5687). Nice.

paperclip

Friday saw a new release of paperclip (1cb40e3), in accordance with the prophecy. It contains Windows support, a bug fix, and two new features.

Prem Sichanugrist (sikachu) has been working on handling characters that are not URL-safe; to this end he added a :restricted_characters option to has_attached_file, with a default value of &$+,\/:;=?@<>\[\]\{\}\|\\\^~%# , which specifies characters to replace with an underscore, _ (8353518 and 604304e). Benjamin Hüttinger (maxigs) added the ability to pass a block, evaluated at runtime, for :fog_host, :bucket_name, and :fog_credential options (e049ec5, 2b562a9, 8742615, and 1c88a72).

The gem itself had problems installing on Windows because a bundled test made sure that filenames with question marks were handled fine; turns out this simply breaks on Windows. Even though no actual programmers use Windows, we removed the offending file (ed5cd9f). Jon Yurek (jyurek) fixed a long-standing bug where the RSpec matchers (validate_attachment_content_type, validate_attachment_presence, and validate_attachment_size) didn’t handle the :if argument they were supposed to handle (5d4ba62).

capybara-webkit

A new release of capybara-webkit is in the works, and this is what you’ll see in it: Matthew Mongeau (halogenandtoast) added the ability to trigger mousedown and mouseup events (51c4dfe and 16c1637) while Joe Ferris (jferris) has commands block until the page finishes loading (18607d0).

clearance

Oh sweet, a new version of clearance is out (6c0c070)! In it you’ll find support for Rails 3.2 from Gabe Berke-Williams (gabebw), mostly in following deprecation warnings (6e57d10). Some prodding from Matthew Daubert (MDaubs) prompted us to upgrade cucumber-rails to 1.1.1 (691e867 and 91f4675). Dan Hodge (danhodge) dropped a totally awesome change on us, abstracting out the User class into Clearance.configuration.user_model, which can be changed at runtime (085a9b6, a582eec, and fc6af70). Dude, that’s awesome.

fake_braintree

Holy cow it’s version 0.2.0 of fake_braintree (0be2aea). In this Gabe Berke-Williams (gabebw) gave us the ability to specify a constant amount for a transaction (783719c), and mimics the behavior around customers with failing credit cards (a2ceb58).

factory_girl

No big news in factory_girl this week. Carlos Antonio da Silva (carlosantoniodasilva) updated the docs to mention that .stub is now .build_stubbed (08018f6). Michael Klishin (michaelklishin) fixed the build on Travis CI for Rails 3.2 by updating rubygems first (850116d). Joshua Clayton (joshuaclayton) found a spec that was not appropriately named, and fixed it (0d67a42).

kumade

While kumade did not see a deploy this week, it did see some feature improvements, some of which come with an API change.

The hook for running code just before deployment was originally run_predeploy_task but is now run_pre_deploy_task (764aebe). Chad Boyd (hoverlover) made this change so he could introduce the run_post_deploy_task, which is further exposed as kumade:post_deploy to Rake (da74087, f68a487, and 9679018).

Kumade now works with more stuff: Jammit 0.6.5 (ec63310) thanks to Vesa Vänskä (vesan), and Ruby 1.9.3 (8e73b90) thanks to Gabe Berke-Williams (gabebw).

Gabe also fiddled with some source code (7e0e11e, bb695b9 and 92aa8f4).

copycopter_client

A small documentation update occured in copycopter_client by Joe Ferris (jferris), reminding us that you can leave the name of the controller or model off of the translation key only when using t from a view (6416897).

This week in open source

bourbon

Over the past week bourbon went up to version 1.3.5. A whole bunch of sweet new features are in it now:

Frank (frankzilla) added a modular-scale mixin, of which the golden-ratio mixin is but one implementation (126a83b and 96659a2). He also added a parameterized fallback color to linear-gradient (60e2c63).

Phil LaPier (plapier) worked with Gabe Berke-Williams (gabebw) on a bourbon command-line too for working with Sass outside of a Rails app, such as Jekyll, WordPress, or even a static site (ad1499b, b55a763, 0ebf906, c2077d8, 13e70d3, 2fc2c90, and bf34e70). You can run bourbon install to install it and bourbon update to update an existing installation.

capybara-webkit

A careful sleuth has updated the documentation for capybara-webkit this week. Marc Schwieterman (marcisme) discovered that a fully passing test suite depends on ImageMagick, and documented as much in the contributions guide (df39268).

factory_girl

Version 2.5.0 of factory_girl is out, and there’s a badass new feature in it. But first:

Joshua Clayton (joshuaclayton) fixed a bug where the :parent’s factory wasn’t being passed along (4aecfff). Carlos Antonio da Silva (carlosantoniodasilva) fixed the URLs in the readme to point to correct locations (aa74edd and 42f5a10).

Oh, and you may remember from last week that Josh deprecated the attributes_for method admist much controversy. Well, he undid that (2d6adfd).

Josh then implemented a feature that Joe Ferris (jferris), FactoryGirl’s originator, has wanted for years: you can specify how FactoryGirl should construct the class (5780364). Joe excitedly documented this (ea89aad). This means that FactoryGirl can be used for non-ActiveRecord classes, including immutable classes.

paperclip

In accordance to our new gem schedule, paperclip hit 2.5.1 this week. Mike Burns (mike-burns) cut the release, adding a ChangeLog and updating the NEWS file (b7f9b6f and ec4793e). In short: Fog storage is passed the content type, S3 can be encrypted, and ActiveRecord is optional.

Designer Tools

In addition to the basic development environment everyone at thoughtbot works with, there are a number of other apps most of the designers here use to keep our work flows efficient and our skills top notch. When I came to thoughtbot as an apprentice a little over three months ago, I was exposed to a variety of new apps that greatly improved my work-flow, so I thought I would share with you some of the apps I open up every morning and a bit on how I use them.

The basics

These apps are not necessarily design-specific apps but they are so essential in our day to day work-flows that I couldn’t leave them out.

• Propane: Chat client for 37Signals’ Campfire. This is an indispensable communication tool.
• Growl: Notifications for anything and everything. Used primarily for Campfire notifications.
• iTerm: Terminal emulation for OSX. Mostly beneficial for it’s ability to open multiple windows in tabs.
• MacVim: Text editing. If you’re not already using Vim, take the time to start learning. It will greatly speed up your development time and if you’re working with developers who use Vim it will make pairing easier.
• Divvy: Helps you keep your screens and windows spaced, aligned and organized efficiently without clicking and dragging all day.

Adobe

If you work on the web I am sure you are already familiar with the typical Adobe software that web designers use, so Im not going to get into the details of our Adobe setups here. Most of us prefer to do hand sketches/whiteboarding and move into wire framing with HTML and CSS as soon as possible any way. Static mock-ups tend to have a host of draw backs when working in an agile development process. That said, photoshop, illustrator and fireworks are still our workhorses when it comes to specific graphic design needs.

Skitch

A handy screen capturing tool that allows you to very easily draw and add notes on top of your screen shots, without having to open up photoshop or some other image editing tool.

Cloud App

Collaboration and iteration are key ingredients in doing great work and I have found this app to be an effective way of sharing screen shots with team members, clients and other designers so I can get that valuable feedback on the development of my work. When you take screen shot Cloud app automatically uploads your image to web servers and in a drop-down from the Cloud app icon in the OSX menu bar, provides you with a sharable link to that image.

Notational Velocity

Good for general note taking and the keeping of VIM and Git cheat-sheets. Especially if you are new to VIM or Git keeping track of commands and remembering how to get certain things done right can be quite challenging, so we all suggest building up robust cheat-sheets with this little app.

FontCase or FontExplorer X

Great typography is a fundamental element of great design. Managing your fonts effectively will help you find that perfect type-face faster and reduce the time it takes to get started with a solid visual design direction. Taking the time to organise your typefaces in a way that is meaningful to you can also be a good way of curating your collection and more intimately familiarizing your self with the fonts in it.

Little Snapper or Gimme Bar

Both are awesome tools for building a personally curated library of design inspiration. Saving images and examples of the things that inspire you is a great way to refine and hone your own personal style and also a great way to help kick off the visual direction for a new project. If you are not using tools like these already, start. It will be hugely beneficial to the quality of work you do.

Hues

A great little app for grabbing colors from anywhere on your screen. It provides rgb, hsl, and hex values for any color you select which makes pulling color pallets from photos and images you have stashed in your Gimme Bar or Little Snapper quite nice.

Bourbon

Bourbon is not an app, it’s a library of SASS mixins and functions that greatly speed up front-end development time. It is just as awesome for new comers to .css/.scss as it is for the most seasoned pros. It’s also one of the main reasons the sketch-to-html&css-wire frames process has proven to be so effective and efficient for us. We have extensively written about bourbon before.

So that’s it for a light-weight overview of the apps I find my self opening on a daily basis. Hopefully I have introduced you to some new and useful tools. I’d also love to hear about some of the tools your using, so feel free to add your comments below!