Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Drupal 7 Ninja Theming

Drupal 7 Ninja Theming

Presentation about Drupal's Omega 2 base theme and Delta module given for the Italian Alpine Drupalcamp 2011

omissis

May 07, 2011
Tweet

More Decks by omissis

Other Decks in Programming

Transcript

  1. Drupal 7 Ninja Theming
    How Context + Delta + Omega will blow your old
    themes up

    View Slide

  2. Claudio Beatrice
    Developer
    @omissis twitter
    http://silent-voice.org blog
    http://agavee.com team
    Co-founder of the ‘Drupal Italia’ Association
    A quick introduction
    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

    View Slide

  3. and some credits
    Jake Strawn
    Developer, Themer, Designer
    twitter @himerus
    email [email protected]
    blog http://himerus.com
    Sebastian Siemssen
    Developer
    twitter @thefubhy

    View Slide

  4. Alright then, what makes
    Omega so special?

    View Slide

  5. 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

    View Slide

  6. 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

    View Slide

  7. 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
    Down with the gridness

    View Slide

  8. 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

    View Slide

  9. A Saucerful of inspirations
    Non-960gs features
    • Custom page titles
    • Alternate settings for 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 only or all pages

    View Slide

  10. 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

    View Slide

  11. Let’s take a quick tour

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. 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

    View Slide

  19. 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...

    View Slide

  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

    View Slide

  21. • 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

    View Slide

  22. You oughta watch the entire video: http://bit.ly/e4zAt0
    Omega 3
    it’s good for your heart

    View Slide

  23. 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

    View Slide

  24. Thank you for watching!

    View Slide

  25. One last thing...™

    View Slide

  26. The DrupalCon London
    • 22 - 25 August
    • Fairfield Halls,
    Croydon
    • 1500+ expected
    attendees
    • Loads of awesome
    sessions, Jack
    Strawn’s included!
    • Fish and chips! :)))

    View Slide