Omega 4 Sass Quick Setup in Windows

I had a lot of trouble getting Omega Sass to compile properly without gem dependency errors. Below is a quick guide to getting your Windows Development Environment up and running quickly for the Omega 4 Theme using Pik (an RVM alternative), and Bundler.

  1. Download and install Ruby 1.9.3 and DevKit from 

    http://rubyinstaller.org/downloads/

Install and run RVM with bundler on Windows (Drupal Omega 4 specific)

Unlike on UNIX based systems, installing and configuring RVM on a Windows machine properly in order to be able to use the new possibilities in Drupal's Omega 4 theme could become a difficult task. But running that process through the cygwin environment makes it possible.

Installing cygwin and required dependencies

Make sure you install the 32-bit version of cygwin, as otherwise you could get errors when trying to compile your ruby when installing it through rvm. So Install cygwin with following packages and their dependencies:

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

Whether you should use Omega 4.x or Omega 3.x really depends on how much you want to rely on the user interface for building layouts as this is no longer included in the 4.x branch. If you are okay with a possible lack of documentation and the fact that Omega 4.x does not come with a layout builder as 3.x did then you should definitely prefer the 4.x branch.

Differences between Omega 3.x and 4.x

 

Omega 3.x

Sub-themes based on Omega 4.x

While Omega 4 is still in beta (as of August 2013), it is considered production-ready and are used as the base theme on real websites. Here is a list of prominent sub-themes that are based on Omega 4:

(Note: This list is by no means comprehensive. Additions are welcome.)

Ohm

Omega 4.x based demonstration theme. Serves as a best-practice reference for the Omega documentation.

The goal is to already be fully in line with the D8 CSS Coding Standards. While Omega 4.x core will do the heavy lifting of converting the existing D7 core CSS and templates to that standard (and override the corresponding template and CSS files from Core and some major contrib moduiles) we will build the CSS and templates specific to our demo/showcase theme according to those standards as well.

Ohm has been included as part of the official Omega 4.x theme package since omega 7.x-4.0-beta5 (2013-07-13),

Cloudy

Gridly

Gridly is a minimal & responsive Omega 4 subtheme. It is distributed as an install profile with all non-visual functionality provided as features. The theme is ideal for graphic designers or photographers or people who wish to publish a very visual/photo orientated website.

How to install this stack on Ubuntu

RVM is highly recommended for Omega 4. For more information about this, please see the previous page and the 'Gem Management' section at https://rvm.io/.

Here's a 3 min screencast that covers an Ubuntu installing everything required via rvm, including ruby and bundler : http://www.youtube.com/watch?v=RDuSrP3w06Y

Install RVM

Setting up a proper front-end development stack

PLEASE NOTE: Omega 4.x does not require that you use Sass or any of its related frameworks, however the ease of creating layouts and the time saved while doing so by using Sass is invaluable. Therefore it is not only encouraged that you embrace Sass, but also these other development tools for managing your local environment and Ruby gems.

What's Sass, Ruby, and Ruby gems and why do I need them?

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin and it is compiled with Ruby. Ruby is the programming language behind Sass and all the things that extend it. Ruby Gems like Compass, Susy, and Singularity GS, are basically software packages written in Ruby.

Sass and all the other Ruby Gems that extend its functionality are development tools that you install on your (optimally local) development machine. You then compile your stylesheets from .scss/.sass to .css from the command line.

Development setup and the software requirements.

Subscribe with RSS Subscribe to RSS - omega 4.x