Skip directly to content

jbeach's blog

Acquia adopts the Omega theme for its web site reboot

on July 18th, 2011 at 10:20:00 PM

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 GordonI joined their team for one three-week sprint in order to help them establish the framework of the base theme.

This article presents a high-level discussion.

Acquia.com and the Omega theme - getting down to brass tacks

on July 18th, 2011 at 8:40:02 PM

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 GordonI joined their team for one three-week

How we architected the CSS for Views on D7

on April 3rd, 2011 at 11:44:10 PM

Let's just make one thing clear at the outset. Views is big. It's big like an aircraft carrier and it's big like Lebowski. If you use Drupal, you probably also use Views. Updating Views to D7 was no small task. Acquia, in an effort to update the UI of Views and integrate it into DrupalGardens, sponsored a code sprint in San Jose, CA at the end of February 2011. The sprint achieved more than any expected, due in major part to the effort of those who participated, both in person and remotely. Merlinofchaos describes the sprint in more detail and gives props to the folks made the sprint a

The New Front End Design Stack - The Role of Responsive Web Design

on March 30th, 2011 at 2:02:08 AM

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.

Minding the gaps

on November 30th, 2010 at 4:49:08 AM

Controlling vertical rhythm with CSS in Drupal Gardens themes.

Tags: 

The grid system in Drupal Gardens themes

on November 14th, 2010 at 11:04:56 PM

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

Enabling sub menus in Drupal Gardens

on November 6th, 2010 at 10:10:46 PM

In the latest release of Drupal Gardens we introduced drop down menu styling into our base themes. 

In order to take advantage of the latest drop down menu styling, please update your theme if you created it prior to November 4th.

Menus are a standard structural element in Drupal 7. In this post we'll establish how to enable these menus. Follow along with the screenshots.

If you already know how to expand sub menus, you should skip to the post about styling.

Now let's look at the menus in Drupal 7. Follow along with the screenshots in Drupal Gardens.

Drupal has 4 system menus by default.

Drop down menus in Drupal Gardens: How to style every little pixel

on November 3rd, 2010 at 6:16:10 PM

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

In Between the Lines: The adjacent sibling selector technique

on August 19th, 2010 at 3:18:54 PM

The simple list is a staple of information presentation on the web. Commonly, items in a list are visually distinguished with separating lines - either horizontal borders or vertical borders. This post describes a simple technique for defining styles in the spaces between list items without reference to the first or last item in the list.

Not the same

on August 12th, 2010 at 5:12:22 PM

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.

Pages