Adaptivetheme LayoutSP Intro

In this video I go over the new layout features in the next generation of Adaptivetheme, code named LayoutSP (SuperPremium). The new layout options are all point-and-click configurations aimed at giving end users the ability to modify the layout of their Drupal theme in a meaningful way.

While some other themes allow for sidebar widths to be changed, or even placement of the sidebars to be changed this is not that useful because its a site-wide setting. If you wanted different layouts per section, content type or vocab you were out of luck, however LayoutSP makes that all possible via theme settings and the block configuration and it takes just a few minutes to set up advanced layouts for your site.

LayoutSP uses a grid with 12 and 16 column options. Its heavily based on 960gsalthough the layout methodology is quite different and solves some long standing problems with fluid grids including Internet Explorers pixel rounding issue.

LayoutSP is content source ordered, so unlike most grids based layouts you don't have to worry about content coming first, its still does in this theme and thats something we will always preserve in Adaptivetheme.

The new layout features allow you to configure the sidebar layout and widths via theme settings, both a site-wide default and for suggestions such as front page, user section, node, taxonomy and a bunch of other sections based on Drupal internal paths.

In the second part I show how we are using the Skinr module to layout blocks via the block config UI and talk about how we can build complex layouts using a combination of blocks, Skinr grid classes, Gpanels and advanced sidebar settings.

During the video I talk about exposing layout options for content types (akin to a page-story or page-cck-type tpl) and this is something we have already begun working on, as well as being able to set layout per taxonomy vocabulary.

Note that the theme only uses a single page.tpl.php file to achieve these layouts and there is no need to edit any HTML or CSS to have the layout you desire.

Caveats and Cons

Web dev is full of compromises and this is no different:

1. Can't (easily) nest grids. If you try to place blocks with grid classes inside other boxes that have a width (i.e. a sidebar) bad things happen. That's a pretty serious compromise and one that needs some thought. We could abandon the fluid grid thing and use pixels and all is solved very easily.

Update: I have switch to a pixel grid rather than fluid grids and now we can nest grid blocks in sidebars. I think this setup is ideal—its much more intuitive to use and being simplified to just a 16 column grid makes the UI much cleaner. I have attached a screenshot showing blocks nested in a complex layout in sidebar-right.

Enjoy and let the praise bug reports begin... if you want to help beta test this theme please contact us and we'll set something up.