Omega Intro Part 1: Revolutionizing the 960 grid system in Drupal

Posts in this series:

Table of Contents:

Background on Omega

The Omega base theme has come a long way since its inception in the summer of 2009, and its first commit.

Omega was created out of a personal need for a powerful, flexible starting point for grid theming, and was built off of the ideas of many popular base themes such as ninesixty, studio, zen, also pulling features from acquia marina (before fusion was created). All of the previously listed themes had pieces of functionality that I loved, yet none of them alone filled the perfect gap for the power I was looking for in my own starting point.

In its initial release for Drupal 6, Omega was a combination of features from those themes listed above, and had little in the way of custom code, except the theme settings it provided to select region sizing for various regions in page.tpl.php.

While powerful, the Drupal 6 version of Omega was a first run at feature set and interface to provide a rich base theme for Drupal based on the 960 grid system. In the time since that first release, Omega has grown, both in the original D6 version, and in the two... yes, two version currently available for Drupal 7.

This post, and others in this series will outline the new features, functionality and how to use the Omega theme to its maximum potential, including the yet unreleased Omega UI (OUI) and Delta modules. This is just the beginning of documenting the current version of Omega and there will be many new screencasts forthcoming, and proper documentation on the 7.x-2.x branch of Omega in the near future.

Drupal 7 and Omega

Making sure that Omega had a valid release for Drupal 7 has been one of my top priorities for quite some time. With the announcement recently that there "should" be an official, stable release of Drupal 7 on January 5th, 2011, time is short to really line out how Omega in Drupal 7 works to ensure that those just now breaking into testing and using Drupal 7 will have the information they need to proceed is one of my highest priorities.

Since the first commit in the 7.x branch of Omega, there has been a wide sweeping set of changes to the core structure of the base theme, and the power behind it that will further enhance theming in the future of Drupal.

There are currently TWO releases of Omega available for Drupal 7. The next section discusses the two releases, and their fundamental differences and status moving forward.

Omega 7.x-2.x vs. 7.x-1.x

The 7.x-1.x version of Omega was the first port of the theme to Drupal 7 to get a working version ready for release, and stable usage. For many months now (since roughly Alpha 4) this website has been running Drupal 7, and the 7.x-1.x version of Omega, and the Gamma subtheme.

After really hashing out the modifications of the first 7.x release for Omega, it was quickly time to branch the code, and begin moving towards a more feature rich version.

Moving forward, the primary development for Omega will happen on the 7.x-2.x branch, and the 6.x and 7.x-1.x branches will become bug fix only. The 7.x-2.x branch is the future of grid theming, and should be used for most development on Drupal 7. There is not an upgrade path easily from the 7.x-1.x line and the 2.x branch. This is primarily because of a complete rewrite of the backend functionality, and the concept of "zones" used to act as a wrapper for regions that are grouped in the 960 grid.

Zones, by definition to those familiar with the 960 grid are the container elements for grid elements (regions) in the theme layer. Omega now through some advanced dynamic code, place groups of regions dynamically in page.tpl.php, and they are ordered by their definition in the .info file for your subtheme. Examples of this can be seen in omega.info and omega_starterkit.info. The ordering of these zones in the .info file determines the order in which they are rendered on page, and the order in which they appear in the theme settings interface in the administrative section of the site.

This flexibility was designed so that when the Omega UI is built, you will be able to move groups of regions via a draggable interface, and the order in the .info file could be rewritten dynamically.

The concepts introduced in the 7.x-2.x branch of Omega have been thought out over the past 1.5 years, and moving forward in Drupal 7 will revolutionize the concept of themes, and stretch the imagination of what can be accomplished on the theme layer. I implore you, when beginning your development for Drupal 7, to investigate the Omega theme, and also investigate the "competition", and decide for yourself the most flexible starting point for your theming needs.

Omega 7.x-2.x Roadmap

The following is a work in progress roadmap for the Omega project. There is a lot more tha has already been added to the functionality that is not currently in this roadmap, as it pertains directly to the base theme, and it's related projects. This was the initial overview, and will be updated soon to reflect all the features that are new, enhanced and upcoming for Omega.

  • Omega UI: Create overlay for visual region/zone configuration.
  • Group regions into "Zones" dynamically
  • Select "static" or "dynamic" layout type for EACH Zone
  • For ALL dynamic zones, allow push/pull (content first) options.
  • Omega UI: Allow "closing" a zone.
    • Omega UI: When a zone becomes "closed" or hidden, option should allow for moving any content assigned to that zone to a new zone. (For example, moving the sidebar_second content into sidebar_first if you want to hide the second sidebar.
    • Needs to allow "0" (zero) as a grid with value, defining a "hidden" region.
  • Omega UI: Draggable Region Widths
    • Omega UI: jQuery slider will allow resizing regions
    • Omega UI: "Pin" zones (push pin) to lock that zone from dynamically resizing.
  • Reordering regions in dynamic zones
    • Omega UI: jQuery draggable regions should allow regions to be "reordered", implementing push/pull classes to accomplish this. (will only work with zones set to use dynamic_regions_builder()
  • Add classes to ANY region through the interface.
  • Delta: Allow contextual theme settings. This will enable the ability under certain circumstances, for you to (via interface) change the grid layout, visible regions, positions and sizing based on things like the path of a page, the node type of a page, the taxonomy term page being displayed, and allow extending the API to create your own contextual means of rendering a completely different layout.

Please keep in mind this is a complete rough draft of what a potential roadmap for Omega and it's related projects will look like in a second release for Drupal 7.

Related Projects

Conclusion

Omega has come quite a long way since it was dreamed up out of a need for a powerful base theme based on the 960 grid. Stay tuned for further updates, documentation and screencasts on the Omega theme in the near future, along with the upcoming write-ups in this series.

Original Article: