www.entityone.be 1

Drupal Omega Theme + LESS

Drupal User Group 13/12/2012Maarten De Block

13/12/2012

www.entityone.be 2

Drupal User Group VZW

• Ondersteunen van Drupal iniatieven– DUG– DrupalCamp– …

• Kennis en gebruik Drupal bevorderen• Verkiezingen begin 2013• http://dugbe.org/

13/12/2012

www.entityone.be 3

Maarten De Block

• Drupal Developer / Trainer– Dus geen themer ;-)

• Auteur “Kickstart Drupal 7”– http://www.kickstartdrupal.be

• Zaakvoerder EntityOne– Gericht op web- en communicatiebureau’s– Consultancy, opleidingen, projecten

13/12/2012

www.entityone.be 4

Kenmerken Omega

• Responsive– Past zich aan naar breedte toestel

• Grid– 12, 16 of 24 kolommen– Gebaseerd op 960.gs

• HTML5 of XHTML Starterkit• Opdeling in regions en zones• #D8CX

13/12/2012

www.entityone.be 5

Alpha / Omega

• Alpha– Basic CSS reset– Grid– Core layout– Interface and debugging– Basic templating functions

• Omega– Panels integration– Default CSS

13/12/2012

www.entityone.be 6

Sites met Omega

• http://www.maxim.com/• http://commerceguys.com/• http://www.acquia.com/• http://www.entityone.be• http://www.cibweb.be

13/12/2012

www.entityone.be 7

Installatie

• http://drupal.org/project/omega• Downloaden als een andere theme• Subtheme maken– Manueel: README.txt– Automatisch:

http://drupal.org/project/omega_tools

13/12/2012

www.entityone.be 8

Installatie demo

• Downloaden Omega• Downloaden en installeren omega_tools• Appearance Create new Omega Subtheme– Map sites/all/themes moet (tijdelijk) beschrijfbaar

zijn!• Ook mogelijk met drush– http://drupal.org/node/1298676

13/12/2012

www.entityone.be 9

Structuur

• Section– Zone• Region

– Block

13/12/2012

www.entityone.be 10

Sections

• 3 sections– Header– Content– Footer

• Niet de bedoeling dat ze aangepast worden

13/12/2012

www.entityone.be 11

Zones

• Groepering van regions• Aanmaken:– .info bewerken– Section kiezen in UI

13/12/2012

www.entityone.be 12

Regions

• Regions zoals bij andere theme’s• Aanmaken:– .info bewerken– Zone kiezen in UI

13/12/2012

www.entityone.be 13

Debugging

• Grid en en placeholders in/uitschakelen• Tonen voor bepaalde rollen

13/12/2012

www.entityone.be 14

Toggle libraries

• Formalize– Helpt om forms gelijke layout te geven in verschillende

browsers.– http://formalize.me/

• Media queries– Javascript triggers om functies uit te voeren adhv screen

size– Extra classes op de body tag.

• Equal heights– Iedere block binnen region even hoog als hoogste block– “Force equal height for all child elements” op region zetten.

13/12/2012

www.entityone.be 15

Toggle styles

• Optionele stylesheets enablen• Drupal stylesheets disablen

13/12/2012

www.entityone.be 16

Toggle advanced elements

• In/uitschakelen van– Messages– Action links– Tabs– Breadcrumb– Page title– Feed icons

13/12/2012

www.entityone.be 17

CSS structuur

• global.css• yoursubthemename-alpha-default.css• yoursubthemename-alpha-default-narrow.css• yoursubthemename-alpha-default-normal.css• yoursubthemename-alpha-default-wide.css

13/12/2012

www.entityone.be 18

Mobile first

• Eerst layout voor mobile in global.css• Per file de css uitbreiden

13/12/2012

www.entityone.be 19

Panels

• Omega heeft support voor Panels!• Kiezen voor ‘Omega …’ bij layout

13/12/2012

www.entityone.be 20

LESS

• Dynamic stylesheet language.• Variablen gebruiken in CSS• Functies (Mixins)• http://lesscss.org/

13/12/2012

www.entityone.be 21

Omega + LESS

• http://drupal.org/project/less• http://drupal.org/project/libraries• http://leafo.net/lessphp/– Plaatsen in sites/all/libraries/lessphp

13/12/2012

www.entityone.be 22

Verder

• Delta– http://drupal.org/project/delta– Verschillende layout versies– Bijvoorbeeld home

• Responsive images and styles– http://drupal.org/project/resp_img

13/12/2012

www.entityone.be 23

Vragen?

• info@maartendeblock.be• http://twitter.com/maartendeblock

13/12/2012

www.entityone.be 24

Pintjes!

• Met dank aan Pure Sign voor locatie en drank!

13/12/2012