Using Omega 4 with Omega Child theme, Compass, Sass, & Susy

Using Omega 4 with Omega Child theme, Compass, Sass, & Susy

UPDATE on 7/17/13:  While the below works, there is now better documentation on omega: https://drupal.org/node/1936970
With Drupal Omega 4 theme in beta and they are still working on documentation, using it is a little challenging.   So here is a quick run-down of using while developing on a local Ubuntu server.   It can also be done using a WAMP with the Compass window tools.   Skip all the ubuntu installation through execution of compass watch . command and use the compass apps.

Make sure you have drush installed (and you need latest drush not the old drush that ubuntu install.  I found a forum thread that helped update drush to 5.8)

Download Omega 4  (drush dl omega –select and choose the Omega 4 (in beta when this was written)

Using Drush create a child subtheme (http://drupal.org/node/1936948)  (Note:  I had to make sure omega tools wasn’t enabled otherwise it kept giving me a omega theme not found error.)

Installation of Ruby, Compass, Susy and few Compass packages  on Ubuntu

  • sudo apt-get install ruby-full build-essential
  • sudo apt-get install rubygems
  • export PATH=/var/lib/gems/1.8/bin:$PATH

On Ubuntu, I had to update rubygems for the toolkit installs.

  • sudo gem install rubygems-update
  • cd /var/lib/gems/1.8/bin/
  • sudo ./update_rubygems
  • sudo gem install bundler

Continue installing packages….

  • sudo gem install compass
  • sudo gem install susy
  • sudo gem install sass (not sure if needed but installed it.)
  • sudo gem install toolkit
  • sudo gem install compass-normalize
  • sudo gem install compass-rgbapng

Change directory to the child subtheme directory (called ‘themename’ from now on.)

Execute ‘compass watch .’ and it will constantly watch for any change in the SCSS files and re-compile it to CSS.  So you can styling to sass/styles.scss and after editing, the css/styles.css should be updated automatically.

Basic Setup the Layout and specific css for the layout

  1. Create a ‘themename/layouts/newlayout’ directory and add 2 files…   newlayout.layout.inc & newlayout.layout.tpl.php (http://drupal.org/node/1936980)  I copied simple layout for this from the Omega theme and changed the newlayout name to match my themename.
  2. Create a ‘themename/sass/layouts/themename/themename.layout.css’. (I copied omega\sass\layouts\simple\simple.layout.css)

Adding more CSS

Adding your own css…  following another Omega 4 subtheme pattern.   I created  a ‘themename/sass/themename’ directory and started putting in my own .scss files there.  (i.e.  ‘sass/themename/_menu.scss’  )  Then in the ‘themename/sass/styles.scss’ make sure you import in that scss file.   (i.e.   @import “themename/menu”; )

So basically to summarize:

  • You work in the ‘themename/sass’ directory to add/modify your css.
    • layouts/themename/themename.layout.scss which is using the Compass grid extension Susy
    • themename/_*.scss files which contain theme specific.
  • You work in the layouts/layoutname directory to modify your layout (tpl.php)
  • Compass generates all your css and puts in your ‘themename/css’ directory

Other comments/suggestions:

Adding Regions:

  • Add to both your template.info file and your ‘layout/layoutname.layout.inc’ file

5 Responses to “Using Omega 4 with Omega Child theme, Compass, Sass, & Susy”

  1. Jt Hollister

    2013-05-10T17:53:02+00:00

    Thank you so much for writing this. There is a major lack of info on Omega 4 and I can’t blame the maintainers for focusing on making it cooler, but I’ve been seeking a start point and I believe I’ve found it.

  2. Andrew

    2013-07-04T06:06:41+00:00

    > Create a ‘themename/layouts/newlayout’ directory and add 2 files… newlayout.layout.inc & newlayout.layout.tpl.php

    It will be obvious when people copy the files from the supplied “simple” layout directory, but for the record the name of the second file should be:

    newlayout-layout.tpl.php

  3. Rob Ray

    2013-07-06T14:31:39+00:00

    Thanks for the info!

    I’m just ramping up on Sass, Compass and Omega 4

    One question regarding your Step 2.

    “2. Create a ‘themename/sass/layouts/themename/themename.layout.css’. (I copied omega\sass\layouts\simple\simple.layout.css)”

    In my omega/sass/layouts/simple folder I have a file called simple.layout.scss

    Note the filename is the same but it is a .scss extension. Wondering if you had a typo in there or if something has changed since your original post.

    I’m running Omega 7.x-4.0-beta4

    thanks! – Rob

  4. Sebastian Siemssen (fubhy)

    2013-07-17T10:24:55+00:00

    Hey Heidi!

    Thanks for your blog post! And thanks for helping people to start with Omega 4.x (yes, we are still lacking documentation, but it’s getting better).

    In the meantime, some people copied together some of the answers I gave on the issue queue for how to properly set up a good front-end ruby/gem/sass stack.

    They put it on the handbooks right here: https://drupal.org/node/1936970

    The original post (which most of this stems from) can be found at https://drupal.org/node/2009540

    While your set-up works, of course, it is not ideal due to the vast amount of different gems out there and how quick they move. You might (no, you will) run into problems once you start collaborating on projects with multiple other developers or if you work on different projects simultaneously. Each one of them might have different gem dependencies and the Sass might be written for different syntax of mixins from different gem versions.

    The solution to that problem is to properly set up a development stack with RVM and Bundler.

    You can find the information for how to do that on the handbook page I linked above.

    Would you mind updating your post or adding a reference to them so people can choose to go with the “proper” setup if they want? (Again, your setup works of course if you want to try it out real quick, but for a future-proof, solid setup I would always recommend going with what that above link describes).

    Thanks!
    Sebastian Siemssen (fubhy)
    Maintainer of Omega 4.x

  5. Raffael Reichelt

    2013-12-02T03:39:12+00:00

    Thanks for this great wrapup – works great … on Mac OSX there was only something missing:

    sudo gem install sass-globbing.

    After updating to Mavericks (or maybe some compass update?) you need to insert before toolkit:

    sudo gem install breakpoint
    sudo gem install singularitygs

Leave a Reply