Drupal 7 Ninja Theming
How Context + Delta + Omega will blow your old
                themes up
A quick introduction
                     Claudio Beatrice
                                     Developer

                             @omissis twitter
                http://silent-voice.org  blog
                    http://agavee.com   team

      Co-founder of the ‘Drupal Italia’ Association

                   Skylogic S.P.A. - Turin (IT)
            Satellite telecommunications
       C, PHP, Drupal, Java, Javascript, MySQL, LDAP

                  Go On Media - Paris (FR)
                               Internet Media
                  PHP, Zend, Javascript, HTML, CSS

Agavee - Somewhere in Northern Italy :)
                          Web Development
            PHP, Drupal, Symfony, Javascript, jQuery
and some credits
     Jake Strawn
     Developer, Themer, Designer

     twitter @himerus
     email   jake.strawn@himerus.com
     blog    http://himerus.com



     Sebastian Siemssen
     Developer

     twitter @thefubhy
Alright then, what makes
   Omega so special?
It sits on the
    shoulders of giants
It’s an evolved implementation
of the ninesixty Drupal
theme which, in turn, is based
upon the 960 grid system
by Nathan Smith

                It gets inspiration (and features)
                from the most appreciated Drupal
                themes such as Acquia Marina,
                Zen, Fusion and Studio
Down with the gridness
960gs helps you to save time and to reduce
frustration by streamlining your front-end
development and insuring (what Yahoo
determines as) A-grade browsers compatibility




        http://sonspring.com/journal/960-grid-system
Down with the gridness
    Drupal (well, the guy who developed
    ninesixty) brought 960gs even further by
    adding some more functionalities to the
    framework such as:
•   push & pull classes (backported to 960gs)
•   ns() function for contextual widths of grid
    elements
•   grid overlay and debugging tools
•   RTL language support

    All these features are available in Omega
A Saucerful of inspirations
                                               960gs features

•   12, 16, 24, 32 column options
    •   Each zone has its own container options, which allows
        for mixed layouts
•   no need to use ns() function in most situations
    •   template_preprocess_page() handles this based on theme
        settings
    •   theme-settings.php gives extensive theme settings to base
        theme & all sub themes based on Omega
•   content first (.push & .pull) options
A Saucerful of inspirations
                                      Non-960gs features
 •   Custom page titles
     •   Alternate settings for <front> and other pages
     •   Custom separator

 •   Custom breadcrumbs
     •   On/off toggle for breadcrumbs
     •   Custom separator
     •   Toggle “home” link in breadcrumb
     •   Append current page to end of breadcrumb

 •   Mission statements
     •   Choose to display on <front> only or all pages
Hey! But there’s moar!
•   Highly customizable theme settings that let
    you configure your layout in a few clicks
•   XHTML and HTML5 subthemes
•   Delta and Context modules give you the
    ability to create separated theme
    configurations and use them depending on
    the conditions of your choice with no LOC
•   Drush integration lets you spawn new
    subthemes and export/revert their
    configuration in a matter of seconds
Let’s take a quick tour
Don’t call him baby
• Easily extendable: cleanly integrate custom
  grids is a matter of a few LOC
• Well documented: it has a dedicated website
  with plenty of resources and videos
• Fast development pace
• Growing community
Ok ok, you got me. Ain’t it a
   little bit too fat tho?

 ‘Course not! :) But let’s pretend it
   is so I am allowed to introduce
        the upcoming version...
Omega 3
                     it’s good for your heart
• Segmentation of Alpha & Omega
   • this will allow users to enable core functionalities without
        the added weight of some advanced features
•   Zone/Region Flexibility
     • ability to freely reassign zones and regions through the
        interface (Omega UI)
     • branding zone configurable through UI, less region--
        branding-tpl.php tweaking
•   Region Ordering improvements
     • static & dynamic zones will be both allowed to be ordered
     • finer control on how zones appear and are rendered
        (with all the consequences on SEO)
•   Performance Enhancements
     • Preprocess/process, Css, Theme settings
•   Optional CSS Loading
Omega 3
                 it’s good for your heart


• Responsive Grids
   • Adaptive layouts through customizable
     @media queries or javascript as fallback (IE   )
   • Good number of tweaks available such as
     optional grid styles and viewport/scale settings
   • Default layouts: mobile (region stacked),
     narrow (720px), normal (960px), wide
     (1200px)
Omega 3
                 it’s good for your heart




You oughta watch the entire video: http://bit.ly/e4zAt0
References
http://960.gs
http://himerus.com
http://developmentgeeks.com
http://omega.developmentgeeks.com
http://drupal.org/project/omega
http://groups.drupal.org/omega-framework
http://silent-voice.org
Thank you for watching!
One last thing...™
The DrupalCon London
           •   22 - 25 August
           •   Fairfield Halls,
               Croydon
           •   1500+ expected
               attendees
           •   Loads of awesome
               sessions, Jack
               Strawn’s included!
           •   Fish and chips! :)))

Drupal 7 ninja theming

  • 1.
    Drupal 7 NinjaTheming How Context + Delta + Omega will blow your old themes up
  • 2.
    A quick introduction Claudio Beatrice Developer @omissis twitter http://silent-voice.org blog http://agavee.com team Co-founder of the ‘Drupal Italia’ Association Skylogic S.P.A. - Turin (IT) Satellite telecommunications C, PHP, Drupal, Java, Javascript, MySQL, LDAP Go On Media - Paris (FR) Internet Media PHP, Zend, Javascript, HTML, CSS Agavee - Somewhere in Northern Italy :) Web Development PHP, Drupal, Symfony, Javascript, jQuery
  • 3.
    and some credits Jake Strawn Developer, Themer, Designer twitter @himerus email jake.strawn@himerus.com blog http://himerus.com Sebastian Siemssen Developer twitter @thefubhy
  • 4.
    Alright then, whatmakes Omega so special?
  • 5.
    It sits onthe shoulders of giants It’s an evolved implementation of the ninesixty Drupal theme which, in turn, is based upon the 960 grid system by Nathan Smith It gets inspiration (and features) from the most appreciated Drupal themes such as Acquia Marina, Zen, Fusion and Studio
  • 6.
    Down with thegridness 960gs helps you to save time and to reduce frustration by streamlining your front-end development and insuring (what Yahoo determines as) A-grade browsers compatibility http://sonspring.com/journal/960-grid-system
  • 7.
    Down with thegridness Drupal (well, the guy who developed ninesixty) brought 960gs even further by adding some more functionalities to the framework such as: • push & pull classes (backported to 960gs) • ns() function for contextual widths of grid elements • grid overlay and debugging tools • RTL language support All these features are available in Omega
  • 8.
    A Saucerful ofinspirations 960gs features • 12, 16, 24, 32 column options • Each zone has its own container options, which allows for mixed layouts • no need to use ns() function in most situations • template_preprocess_page() handles this based on theme settings • theme-settings.php gives extensive theme settings to base theme & all sub themes based on Omega • content first (.push & .pull) options
  • 9.
    A Saucerful ofinspirations Non-960gs features • Custom page titles • Alternate settings for <front> and other pages • Custom separator • Custom breadcrumbs • On/off toggle for breadcrumbs • Custom separator • Toggle “home” link in breadcrumb • Append current page to end of breadcrumb • Mission statements • Choose to display on <front> only or all pages
  • 10.
    Hey! But there’smoar! • Highly customizable theme settings that let you configure your layout in a few clicks • XHTML and HTML5 subthemes • Delta and Context modules give you the ability to create separated theme configurations and use them depending on the conditions of your choice with no LOC • Drush integration lets you spawn new subthemes and export/revert their configuration in a matter of seconds
  • 11.
    Let’s take aquick tour
  • 18.
    Don’t call himbaby • Easily extendable: cleanly integrate custom grids is a matter of a few LOC • Well documented: it has a dedicated website with plenty of resources and videos • Fast development pace • Growing community
  • 19.
    Ok ok, yougot me. Ain’t it a little bit too fat tho? ‘Course not! :) But let’s pretend it is so I am allowed to introduce the upcoming version...
  • 20.
    Omega 3 it’s good for your heart • Segmentation of Alpha & Omega • this will allow users to enable core functionalities without the added weight of some advanced features • Zone/Region Flexibility • ability to freely reassign zones and regions through the interface (Omega UI) • branding zone configurable through UI, less region-- branding-tpl.php tweaking • Region Ordering improvements • static & dynamic zones will be both allowed to be ordered • finer control on how zones appear and are rendered (with all the consequences on SEO) • Performance Enhancements • Preprocess/process, Css, Theme settings • Optional CSS Loading
  • 21.
    Omega 3 it’s good for your heart • Responsive Grids • Adaptive layouts through customizable @media queries or javascript as fallback (IE ) • Good number of tweaks available such as optional grid styles and viewport/scale settings • Default layouts: mobile (region stacked), narrow (720px), normal (960px), wide (1200px)
  • 22.
    Omega 3 it’s good for your heart You oughta watch the entire video: http://bit.ly/e4zAt0
  • 23.
  • 24.
    Thank you forwatching!
  • 25.
  • 26.
    The DrupalCon London • 22 - 25 August • Fairfield Halls, Croydon • 1500+ expected attendees • Loads of awesome sessions, Jack Strawn’s included! • Fish and chips! :)))