240 likes | 462 Views
Drupal Omega Theme + LESS. Drupal User Group 13/12/2012 Maarten De Block. Drupal User Group VZW. Ondersteunen van Drupal iniatieven DUG DrupalCamp … Kennis en gebruik Drupal bevorderen Verkiezingen begin 2013 http://dugbe.org/. Maarten De Block. Drupal Developer / Trainer
E N D
Drupal Omega Theme + LESS Drupal User Group 13/12/2012 Maarten De Block www.entityone.be
Drupal User Group VZW • Ondersteunen van Drupaliniatieven • DUG • DrupalCamp • … • Kennis en gebruik Drupal bevorderen • Verkiezingen begin 2013 • http://dugbe.org/ www.entityone.be
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
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
Alpha / Omega • Alpha • Basic CSS reset • Grid • Core layout • Interface and debugging • Basic templatingfunctions • Omega • Panels integration • Default CSS www.entityone.be
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
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
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
Structuur • Section • Zone • Region • Block www.entityone.be
Sections • 3 sections • Header • Content • Footer • Niet de bedoeling dat ze aangepast worden www.entityone.be
Zones • Groepering van regions • Aanmaken: • .info bewerken • Section kiezen in UI www.entityone.be
Regions • Regions zoals bij andere theme’s • Aanmaken: • .info bewerken • Zone kiezen in UI www.entityone.be
Debugging • Grid en enplaceholders in/uitschakelen • Tonen voor bepaalde rollen www.entityone.be
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
Togglestyles • Optionele stylesheetsenablen • Drupalstylesheetsdisablen www.entityone.be
Toggleadvancedelements • In/uitschakelen van • Messages • Action links • Tabs • Breadcrumb • Page title • Feed icons www.entityone.be
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
Mobile first • Eerst layout voor mobile in global.css • Per file de css uitbreiden www.entityone.be
Panels • Omega heeft support voor Panels! • Kiezen voor ‘Omega …’ bij layout www.entityone.be
LESS • Dynamicstylesheetlanguage. • Variablen gebruiken in CSS • Functies (Mixins) • http://lesscss.org/ www.entityone.be
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
Verder • Delta • http://drupal.org/project/delta • Verschillende layout versies • Bijvoorbeeld home • Responsive images andstyles • http://drupal.org/project/resp_img www.entityone.be
Vragen? • info@maartendeblock.be • http://twitter.com/maartendeblock www.entityone.be
Pintjes! • Met dank aan Pure Sign voor locatie en drank! www.entityone.be