Omega 4

Matt Smith

Omega 4 Co-Maintainer

twitter: @splatio_

drupal.org: splatio

Sass & Compass

Partials


    css/
        styles.css
    sass/
        styles.scss
        _base.scss
        _layout.scss
        _components.scss
        components/
            _blocks.scss
            _nodes.scss

Compiling


    # Without Compass
    $ sass --watch style.scss:style.css


    # With Compass
    $ compass watch

Language Features

Variables
Nesting
Mixins
Extends

Compass Extensions

Breakpoint, Susy, Singularity, Globbing, Toolkit and many more!

Omega includes Bundler and a Gemfile to manage ruby dependencies.

SMACSS

Scalable and Modular Architecture for CSS

Base Styles

Define general, default styling to be applied everywhere.

Layout Styles

Separate major (layout) and minor (component) page elements.

Modules/Components

A minor page element to be placed within a layout area.

BEM


    /* Component */
    .component {}

    /* Sub-component */
    .component__sub-component {}

    /* Modifier */
    .component--modifier {}

Omega 3

UI is used to configure layouts.
HTML5 or XHTML starterkits.
Predefined breakpoints and stylesheets.
Dependency on Omega Tools module.
Delta and Context recommended.

Omega 4

Layouts are defined in code
HTML5 out of the box
No predefined breakpoints or stylesheets
Removed the dependency on Omega Tools
Delta no longer needed or recommended

Core CSS Cleanup

Easier to Override


    /* Reduced relience on specific HTML structure */
    table.system-status-report tr.merge-up td {}
    .merge-up td {}
    /* Removed over specified selectors */
    #blocks tr.region-message {}
    .blocks-admin .region-message {}
    /* Reduced qualified selectors */
    div.contextual-links-wrapper {}
    .contextual-links-wrapper {}

Split up Stylesheets


    user.css            user.base.css  # Base functional styles.
                        user.theme.css # Stylistic assumptions.
                        user.admin.css # Administration styles.

Omega Extensions

Layouts Extension

Page Template Managment

How are Layouts Defined?


    layouts/
        simple/
            simple.layout.inc
            preview.png
            simple-layout.tpl.php

`simple.layout.inc`


    name = Simple
    description = A simple 3 column layout.
    preview = preview.png
    template = simple-layout

    regions[header]         = Header
    regions[navigation]     = Navigation bar
    regions[highlighted]    = Highlighted
    regions[help]           = Help
    regions[content]        = Content
    regions[sidebar_first]  = First sidebar
    regions[sidebar_second] = Second sidebar
    regions[footer]         = Footer

    stylesheets[all][] = css/layouts/simple/simple.layout.css

`preview.png`

`simple-layout.tpl.php`


    
        
            <?php print render($page['header']); ?>
        

        
            
                <?php print render($page['content']); ?>
            
        

        
            <?php print render($page['footer']); ?>

Example: Embedded Layout


    layouts/
        embedded/
            embedded.layout.inc
            embedded-layout.tpl.php

`embedded.layout.inc`


    name = Embedded
    description = Display site in an embedded mode.
    template = embedded-layout

    regions[content] = Content

`embedded-layout.tpl.php`


    <?php print render($page['messages']); ?>
    <?php print render($page['content']); ?>

Contextually Switching Layouts


    /**
    * Implements hook_omega_layout_alter().
    */
    function hook_omega_layout_alter(&$layout) {
      if (isset($_GET['embedded'] && $_GET['embedded'])) {
        $layout = 'embedded';
      }
    }

Development Extension

Theming Powertools

Development Extension

Rebuild theme registry
Rebuild CSS and JS aggregates
Browser width indicator
Livereload
Region demo

Region Demo

Compatability Extension

Conditional <html> classes
Customisible viewport metatag
Chromeframe

Assets Extension

Move JS files to the footer
Exclude JS files
Exclude CSS files
Polyfills

Example:


    .my-component {
        margin-bottom: 1em;
        border: 1px solid red;
        color: green;

        @include breakpoint(800px, true) {
            padding: 20px;
        }
    }

Example:


    // Compiled CSS with media queries.
    .my-component {
        margin-bottom: 1em;
        border: 1px solid red;
        color: green;
    }
    @media screen and (min-width: 800px) {
        .my-component {
            padding: 20px;
        }
    }


    // Compiled fallback CSS
    .my-component {
        margin-bottom: 1em;
        border: 1px solid red;
        color: green;
    }
    .my-component {
        padding: 20px;
    }

No Query Fallbacks

Example:


    // Use breakpoint
    @import "breakpoint";


    $breakpoint-no-queries: true;
    $breakpoint-no-query-fallbacks: true;

    @import "styles";

Including fallback stylesheets

Ensure the generated CSS file is named *.no-query.css
Include the file, in the .info file, or using drupal_add_css()
Forget Old IE!

Autoloaded Preprocess, Process and Theme Functions

Take control of template.php

Adding a Preprocess Function

Create [theme-hook].preprocess.inc file in preprocess folder
Add preprocess function to the newly created .inc file, using the normal naming conventions.
Behold a clean, managable template.php file

Example: `hook_preprocess_block()`

The design calls for some alternate block styling:


    .block {
      // Some Styles
    }
    .block--system-navigation  {
      // Some Styles
    }
    .block--search-form,
    .block--system-powered-by {
      // Some Styles
    }

Example: `hook_preprocess_block()`


    .block {
      // Some Styles
    }
    .block--primary {
      // Some Styles
    }
    .block--minimal {
      // Some Styles
    }

Example: `hook_preprocess_block()`


    /**
     * Implements hook_preprocess_TEMPLATE().
     */
    function hook_preprocess_block(&$variables) {
      $block = $variables['block'];
      $name = $block->module . '_' . $block->delta;

      switch ($name) {
        case 'system_navigation':
          $variables['attributes_array']['class'][] = 'block--primary';
          break;
        case 'search_form':
        case 'system_powered-by':
          $variables['attributes_array']['class'][] = 'block--minimal';
          break;
      }
    }

Drush Integration

`omega-wizard`

$ drush omega-wizard

Please enter the name of the new sub-theme [Omega Subtheme]: Test Theme

Please enter a machine-readable name for your new theme [test_theme]: custom


Please choose a base theme for your new theme
  [0]  :  Cancel
  [1]  :  Omega


Please choose a starterkit for your new theme
  [0]  :  Cancel
  [1]  :  Default (Provided by Omega)
  [2]  :  Extended (Provided by Omega)


Please choose a destination. This is where your sub-theme will be placed
  Please choose a destination type.
    [0]  :  Cancel
    [1]  :  Site (e.g. 'all' or 'example.com')
    [2]  :  Installation profile
    [3]  :  Parent theme

`omega-wizard`


    Please choose a site.
      [0]  :  Cancel
      [1]  :  all

Do you want to keep the starterkit`s readme files? (y/n): n

Do you want to enable your new theme? (y/n): y

Do you want to make your new theme the default theme? (y/n): y

You have successfully created the theme Test Theme (custom) in sites/all/themes.

`omega-export & omega-revert`

drush omega-export


Which theme do you want to export the theme settings for?
  [0]  :  Cancel
  [1]  :  Test Theme (Subtheme of Omega)
  [2]  :  Omega

The theme settings for the Ohm theme have been exported to the .info file.

drush omega-revert


    Which theme do you want to revert the theme settings for?
    [0]  :  Cancel
    [1]  :  Test Theme (Subtheme of Omega)
    [2]  :  Omega

The theme settings for the Ohm theme have been reverted.

Grunt & Bower

Grunt

Command line task runner
Automates common development and build tasks
Omega includes a Gruntfile in the default startkit

Bower

Frontend dependency management tool
Dependencies listed in a bower.json file
Omega's dependencies can be managed through Bower
Add any additional theme dependencies to the bower.json file

The Ohm Subtheme

Demonstrates best practice for building Drupal themes with Omega 4
Frequently updated as best practice moves on
Should NOT be used in production, directly or as a base theme!

Panels Integration

The Future:
Omega 5.x

Drupal 8 Version Omega
Many Omega features fixed upstream in Drupal 8
Drupal 8 "backports" also fixed upstream

Questions?

splatio.github.io/omega-4-slides

Omega 4

Matt Smith

Omega 4 Co-Maintainer

twitter: @splatio_

drupal.org: splatio

Sass & Compass

Partials

Compiling

Language Features

Compass Extensions

SMACSS

Base Styles

Layout Styles

Modules/Components

BEM

Omega 3

Omega 4

Core CSS Cleanup

Easier to Override

Split up Stylesheets

Omega Extensions

Layouts Extension

Page Template Managment

How are Layouts Defined?

simple.layout.inc

preview.png

simple-layout.tpl.php

Example: Embedded Layout

embedded.layout.inc

embedded-layout.tpl.php

Contextually Switching Layouts

Development Extension

Theming Powertools

Development Extension

Region Demo

Compatability Extension

Compatability Extension

Assets Extension

Assets Extension

Example:

Example:

No Query Fallbacks

Example:

Including fallback stylesheets

Autoloaded Preprocess, Process and Theme Functions

Take control of template.php

Adding a Preprocess Function

Example: hook_preprocess_block()

Example: hook_preprocess_block()

Example: hook_preprocess_block()

Drush Integration

omega-wizard

omega-wizard

omega-export & omega-revert

Grunt & Bower

Grunt

Bower

The Ohm Subtheme

The Ohm Subtheme

Panels Integration

The Future: Omega 5.x

Links

Questions?

`simple.layout.inc`

`preview.png`

`simple-layout.tpl.php`

`embedded.layout.inc`

`embedded-layout.tpl.php`

Example: `hook_preprocess_block()`

Example: `hook_preprocess_block()`

Example: `hook_preprocess_block()`

`omega-wizard`

`omega-wizard`

`omega-export & omega-revert`

The Future:
Omega 5.x