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

Drupal 7 ninja theming

Embed Size (px)

DESCRIPTION

Slides for the presentation about Drupal's Omega Theme I gave at the Alpine Drupalcamp 2011 in Brixen, Italy

Citation preview

Page 1: Drupal 7 ninja theming

Drupal 7 Ninja ThemingHow Context + Delta + Omega will blow your old

themes up

Page 2: Drupal 7 ninja theming

Claudio BeatriceDeveloper

@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

Page 3: Drupal 7 ninja theming

and some credits

Jake StrawnDeveloper, Themer, Designer

twitter @himerusemail [email protected] http://himerus.com

Sebastian SiemssenDeveloper

twitter @thefubhy

Page 4: Drupal 7 ninja theming

Alright then, what makes Omega so special?

Page 5: Drupal 7 ninja theming

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

Page 6: Drupal 7 ninja theming

Down with the gridness960gs 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

Page 7: Drupal 7 ninja theming

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

Page 8: Drupal 7 ninja theming

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

Page 9: Drupal 7 ninja theming

A Saucerful of inspirationsNon-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

Page 10: Drupal 7 ninja theming

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

Page 11: Drupal 7 ninja theming

Let’s take a quick tour

Page 12: Drupal 7 ninja theming
Page 13: Drupal 7 ninja theming
Page 14: Drupal 7 ninja theming
Page 15: Drupal 7 ninja theming
Page 16: Drupal 7 ninja theming
Page 17: Drupal 7 ninja theming
Page 18: Drupal 7 ninja theming

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

Page 19: Drupal 7 ninja theming

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

Page 20: Drupal 7 ninja theming

Omega 3it’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

Page 21: Drupal 7 ninja theming

• 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 3it’s good for your heart

Page 22: Drupal 7 ninja theming

You oughta watch the entire video: http://bit.ly/e4zAt0

Omega 3it’s good for your heart

Page 24: Drupal 7 ninja theming

Thank you for watching!

Page 25: Drupal 7 ninja theming

One last thing...™

Page 26: Drupal 7 ninja theming

The DrupalCon London• 22 - 25 August

• Fairfield Halls, Croydon

• 1500+ expected attendees

• Loads of awesome sessions, Jack Strawn’s included!

• Fish and chips! :)))