Square Grid responds for Drupal 7

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 http://thesquaregrid.com 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.


* For most themers and front-end developers, one of the fastest paths to implementing a completely custom design for Drupal is via a base theme. For more about this approach, see the Drupal.org documentation on this architecture.

We want to work with you!