Quantcast
Channel: drupal.org - Site administrators
Viewing all articles
Browse latest Browse all 426

Omega 3.x vs. Omega 4.x - Comparing Apples and Oranges

$
0
0

Differences between Omega 3.x and 4.x

 

Omega 3.x

Omega 4.x

Layout

  • Based on the 960 grid system
  • Comes with 4 preset viewport sizes 
  • Nice GUI interface for setting up custom layouts
  • The Delta module allows you to re-use these layouts in different site sections by coupling with Context. 
  • You may set breakpoints on the theme settings page.
  • Totally fluid layout
  • Add in your own breakpoints where you need them. 
  • The introduction of "layouts" essentially makes creating variations of page.tpl.php in code or the use of the Delta module unnecessary.
  • It splits up the CSS of Drupal core into separate admin and core
    stylesheets, reducing CSS load by 30%

HTML5

Yes

Yes

SASS

No, but you can add it in yourself

Yes, but it is not required. You could always just create and edit CSS files if desired, though use of SASS is recommended.

SUSY

No

Yes, though you could absolutely use any grid system you prefer instead.

Breakpoints

The breakpoints (within media queries) are editable from the theme settings interface.

Breakpoints are set within the CSS, through SUSY. They are not editable via the user interface.

CSS

Five main stylesheets: global, default, narrow, normal, and wide. Plus some
Omega basics for forms, text, branding and more that you may disable if desired.

The two starterkits included promote a maintainable SMACSS based structure (which generally means keeping media queries with components/SMACSS modules), but you can organize your stylesheets however you like.

Polyfill js libraries 

  • Formalize.js
  • Media Queries (JS triggers that allow custom functions to be executed
    depending on the screen size)
  • Equal Heights.js
  • Selectivizr.js
  • CSS3 Media Queries JS
  • Respond.js
  • CSS3 PIE
  • HTML5 shiv

Extensions

  • Ability to enable/disable Drupal Core module and Omega core
    stylesheets
  • Set viewport settings like initial, min and max scale.
  • Apple touch icons
  • Clear type support for Windows
  • Handheld friendly (metatag for Blackberries)
  • Mobile Optimized (for pocket PC)
  • Viewport (for modern smartphones)
  • Chrome Frame and IE Edge support

Development

  • Debugging placeholder blocks
  • Grid overlay
  • Drush integration when using Omega Tools module
  • Rebuild theme registry on page load
  • Rebuild css and JS aggregates on page load
  • Browser width indicator
  • LiveReload built-in support
  • Region demo mode.
  • Installs all the ruby gems you need 
  • Lots of Drush integration

Panels

Works with panels.

Omega layouts will be usable in the panels UI, plus context module
integration.

Summary

Omega + Delta is a slam dunk way to create highly customized layouts for your site, and any of the site sections that may vary with layouts. The downside is that the tablets often need custom code to account for the fact that portrait orientations are two skinny to fit 3+ columns side by side. And it is challenging to create with a multi-layout totally fluid site.

This version of Omega is completely targeted at moderate to advanced themers. Because it's driven by SASS+SUSY it will be incredibly easy and powerful to generate layouts for totally custom breakpoints if you are comfortable working in code. There are fewer options in the GUI in Omega 4.x. Instead, Omega 4.x is about giving you a "Theme API" to work with.

Fringe Scenarios

Nested Regions (for complex layouts) can be very difficult/tricky. If your layout requires regions within regions, you may be better off with panels or you can try this solution

If you are looking to do multiple fluid layouts without a bunch of inline media queries, try this approach.

If you want to be able to rearrange the order of your regions for mobile only, for example printing the sidebar first before the content, this is easy to do with Omega. Any set of regions within a zone can be posiitoned in a different order on mobile vs. other layouts.


Viewing all articles
Browse latest Browse all 426

Trending Articles