Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)
0 likes933 views
This document summarizes a presentation about responsive web design using the Omega theme in Drupal. It discusses how to install and configure Omega to create responsive websites, provides examples of sites using Omega, and describes features like different layouts for various screen sizes. It also briefly mentions the Bagani Drupal distribution for documenting human rights violations and encourages using Drupal for social causes.
Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)
- 1. Responsive web & Omega theme + Drupal Distributions Drupal Camp Manila 2012 (Feb 25, 2012) Rick Bahague Computer Professionals’ Union The OpensourceShoppe www.opensourceshoppe.com | www.cp-union.com Monday, February 27, 12
- 2. Be a CPU Volunteer Volunteer for CPU Drupal Development for Non-profits Database System Development for Non- profits www.opensourceshoppe.com | www.cp-union.com Monday, February 27, 12
- 3. Follow CPU twitter.com/CP_Union facebook.com/CPUnion facebook.com/AskCPU cp-union.com www.cp-union.com | Advancing ICT for the People Monday, February 27, 12
- 4. Who we are? www.cp-union.com | Advancing ICT for the People Monday, February 27, 12
- 5. Who we are? www.cp-union.com | Advancing ICT for the People Monday, February 27, 12
- 6. Open Source Shoppe specializes on open source tech for education Drupal implementation for universities and schools Commercial Drupal Support Drupal, CakePHP, PHP & GNU/Linux Trainings Monday, February 27, 12
- 7. Responsive themeing with Omega Brief on responsive web Omega theme and tools Implementation Sites Using Omega Monday, February 27, 12
- 8. Responsive Web Design Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages. A Dao of Web Design, JOHN ALLSOPP, 2007 http://www.alistapart.com/articles/dao/ Monday, February 27, 12
- 9. Omega -Responsive HTML 5 Base Theme First Drupal theme to have built-in responsive capabilities Developed and maintained by Jake Strawn, Development Geeks and Sebastian Siemssen. http://drupal.org/project/omega http://developmentgeeks.com/ Source: http://drupal.org/project/omega Monday, February 27, 12
- 10. Sites using Omega Theme Monday, February 27, 12
- 11. Wide layout Mobile layout for tablets Monday, February 27, 12
- 12. http://acquia.com Monday, February 27, 12 http://maclife.com
- 13. www.dzup.org www.ptc.org.ph www.cp-union.com Monday, February 27, 12
- 14. Ateneo’s Family Business Development Center Text http://ateneofambiz.com http://masscomm.upd.edu.ph Monday, February 27, 12
- 15. wide/desktop layout mobile layout layout for tablets Monday, February 27, 12
- 16. Responsive design with Omega: A walkthrough Monday, February 27, 12
- 17. 1. Download & Install Download & Install Omega Theme and Tools http://drupal.org/project/omega http://drupal.org/project/omega_tools ++ http://drupal.org/project/delta ++ http://drupal.org/project/context Monday, February 27, 12
- 18. modules directory themes directory Monday, February 27, 12
- 19. 2. Create Omega-subtheme Copy omega-html5 starter kit directory rename directory to theme name edit .info file of the subtheme .info config Monday, February 27, 12
- 20. 2. Create Omega-subtheme rename css files enable subtheme Monday, February 27, 12
- 21. Monday, February 27, 12
- 22. 3. Configure Omega Monday, February 27, 12
- 23. all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min- width: 740px) and (orientation:landscape) Monday, February 27, 12
- 24. all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) Monday, February 27, 12
- 25. all and (min-width: 1220px) Monday, February 27, 12
- 26. 4. CSS Files each layout has a separate css file mobile first Monday, February 27, 12
- 27. 5. In Action different background for every screen size body { background-color: xxxx; } Monday, February 27, 12
- 28. wide/desktop layout mobile layout layout for tablets Monday, February 27, 12
- 29. Features Fully Responsive Grid layouts based on 960.gs standards. 12, 16, 24 Column Layouts built in. Performance enhancements, making Omega the best performing base theme to date. HTML5 and XHTML Starterkits Content first layouts with push/pull classes. Source: http://drupal.org/project/omega Monday, February 27, 12
- 30. Features Quickly disable groups of and individual regions and zones. Every region/zone size and placement configurable. Apply custom CSS classes to any region/zone. Enable/Disable CSS from both Omega, Drupal core and contributed modules. Create contextual layouts with the Delta module. Source: http://drupal.org/project/omega Monday, February 27, 12
- 31. Questions ? Documentation: http://developmentgeeks.com/ Opensourceshoppe.com Monday, February 27, 12
- 32. Drupal Distributions Monday, February 27, 12
- 33. Monday, February 27, 12
- 34. Monday, February 27, 12
- 35. Monday, February 27, 12
- 36. Monday, February 27, 12
- 37. Bagani Drupal Distro Tool for documenting Human Rights Violations Created by CPU & Open Source Shoppe Used by 3 Human Rights Groups in the Philippines will soon be adapted for UNICEF’s Monitoring & Reporting Mechanism Project in the Philippines Heavy use of FORMS API Monday, February 27, 12
- 38. Monday, February 27, 12
- 39. BAGANI: Human Right Documentation Tool Monday, February 27, 12
- 40. BAGANI: Human Right Documentation Tool Monday, February 27, 12
- 41. BAGANI: Human Right Documentation Tool Monday, February 27, 12
- 42. BAGANI: Human Right Documentation Tool Monday, February 27, 12
- 43. Use Drupal not only for profit purposes. You can also use it as a tool for change. We have done it at CPU. Monday, February 27, 12
- 44. @Computer Professionals’ Union Monday, February 27, 12
- 46. Questions ? Monday, February 27, 12
- 47. Follow Us twitter.com/CP_Union twitter.com/rbahaguejr facebook.com/CPUnion opensourceshoppe.com facebook.com/AskCPU cp-union.com www.cp-union.com | Advancing ICT for the People Monday, February 27, 12
- 48. Responsive web & Omega theme + Drupal Distributions by Computer Professionals Union and Rick Bahague is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. Based on a work at www.cp-union.com. Monday, February 27, 12