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.
However, it's not just a matter of turning responsive support on or off: You have various options.
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.
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.
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
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.
Comments
How does it compare to 960 grid, and how does it work with panels?
I've used 960 quite a bit. In fact, this site currently uses NineSixty theme for its Drupal 6 base theme. Here are some quick differences:
As for Panels, Square Grid should work fine as long as your panels work within the defined regions of the page. It may take some experimentation of adding some classes if you're using Panels to subdivide a region and want to use Square Grid's sg-n class designations. (There's an .sgParent class to allow grids to contain grids.)
Do you actually know if there's somewhere a list of sites that were based on this Square Grid?
Though the grid is very basic and straight-forward, I fear it is a lot of work to get every page designed and coded correctly. Especially if you want to add the possibility to use panels and so on. Maybe SG isn't the right theme to try out for a first Drupal project?
That's a good question. I don't know of a list. I wish I did. All I have are the drupal.org stats.
As for design implementation, this base theme is intended to take care of basic layout and otherwise just stay out of the way. The readme.txt file should give you an idea of how to use the classes in grid-within-grid layouts. (Basically you add .sgParent class to the containing grid div.)
How does it compare with other grid-based frameworks/drupal themes (for example blueprint)?
I've compared it a bit with 960 already, here and in the other post on Square Grid (linked above). I confess I have less experience with Blueprint, so I'm not sure what to point out here in a comment.
In general, I like Square Grid because of its flexibility, simplicity and use of screen estate. I can use it in wireframing and interaction design, and translate it quickly to a living, breathing theme much quicker than doing it from scratch.
[Edited to add:] There are some very interesting grids out there these days. This is but one. I like many of the grids, but this one has suited me well in accommodating column-based and golden ratio-based layouts, both. I'm open to ideas to help make it even better.
Post new comment