drupal campmanila 2012 (responsive web in drupal with omega theme)
DESCRIPTION
TRANSCRIPT
Responsive web & Omega theme
+ Drupal DistributionsDrupal Camp Manila 2012 (Feb 25, 2012)
Rick BahagueComputer Professionals’ Union
The OpensourceShoppe
www.opensourceshoppe.com | www.cp-union.com
Monday, February 27, 12
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
Follow CPU
twitter.com/CP_Union
facebook.com/CPUnion
facebook.com/AskCPU
cp-union.com
www.cp-union.com | Advancing ICT for the PeopleMonday, February 27, 12
www.cp-union.com | Advancing ICT for the People
Who we are?
Monday, February 27, 12
www.cp-union.com | Advancing ICT for the People
Who we are?
Monday, February 27, 12
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
Responsive themeing with Omega
Brief on responsive web
Omega theme and tools
Implementation
Sites Using Omega
Monday, February 27, 12
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, 2007http://www.alistapart.com/articles/dao/
Monday, February 27, 12
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/omegaMonday, February 27, 12
Sites using Omega Theme
Monday, February 27, 12
Wide layout
layout for tablets
Mobile
Monday, February 27, 12
http://maclife.com
http://acquia.com
Monday, February 27, 12
www.dzup.org
www.ptc.org.ph www.cp-union.comMonday, February 27, 12
Text
Ateneo’s Family Business Development Center
http://masscomm.upd.edu.ph
http://ateneofambiz.com
Monday, February 27, 12
wide/desktop layout
layout for tablets
mobile layout
Monday, February 27, 12
Responsive design with Omega: A walkthrough
Monday, February 27, 12
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
modules directory
themes directory
Monday, February 27, 12
2. Create Omega-subthemeCopy omega-html5 starter kit directory
rename directory to theme name
edit .info file of the subtheme
.info configMonday, February 27, 12
2. Create Omega-subthemerename css files
enable subtheme
Monday, February 27, 12
Monday, February 27, 12
3. Configure Omega
Monday, February 27, 12
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
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
all and (min-width: 1220px)
Monday, February 27, 12
4. CSS Files
each layout has a separate css file
mobile first
Monday, February 27, 12
5. In Action
different background for every screen size
body { background-color: xxxx;}
Monday, February 27, 12
wide/desktop layout
layout for tablets
mobile layout
Monday, February 27, 12
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/omegaMonday, February 27, 12
FeaturesQuickly 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/omegaMonday, February 27, 12
Questions ?
Documentation: http://developmentgeeks.com/
Opensourceshoppe.com
Monday, February 27, 12
Drupal Distributions
Monday, February 27, 12
Monday, February 27, 12
Monday, February 27, 12
Monday, February 27, 12
Monday, February 27, 12
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
Monday, February 27, 12
BAGANI: Human Right Documentation Tool
Monday, February 27, 12
BAGANI: Human Right Documentation Tool
Monday, February 27, 12
BAGANI: Human Right Documentation Tool
Monday, February 27, 12
BAGANI: Human Right Documentation Tool
Monday, February 27, 12
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
@Computer Professionals’ Union
Monday, February 27, 12
http://drupaldistrowatch.com/
Monday, February 27, 12
Questions ?
Monday, February 27, 12
Follow Us
twitter.com/CP_Union
facebook.com/CPUnion
facebook.com/AskCPU
cp-union.com
www.cp-union.com | Advancing ICT for the People
twitter.com/rbahaguejr
opensourceshoppe.com
Monday, February 27, 12
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