Sep 13 2011
Sep 13

From the get-go, Square Grid has been intended to offer less. Sometimes less is more, especially so when it comes to front-end web development.

Square Grid is a Drupal 7 base theme* leveraging the design and implementation power of Square Grid, combined with principles of responsive design. It's been in active development, with new features and the odd bug fix pushed live periodically over the past several months. Here's where the theme stands now.

More options, still lightweight

Since its first incarnation, Square Grid has grown a bit – not so much in code but rather in flexibility. It's still pretty lightweight.

Configurable tools

Square Grid configuration options are inherited and available to your child theme's settings page. These include:

Configurable responsiveness options

Responsive support has been part of the theme since April. Now you can configure whether you want it, and if so how much.

squaregrid config screen
You can turn the responsive support on and off.

However, it's not just a matter of turning responsive support on or off: You have various options.

squaregrid config screen detail
If responsive support is enabled, you can choose what grid sizes to utilize in the theme.

squaregrid config screen detail
If you do not want responsive support, you can choose a universal grid size for all screens.

The theme does only what you've planned for.

Internet Explorer options

You can decide how to handle Internet Explorer up through version 8, which does not recognize media queries.

squaregrid config screen detailIE support options can be configured as well.

Options include one static grid size, or no special handling (in case you want to use a JavaScript-based solution such as Respond.js).

Simple built-in development aids

Grid-based theme development sometimes can get quite involved when working on an actual Drupal codebase, not just mockups or prototypes.

squaregrid config screenFrom Square Grid-enabled theme configurations.

With these seettings, you can toggle on/off display of the actual grid and rebuilding the theme registry on every pageload.

Behind the scenes, what you get are:

A grid for most occasions

Square Grid grid
As illustrated here, Square Grid framework facilitates a wide variety of design grids, from 4-column to 12-column to Golden Ratio, all from one grid schema.

The lightweight Square Grid Theme builds off of the powerful flexibility of Square Grid framework by Avraham Cornfeld. See for more on Square Grid concepts, templates and more.

Lightweight CSS

The styles predefined in the theme are as minimal as possible, focusing only on page layout. The idea is that you, the themer or front-end developer, will want to control the rest.

Mobile first architecture

The theme styles for single-column, optimized-for-smaller-screens layout first, and adds multi-column grid-based layouts in addition for screens 770px and larger.

Content-first page loading

Nothing irks more than loading secondary content before the main content. It makes people wait longer to see what they clicked to see, raising click-aways. This theme loads your main content first, then the secondary content.

Straightforward grid column settings

These can be overridden in your child theme's template.php. No heavy PHP knowledge is required, and all necessary code is provided.

No extra extras

It's tempting to add more bells and whistles, but the goal is not to add complexity or steepen your learning curve with bespoke variables or code concepts.

There's more on these features and characteristics in the official documentation.

Not a fluid grid

Square Grid is not a fluid grid. Why? Because even today browsers do not agree how to render out elements defined with floating decimals. A fluid 35-grid layout would require a grid of %2.857... per grid square, which means that a fluid layout defined by percentages would entail added complexity and possibly some browser hacks, especially when you multiply browser-imposed roundings and truncations by 35.

Some people still prefer 100% fluid layouts, and that can make sense, especially in some use cases, such as an expert-interface dashboard requiring as much screen-estate as possible. However, if the static grid widths adapt to the screen sizes, the marginal benefits of going 100% fluid are somewhat minimized. Therefore, given the floating point issues noted above, Square Grid, as a base theme, supports multiple fixed-grid widths that offer healthy screen-estate usage for the most-commonly used screen sizes. (Count me in the school of thought that it's all responsive.) An added benefit is that, by defining these break points, the theme renders with more predictability for design purposes. The current 770px-, 980px- and 1190px-width break points in Square Grid Theme cover most larger displays, while still providing comfortable, readable layouts. As screens get larger, we can build upon this paradigm. And we're not ruling out fluid grid definitions altogether. (See below.)

Road map items

Here are some things in the works (in no particular order):

An HTML5 version

This is already in the works. [Meta issue]

"Nav last" page structure

Currently, Square Grid loads the main menu before the content — something I always immediately remake in any child theme. While there are still some naysayers, most agree that loading nav last is best practice for mobile display. This means that Square Grid should load the nav last, just before the footer. How this gets styled for proper placement, though, depends very much on the specifics of the design. That's why I have not done this yet, but I may add 3-4 lines of CSS to handle this. [Issue]

Configuable column widths

These would be configurable "sidebar" widths settings, to make it easier for you to just get on with implementing your design. (Column widths are fully workable in the theme currently, but customizing them does involve some code editing to change integer values in the child theme's template.php file.) [Issue]

1400px-wide layout

This has been partially implemented (and disabled in code pending completion) and likely will be in one of the next releases. [Issue]

Fluid layout

Comments above notwithstanding, this could be an option with potential appeal to some themers. Caveats about variable browser support would apply, of course. [Issue]

We hope Drupal users working to implement custom designs on their own sites find the Square Grid Theme useful.


Feb 20 2011
Feb 20

A lot has changed since March 2010.

how to get started
The presentation is for people who are new to Drupal theming, as well as those who want to get a better sense of what's new in Drupal 7 theming.

I expanded on the previous presentation, clarified some points, and replaced a few slides with better ones.

A video of my slide presentation is available on the DDCLA Blip TV site. The slides are kind of fuzzy because the recording app captured my presentation notes screen instead of my presentation screen. My sincere gratitude goes out to John Romine for taking care of all the session videos, including the cropping of my session to just the relevant slides.

It was great meeting various folks at Drupal Design Camp LA. Big thanks to Christefano and Lee Vodra for their wonderful hospitality!

Oct 19 2009
Oct 19

Yeah? Maybe?

[update: maybe not. see comments.]

#D7UX [Tweeted] is about Drupal 7 user experience work.

#D7CX [Tweeted] is about upgrading Drupal contrib modules to stable Drupal 7 releases when Drupal 7 itself is released. Over 100 contributed projects now bear this commitment, which is just awesome!

To me, that leaves #D7DX – a focused effort to get some rockin' Drupal 7 design themes going.

Yes, we have #D4D. And beautiful Drupal 7 themes are part of #D4D. But #D4D is also about Design 4 Drupal events, broader #d4d efforts on, and other design efforts that are happening. But why not a more focused tag, not on making Drupal pretty in general, not on improving the designer's experience in Drupal, but focused just on creating beautiful, semantic, exciting, eye candilicious themes for Drupal 7? For core themes, yes, but also for contrib. All ready and stable by Drupal 7 official release. Now is the time!

I'm writing to myself, here, since for someone who's been working with and designing for Drupal since 2004, I'm very late to the contributed theme party. That has to change.

At any rate, it's an occasion to finally get this blog here out of the Minelli realm. That's a long overdue effort. All I need is a little free time.


About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web