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

Presentatie over: "Drupal Omega Theme + LESS Drupal User Group 13/12/2012 Maarten De Block 13/12/2012www.entityone.be1."— Transcript van de presentatie:

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

2 Drupal User Group VZW Ondersteunen van Drupal iniatieven – DUG – DrupalCamp – … Kennis en gebruik Drupal bevorderen Verkiezingen begin 2013 http://dugbe.org/ 13/12/2012www.entityone.be2

3 Maarten De Block Drupal Developer / Trainer – Dus geen themer ;-) Auteur “Kickstart Drupal 7” – http://www.kickstartdrupal.be http://www.kickstartdrupal.be Zaakvoerder EntityOne – Gericht op web- en communicatiebureau’s – Consultancy, opleidingen, projecten 13/12/2012www.entityone.be3

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/2012www.entityone.be4

5 Alpha / Omega Alpha – Basic CSS reset – Grid – Core layout – Interface and debugging – Basic templating functions Omega – Panels integration – Default CSS 13/12/2012www.entityone.be5

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/2012www.entityone.be6

7 Installatie http://drupal.org/project/omega Downloaden als een andere theme Subtheme maken – Manueel: README.txt – Automatisch: http://drupal.org/project/omega_tools http://drupal.org/project/omega_tools 13/12/2012www.entityone.be7

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 http://drupal.org/node/1298676 13/12/2012www.entityone.be8

9 Structuur Section – Zone Region – Block 13/12/2012www.entityone.be9

10 Sections 3 sections – Header – Content – Footer Niet de bedoeling dat ze aangepast worden 13/12/2012www.entityone.be10

11 Zones Groepering van regions Aanmaken: –.info bewerken – Section kiezen in UI 13/12/2012www.entityone.be11

12 Regions Regions zoals bij andere theme’s Aanmaken: –.info bewerken – Zone kiezen in UI 13/12/2012www.entityone.be12

13 Debugging Grid en en placeholders in/uitschakelen Tonen voor bepaalde rollen 13/12/2012www.entityone.be13

14 Toggle libraries Formalize – Helpt om forms gelijke layout te geven in verschillende browsers. – http://formalize.me/ 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/2012www.entityone.be14

15 Toggle styles Optionele stylesheets enablen Drupal stylesheets disablen 13/12/2012www.entityone.be15

16 Toggle advanced elements In/uitschakelen van – Messages – Action links – Tabs – Breadcrumb – Page title – Feed icons 13/12/2012www.entityone.be16

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/2012www.entityone.be17

18 Mobile first Eerst layout voor mobile in global.css Per file de css uitbreiden 13/12/2012www.entityone.be18

19 Panels Omega heeft support voor Panels! Kiezen voor ‘Omega …’ bij layout 13/12/2012www.entityone.be19

20 LESS Dynamic stylesheet language. Variablen gebruiken in CSS Functies (Mixins) http://lesscss.org/ 13/12/2012www.entityone.be20

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/2012www.entityone.be21

22 Verder Delta – http://drupal.org/project/delta http://drupal.org/project/delta – Verschillende layout versies – Bijvoorbeeld home Responsive images and styles – http://drupal.org/project/resp_img http://drupal.org/project/resp_img 13/12/2012www.entityone.be22

23 Vragen? info@maartendeblock.be http://twitter.com/maartendeblock 13/12/2012www.entityone.be23

24 Pintjes! Met dank aan Pure Sign voor locatie en drank! 13/12/2012www.entityone.be24