A quick intro to Drupal Gardens themes
by Jesse Beach
There's a lot to say about the technical details of the Drupal Gardens themes. But before I geek out I want to take a moment to discuss what the goals are that drive our themes' structures. There are numerous approaches to generic themes in the Drupal community - most of them spectacular efforts (mothership, Zen, Bartik, NineSixty). Drupal Gardens themes adopt techniques from these themes although none of ours are direct derivatives.
Drupal Gardens themes are designed to meet the following goals.
- Integrate seamlessly with the style editing capabilities of the Drupal Gardens ThemeBuilder.
- Easily transform into designs that differ greatly from the initial theme style.
- Support fluid layouts
- Support grid layouts
- Do all of this without access to alter the HTML
Integrating with the style editing capabilities of the Drupal Gardens ThemeBuilder
One of the more challenging aspects of CSS is the concept of cascade. One intent of the ThemeBuilder is to simplify the application of CSS styles, especially the cascade. The cascade refers to the inheritance of styles from the top of a document down. In an HTML document, elements are nested within each other. When a CSS style is defined at a high level in an HTML document like the font Arial to the body, this style will cascade down to all child elements like paragraphs and lists. When we want to override a style set at the top of a document, we limit the style to a narrower portion of the page. For example, just the content or just a particular list in a sidebar. This is called scoping.
The trick is to make the scope just narrow enough. A too wide scope will effect style changes to unintended elements. A too narrow scope will require a themer to make more style edits than should be necessary. The art of scope is getting it just right so that you have the least number of styles required. The Drupal Gardens themes are built to make your style edits scope appropriately, often with a single click in ThemeBuilder style editor.
Easy theme modification
Our second goal is to give you the freedom to take our basic themes and change everything about their styles. I like to use the analogy of a stem cell, that each theme, although it appears unique, is founded on the same structure as the others. And that each theme can be differentiated beyond the several examples we have in our default set. We achieve this with an underlying HTML structure built from consistent abstract components. These components are not meant to produce the styles in just our default themes, but in any number of these yet to be created.
Fluid and Grid Layouts
Our third and fourth goals are to support fluid layouts and grid layouts - two approaches to page layout that complement each other fantastically well. It may not be the case that every design requires the layout to flow or need evenly spaced horizontal grids, but in order to support many different designs of varying width and spacing requirements we decided to build fluid layouts and gridding into the DNA of the Drupal Gardens themes.
There are numerous technical approaches to fluid layouts. All have their benefits and quirks. The simplest approach and the one we chose is a combination of widths defined in percentages and containers properly styled with automatic width. There is more to say on this topic and I will in future, more technical posts.
In the same way, gridding has been solved by many developers over time. None quite so well as 960 gridding system and its Drupal derivative NineSixty. 960gs is a deceivingly clever approach to gridding, but it's not without its complexity and learning curve. As an example, to produce a three column horizontal layout, 960gs uses a wrapping element classed with .container-12 (designating 12 underlying columns) and child elements classed with .grid-4, designating that each column occupies 4 underlying columns of its container. This is the basic structure of 960gs - a wrapping element that establishes the available underlying columns, 12 or 16, and child elements that declare how many of these underlying columns they occupy.
Easy styling without complex development
Drupal Gardens themes use a parallel and simpler structure. Where 960gs employs .container-12, we use .col-3 designating three columns of equal width. The children of .col-3 are classed with .col and do not declare how many underlying columns they occupy. The default is even width distribution for the columns. In this way, the Drupal Gardens theme gridding approach is structurally the same as 960gs. In fact, the 960gs technique could be applied to our themes quite quickly. The difficulty of using 960gs is in developing an effective user interface to manipulate the classes that produce the gridding structure.
Drupal Gardens simplifies themeing by making access to the HTML unnecessary. In order to meet this goal, we designed the themes with sufficient HTML markup to meet the needs of almost any design. One can see the lineage of the Zen theme in our HTML structure. But the Zen theme is sparse and appropriately so. Indeed, the minimum needed. Zen is meant to be a starting point for advanced themeing i.e. direct manipulation of PHP files.
We built the Drupal Gardens themes against many goals, some of them competing at times. As much as possible, we tried to avoid concessions and find a third way when achieving one goal imperiled another. We hope you find them ideal as the starting point of your efforts!
If you want to explore the technical details of the themes and discuss the various structural and styling concepts, check out Pages, wrappers, stacks and columns in Drupal Gardens themes.