Home / Page, wrappers, stacks and columns in Drupal Gardens themes

Page, wrappers, stacks and columns in Drupal Gardens themes

This post is the first in a series of deep technical dives into the Drupal Gardens themes. Check out this post if you're looking for a generalist discussion of DG themes. If you're the type of person who has Firebug open all the time "just because", do read on.

Drupal Gardens themes are normal Drupal themes. They are also optimized to work with our ThemeBuilder. We endeavor to make our default styles point-and-click simple to theme with the style editor while at the same time not limiting you when you add custom CSS. We refer to this goal as "taking the mittens off" the ThemeBuilder. Drupal Gardens themes are designed to be beautiful and highly flexible. We have assembled our themes from a handful of basic layout constructs. Listed in order these are:
  1. Page
  2. Wrapper
  3. Stack
  4. Column
The first and most basic is the page. The page contains all content regions. Regions refers to the containers in the rendered page that the theme designates for block placement.
<body />
<#page />
Every element in the theme is a child of page. Page is used to center the theme content in the browser window. Outside of the page we find containers for the Drupal admin toolbar and the Drupal Gardens ThemeBuilder. These cannot be edited with the ThemeBuilder. Inside the page is the lining container. This container has a class page-width which designates the width of the page (960px by default).
<body />
<#page />
<.page-lining />
The page can be set to any width, within reason. Adjusting the page width shrinks or expands the width of all its child elements in a fluid manner. Inside the page are three wrappers. These are the #header, #content, and #footer. These are high-level structural containers.
<body />
<#page />
<.page-lining />
<#header />
<#content />
<#footer />
Wrappers provide a means to scope the style elements. For instance one might want a border around all elements in the body, but not the header. Or one might want the font color of links in the header to be white, but those in the content wrapper to be black. The wrappers provide a means to scope styles in such a way. Inside each wrapper is a series of stacks. The stacks are flexible, vertically-arranged (one on top of the other) structures. They also provide a rich set of hooks for styling with nested elements classed .inset. There is a lot to say about the potential of the stacks for advanced page styling.
<body />
<#page />
<.page-lining />
<#header />
<#preheader />
<#header-inner />
Stacks can be used to implement window-edge to window-edge designs that also require content to center as well as horizontal banding designs. I'll definitely be explaining stacks in greater detail in future posts. These are my favorite structural additions to the themes. The containers that produce the grid layout are called the columns (classed as .col in the structure). Columns arrange horizontally in a stack (by default). Each column wraps a theme region.
<body />
<#page />
<.page-lining />
<#header />
<#preheader />
<.col />
<.col />
<.col />
Columns distribute themselves evenly in a stack by default. For instance, with three columns, each column will have a width of 32%. The column width can be adjusted on a per-column basis, for example, to create 60% - 18% - 18% columns (with 4% reserved for padding between columns by default). I will discuss each of these structures (the page, wrappers, stacks and columns) in more detail in future posts.
acquia

Reactie toevoegen

Plain text

  • Geen HTML toegestaan.
  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.
  • Regels en alinea's worden automatisch gesplitst.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.
  • Toegelaten HTML-tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Regels en alinea's worden automatisch gesplitst.
Bij het indienen van dit fomulier gaat u akkoord met het privacybeleid van Mollom.