Download de presentatie
De presentatie wordt gedownload. Even geduld aub
GepubliceerdLieven Willemsen Laatst gewijzigd meer dan 10 jaar geleden
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
Verwante presentaties
© 2024 SlidePlayer.nl Inc.
All rights reserved.