Drupal Omega Theme + LESS

1. Drupal Omega Theme + LESS Drupal User Group 13/12/2012 Maarten De Block www.entityone.be

2. Drupal User Group VZW • Ondersteunen van Drupaliniatieven • DUG • DrupalCamp • … • Kennis en gebruik Drupal bevorderen • Verkiezingen begin 2013 • http://dugbe.org/ 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 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 www.entityone.be

5. Alpha / Omega • Alpha • Basic CSS reset • Grid • Core layout • Interface and debugging • Basic templatingfunctions • Omega • Panels integration • Default CSS 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 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 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 www.entityone.be

9. Structuur • Section • Zone • Region • Block www.entityone.be

10. Sections • 3 sections • Header • Content • Footer • Niet de bedoeling dat ze aangepast worden www.entityone.be

11. Zones • Groepering van regions • Aanmaken: • .info bewerken • Section kiezen in UI www.entityone.be

12. Regions • Regions zoals bij andere theme’s • Aanmaken: • .info bewerken • Zone kiezen in UI www.entityone.be

13. Debugging • Grid en enplaceholders in/uitschakelen • Tonen voor bepaalde rollen www.entityone.be

14. Togglelibraries • Formalize • Helptom forms gelijke layout tegeven in verschillende browsers. • http://formalize.me/ • Media queries • Javascripttriggers omfunctiesuittevoerenadhv screen size • Extra classes op de body tag. • Equal heights • Iedereblock binnen region even hoogalshoogste block • “Force equal height for all child elements” op region zetten. www.entityone.be

15. Togglestyles • Optionele stylesheetsenablen • Drupalstylesheetsdisablen www.entityone.be

16. Toggleadvancedelements • In/uitschakelen van • Messages • Action links • Tabs • Breadcrumb • Page title • Feed icons 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 www.entityone.be

18. Mobile first • Eerst layout voor mobile in global.css • Per file de css uitbreiden www.entityone.be

19. Panels • Omega heeft support voor Panels! • Kiezen voor ‘Omega …’ bij layout www.entityone.be

20. LESS • Dynamicstylesheetlanguage. • Variablen gebruiken in CSS • Functies (Mixins) • http://lesscss.org/ 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 www.entityone.be

22. Verder • Delta • http://drupal.org/project/delta • Verschillende layout versies • Bijvoorbeeld home • Responsive images andstyles • http://drupal.org/project/resp_img www.entityone.be

23. Vragen? • info@maartendeblock.be • http://twitter.com/maartendeblock www.entityone.be

24. Pintjes! • Met dank aan Pure Sign voor locatie en drank! www.entityone.be