One Pixel Off

In a previous post, I outlined our experience building a responsive design theme on the Omega theme. Here, I’ll go into some details for those of you who enjoy the technical bits.

Just to recap, in early 2011, Kevin O’Leary, one of Acquia’s UX Jedi, launched an effort to redesign the visual branding of Acquia. By May, the design work was far enough along to allow us to start developing a Drupal theme for a complete reboot of acquia.com. Michael Cooper lead the effort with his team including Mariano Asselborn, Yoni Gray, Rob Loach and Charlie Gordon.  I joined their team for one three-week

Succinctly, responsive web design is device-agnostic content presentation. A responsive design looks great on a desktop monitor, a tiny phone screen or a large format display. This brief paper first details where responsive web design fits in the front end design stack. Then it will describe how a responsive web design is constructed.

Grid systems are a popular framework for information organization. Essentially, a grid is a set of vertical columns that span the width of a page. Content is laid out within one or across several columns.

Visualizing the grid

As an example, if we view this site with an overlay that exposes the grid, we see 8 columns devoted to the main content and 2 columns for each of the sidebars.

In the example above, the white vertical lines are the gutters. Gutters separate the columns. In the well-known 960.gs system, for the 12 column grid each column is 60 pixels wide with 10 pixels of gutter between

In the latest release of Drupal Gardens we have introduced drop down menu styling into our base themes. They styling is a combination of CSS and the Superfish plugin. The menus work without javascript enabled, but the javascript gives them a little touch of interactive forgiveness for the manic mousers among us :)

I just had an issue with IE 8 with a selector combo that works fine in IE 7. Here's the code.
.wrapper.mast .grid:last-child,
.wrapper.mast .grid.last {
text-align: right;
}
IE 8 seems to read the :last-child line and give up on the whole declaration. I've run into this issue a couple times before. What is my solution? Break the selectors out onto their own lines
.wrapper.mast .grid:last-child {
text-align: right;
}
.wrapper.mast .grid.last {
text-align: right;
}
IE 8 gives up on the :last-child declaration and reads the .last declaration just fine.