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.

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

45. http://drupaldistrowatch.com/
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