RSS Feed | Himerus.com

Omega 3.x - Overview of the Responsive Grid

himerus — Sat, 16 Apr 2011 18:22:05 +0000

A lot has been in the works recently on the upcoming Omega 3.x version. As always, Omega is always on the lookout for the best methods, the most powerful features, all combined with a flexible base theme.

Please read the full post on Development Geeks

DrupalCamp Western MA: Grid Theming

himerus — Tue, 15 Feb 2011 18:40:07 +0000

The following video is of my presentation at DrupalCamp Western Mass a few weeks back. The topics of Omega and Delta are covered, as well as the usage of Context for contextual theme settings with Delta.

This session received a lot of great feedback both at the camp and in followup posts and emails. And with the recent update of Omega to beta stage, Omega/Delta are ready for some serious usage on production sites! I currently am using the "Omega Framework" on multiple D7 sites, including several live sites and sites under current development.

Enjoy the video, and look forward to more screencasts coming soon on the latest changes to Omega.

Omega Beta1 released, HTML 5 Support

himerus — Sun, 13 Feb 2011 19:56:38 +0000

After a lot of long hours, the Omega Drupal 7 base theme is finally ready for Beta!! Omega has seen two versions (1.x and 2.x) in Drupal 7, and the 2.x branch is finally in a semi-stable API freeze after quite a few changes the last few days to the underlying architecture and also adding in HTML5 support.

There were quite a few bug fixes and new features added to the Beta1 release. For users upgrading from an alpha version of Omega, please note the following issues on drupal.org to explain some minor template edits that will need to occur before your previously built Omega subthemes will work.

The HTML5 support was adapted from the Boron and Adaptivetheme and their current support of HTML5. There may be underlying issues with the HTML5 setup, but it appears to be working properly, and is implemented here on himerus.com.

A new release for the Gamma subtheme will be coming very soon, as well as an update for the Omega Micro-Site to this new release.

Keep your eyes on Omega, the up and coming player in the Drupal 7 base theme battles!!

Omega micro-site launched!

himerus — Fri, 21 Jan 2011 02:20:36 +0000

While I'm always trying to find a way to better the Omega theme, I also sometimes like to take a few moments (or a day) to enjoy doing something creative and fun with it. A couple of days ago, a link was passed around twitter about the new HTML 5 logo. I absolutely loved the design, layout, and big eye-popping headers and elements.

So my creative side went to work, and made a design based heavily off of that concept, and within 24 hours launched a working Drupal 7 version of the new omega microsite!!!

The above screenshot only shows a little of the page, so be sure to visit the site, and feel free to comment on how it's a complete rip-off of their design, or about how much you love it as well!

This launch foreshadows my presentation on Omega/Delta at DrupalCamp Western Mass coming up this Saturday, the 22nd of Jan.

On another related note, in the last usage update on Drupal.org, the Omega theme finally passed the 1000 installs mark!!! Watch out Zen & Fusion, here I come!!!

So, without any further chatter, be sure to check out new omega microsite, and discover the Omega theme for yourself!!

Omega Intro Part 2: Using the Delta module for contextual layouts

himerus — Wed, 12 Jan 2011 00:54:59 +0000

Posts in this series:

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

Omega Intro Part 2: Using the Delta module for contextual layouts

(upcoming) Omega Intro Part 3: Pushing Omega to the limits of Drupal Theming

(upcoming) Omega Intro Part 4: The Omega UI and creating a user friendly interface

(upcoming) Omega Intro Part 5: Building a platform from your theme layer

Background on Delta

For quite some time, the Omega theme has been my passion, and furthering my ability to quickly theme out advanced sites based on the 960.gs.

Since November of 2009, I've had the concept for the Delta module. That original post now is quite outdated, and in several of my presentations over the last year, I've discussed what it would do when the time came that Delta was built. Delta essentially gives you the ability for Omega subthemes, to duplicate your theme settings, which control everything from the title display, breadcrumb settings AND the layout of all the zones/regions in page.tpl.php, and their sizing based on the 960 grid. By creating "templates", or simply these copies of your theme settings, by using the Context module, you can then set whatever conditions you like for a reaction, and apply the templated settings.

Use cases for this include, but will definitely not be limited to:

Different layout for content/sidebars on the home page.
Disable certain zones/regions when on taxonomy term pages.
Make your administrative pages (only if powered by the Omega theme) fluid width rather than fixed width 960gs.
Pretty much anything you can imagine wanting to adjust region placement and sizing throughout your site based on ANY condition from the Context module!!

Screencast - Delta Introduction & Demonstration

The following screencast (17min) gives the initial introduction and demonstration of the first alpha release of the Delta module.

Related Projects

Conclusion

There ARE a lot more things to integrate like a method to use default (in code)/overwritten/normal storage methods, which then obviously supports import/export, features export, and much more...

Please be sure to test out the Delta module and Omega theme paired with the Context module for Drupal 7, and submit any issues you may encounter to help further both Delta and Omega!

Menu Expanded: Restoring expanded checkboxes in Drupal 7 on menu_overview_form

himerus — Mon, 10 Jan 2011 13:56:13 +0000

Whenever new software is released, it is impossible to always satisfy everyone. Drupal 7 is no different... it is a software built by a community. A community of contributors that do their best to satisfy the masses, but not every feature that gets in, or gets taken out satisfies everyone all the time.

One item for me... and no, this wasn't really something that was a deal breaker for me... I'm an avid supporter of Drupal, and always will be. However, in Drupal 7, there was an issue that was killing me... In this issue, the expanded column was taken away from the menu overview page, where you can drag and reorder or disable menu items for a full menu.

The simple argument IS valid... that those items are rarely used (once usually) and the fact that you can click edit, then select the expanded option, then save was enough for everyone to agree that it should be removed. I however, use this feature a lot as I develop, and even in client sites. When I am working on various aspects of my Omega base theme, I have a lot of times needed to drastically change my menus to test the functionality in drop-down menus, proper nesting, etc. So it is a feature that I take full advantage of, being able to quickly select for each menu link in a menu if it is expanded or not. Otherwise, I'm spending possibly dozens and dozens of clicks and page loads to replicate the same configurations.

With that said, yesterday I scratched my itch (not the first time), and released the Menu Expanded module, which simply restores this functionality in Drupal 7. This just goes to show that even though a decision may have been made in the community that goes against your own thoughts, or a feature was pulled out of core for whatever reason, doesn't mean it's time to whine and cry, because thanks to the power of Drupal, it only takes a little bit of contributed code to fix the issue, and put back that feature you came to rely on so much!!

Gamma theme released for Omega 2.x

himerus — Fri, 07 Jan 2011 16:56:32 +0000

After a lot of work on the Omega 2.x project, and a recent relaunch of himerus.com using Omega 2.x and the updated version of Gamma, the Gamma theme for Omega 2.x is finally ready to use for other production Drupal 7 sites.

I have posted several posts recently on the changes in the Omega 2.x line which further demonstrate using Omega 2.x, and there will be much more to come in the upcoming weeks/months on Omega, Delta and the Omega UI.

There are still some CSS adjustments that will need to be made to Gamma that accommodates things other than my default use case here on this site, and the more that can install on your test environments and get working with it, the sooner some of that will get sorted out!

Look forward to more news and updates on Omega and Gamma soon!

Omega 2.x: Zones & Zone Management

himerus — Mon, 03 Jan 2011 23:48:03 +0000

As I recently posted on the 7.x-2.x branch of the Omega theme, there have been a lot of changes recently to the core of Omega, and how it interacts with the Drupal theme layer.

This post will summarize the concept of Zones in Omega, and further serve as a demonstration of the possibility for developers to advance usage of the theme layer in your own themes, while attempting to demonstrate how the Omega theme might be your best choice for a starting point on your own project.

Overview of Zones in Omega

In previous versions of Drupal and the Omega theme, it was "quite difficult" for a non-PHP savvy developer to manipulate the regions available to page.tpl.php. The code on the backend that controlled the sizing and placement of certain regions is hard coded into the .info file, and in the page.tpl.php along with the form settings in theme-settings.php. The vision of Omega is to create an interface that truly gives ANY user the ability to drastically modify their site layout without large learning curves.

The current state of the 7.x-2.x branch of Omega takes a huge leap forward in laying the groundwork for this possibility.

Rather than needing to define new regions in .info, and placing them in page.tpl.php, then making any additions/modifications to theme-settings.php, Omega will make this all streamlined in relation to the grid settings of each region/zone and rendering of elements.

By Definition:

A Zone is defined as a container for regions.

Historically, in Drupal, you would simply add in a <div> tag in your page.tpl.php to contain your regions. Omega aims to make this must faster by automatically creating the containers (zones) and grid elements (regions) on the fly based on certain elements in both code and theme settings. As seen in the 6.x and 7.x-1.x versions of Omega (among other themes), your page.tpl.php can quickly spiral out of control with regions and become hard to manage or properly manipulate.

Digging into how it is done...

First, let's take a quick glance at the new page.tpl.php in Omega, and get an idea of how it works.

Above, we seen the ENTIRE contents of page.tpl.php. The main idea to note here is that using Omega, we no longer place regions traditionally, but use an alternative method in order to place our regions where and how we want.

There are two essential "wrappers" around our normal regions.

Each group of regions is contained in a zone.
There are 3 Zone Groups that are rendered in page.tpl.php
- Zones Above Content
- Content Zones
- Zones Below Content

The easiest possible method to determine the content of each of these zones is based in the .info file for your Omega subtheme.

Default Regions in omega_starterkit.info

; CONTENT REGIONS

; REQUIRED CORE REGIONS

regions[page_top] = Page Top
regions[page_bottom] = Page Bottom
regions[content] = Content

; END REQUIRED CORE REGIONS

; OPTIONAL CONTENT REGIONS

regions[user_bar_first] = User Bar First
regions[user_bar_second] = User Bar Second

regions[sidebar_first] = Sidebar First
regions[sidebar_second] = Sidebar Second

regions[location_search] = Location Bar

regions[header_first] = Header First
regions[header_second] = Header Second

regions[preface_first] = Preface First
regions[preface_second] = Preface Second
regions[preface_third] = Preface Third

regions[postscript_first] = Postscript First
regions[postscript_second] = Postscript Second
regions[postscript_third] = Postscript Third
regions[postscript_fourth] = Postscript Fourth

regions[footer_first] = Footer First
regions[footer_second] = Footer Second

; END CONTENT REGIONS

Above, we can see a normal list of region definitions in the .info file for our theme.

Default Zones in omega_starterkit.info

; CONTENT ZONES

zones[user][] = user_bar_first
zones[user][] = user_bar_second

;-----/ The branding zone is required and contains "special" content items
zones[branding][] = branding
zones[branding][] = menu

zones[header][] = header_first
zones[header][] = header_second

zones[preface][] = preface_first
zones[preface][] = preface_second
zones[preface][] = preface_third

;-----/ The location zone is required and contains "special" content items
zones[location][] = breadcrumb

;-----/ The content zone is required and contains required content items
;-----/ The content region should ALWAYS be first for source ordering.
zones[content][] = content
zones[content][] = sidebar_first
zones[content][] = sidebar_second

zones[postscript][] = postscript_first
zones[postscript][] = postscript_second
zones[postscript][] = postscript_third
zones[postscript][] = postscript_fourth

zones[footer][] = footer_first
zones[footer][] = footer_second

; END CONTENT ZONES

In this segment of code, we actually start to understand how the regions are placed in their appropriate container element, and then rendered to the page.

Zone Placement in page.tpl.php

In case it isn't clear by the .info ordering how these zones are placed, I'll explain this a bit further... Again there are three "groups" of zones... zones_above, zones_content and zones_below. The order in which zones are defined in the .info file defines the ordering of those zones inside their zone group, so moving a zone in this definition will move the item and its placement in page.tpl.php.

Zones Above Content

zones[user][] = user_bar_first
zones[user][] = user_bar_second

zones[branding][] = branding
zones[branding][] = menu

zones[header][] = header_first
zones[header][] = header_second

zones[preface][] = preface_first
zones[preface][] = preface_second
zones[preface][] = preface_third

zones[location][] = breadcrumb

Content Zones

zones[content][] = content
zones[content][] = sidebar_first
zones[content][] = sidebar_second

Zones Below Content

zones[postscript][] = postscript_first
zones[postscript][] = postscript_second
zones[postscript][] = postscript_third
zones[postscript][] = postscript_fourth

zones[footer][] = footer_first
zones[footer][] = footer_second

This is the simplest possible ordering available in Omega, and would quickly allow you to move your preface above your header, or add an additional zone and regions below the footer regions currently available. Work that will be coming in the Omega UI will eventually make it possible to NOT need to edit the .info file, but will instead allow the automated rewriting of this zone section, letting you drag and drop region & zone placements on the fly.

The above image shows that the zone ordering also applies to the way the zones are broken up into theme settings, and how they are ordered there.

In the 7.x-2.x version of Omega, the theme settings have become 100% dynamic, and will allow any region to use prefix/suffix classes, content first ordering using push/pull, etc. And to accomplish this, a very standardized naming system for the settings variables in the .info file have also become standard. In previous iterations (completely out of mistake, and not wanting to change it later many variables might have been called container, or wrapper in various areas. Now the variables that control the grid are much easier to decipher in the .info file if/when attempting to edit settings there.

Conclusion

This really goes quite a long ways in explaining the new methodology in the Omega theme, and there is much more to come on what can be already be done utilizing this new concept of zones, and how to further push this into other Drupal themes, and maybe even in Drupal core in the future.

Some of my next posts on Zones & Zone Mangement will cover topics like creating new zones, managing zone templates, managing zone group templates, and more!

Omega 2.x: Introducing the 32 column grid

himerus — Thu, 30 Dec 2010 01:59:36 +0000

Introduction

The Omega theme was the first to ever introduce the 24 column grid when it was added to the 960.gs package by Nathan Smith

The 24 column layout was included to give Blueprint fans the ability to have more columns, smaller gutters, while still using the tried and true structure of the 960 grid. I actually have used the 24 column layout several times just for clients that don't like the 20 pixel gutter between columns. I also used it for this blog at one point, while it was still running Drupal 6, and using the Alpha theme.

Why 32 Columns might be useful for your design

My biggest issue with the 24 column layout originally was its usable width being wider than the 12 and 16 column grids. The 12 and 16 column grids have 940 usable pixels, and the 24 column had 950 pixels. This made it impossible to use any combination of 12 and 16 with the 24 column layout.

As the illustrations below show using the 12 and 16 column layouts, it is possible to mix and match containers so that in various regions, you may want to put something together that can only be done in either the 12 OR 16 column layout. This example shows 3 equal width regions (only accomplished in the 12 column layout), and then 4 equal width regions (can be accomplished in the 12 or 16 column layout).

You can see above that the grid elements line up on the outer left and right edges, so you can easily mix and match 12 and 16 column containers to accomplish your layout/design needs. However, when throwing the 24 column layout into the mix, it is not quite so simple as seen below.

The above demonstration shows mixing a 12 and 24 column layout... Again, because the 24 column has 950 usable pixels instead of 940, they just don't line up, and without some creative design, you'll never get them to mix and match appropriately. You can see the differences on the left and right edges where the grid elements in the 24 column are pushed out an additional 5 pixels to each far edge.

With all this in mind.... The 32 column layout was my attempt to rectify this situation for my own personal needs, and also make it available to the users of the Omega theme. This version was generated (then heavily modified) by the grid system generator, and has both the fixed with (960 pixels) and fluid versions available in the Omega theme. Much thanks goes to Greg Stout for asking (I'm pretty sure sarcastically) if I would add a 32 column grid at one of our New Hampshire Drupal Group meetings.

The 32 column layout has (obviously) 32 columns, each 20 pixels wide, and with a left and right margin of 5 pixels, giving a 10 pixel gutter between columns, and a 5 pixel margin on the outer left and right of the container.

Now that we have a match for the 24 column layout, much like the 12 and 16 columns get to make out and look cool doing it, we can implement the 24 and 32 columns on the same page and line up as expected.

Finding the 32 column template

In the 7.x-2.x branch of Omega, there is now an assets folder that includes the overlays for all 4 grid sizes, including the new 32 column grid.

If you are looking for more flexibility from your grid and your Drupal base theme, then be sure to give the 2.x branch of Omega for Drupal 7 a spin in your next project!

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

himerus — Tue, 28 Dec 2010 15:45:32 +0000

Posts in this series:

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

Omega Intro Part 2: Using the Delta module for contextual layouts

(upcoming) Omega Intro Part 3: Pushing Omega to the limits of Drupal Theming

(upcoming) Omega Intro Part 4: The Omega UI and creating a user friendly interface

(upcoming) Omega Intro Part 5: Building a platform from your theme layer

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.

RSS Feed | Himerus.com

Omega 3.x - Overview of the Responsive Grid

DrupalCamp Western MA: Grid Theming

Omega Beta1 released, HTML 5 Support

Omega micro-site launched!

Omega Intro Part 2: Using the Delta module for contextual layouts

Posts in this series:

Table of Contents:

Background on Delta

Screencast - Delta Introduction & Demonstration

Related Projects

Conclusion

Menu Expanded: Restoring expanded checkboxes in Drupal 7 on menu_overview_form

Gamma theme released for Omega 2.x

Omega 2.x: Zones & Zone Management

Overview of Zones in Omega

Digging into how it is done...

Zone Placement in page.tpl.php

Zones Above Content

Content Zones

Zones Below Content

Conclusion

Omega 2.x: Introducing the 32 column grid

Introduction

Why 32 Columns might be useful for your design

Finding the 32 column template

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

Posts in this series:

Table of Contents:

Background on Omega

Drupal 7 and Omega

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

Omega 7.x-2.x Roadmap

Related Projects

Conclusion