drupal campmanila 2012 (responsive web in drupal with omega theme)

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