Gettin' responsive.

It's apples to oranges, but lets do it anyways.

Omega 3

Omega 4&

What is responsive design!?● A design that is willing to adapt.● A true user experience● The biggest buzzword of the year.● Targeted using media queries● Mobile first is performance first.● Generally target tablet, to small 

desktop, to large desktop.● Utilize columns and grids to 

provide theme structure.

Apples to Oranges

● Omega 3 has a built in grid system supporting 12, 16, or 24

● Provides a UI for placing blocks and assigning grid spans, prefix and suffix spans.

● Prebuilt grid with pre­configured media queries.

● Omega 4 has no pre-built grid.● Utilizes 'layouts', which are

alternate page.tpl.php dropins● Built on Sass to generate

Singularity or Susy grids● There is no region UI, all

regions templated in page.tpl.php or custom layouts.

Omega 3 Omega 4

Alpha, Omega ­ see what they did there.● Omega 3 is actually two themes:

● Alpha, the base● Omega, the extension

● Alpha provides the grid system and region management system.

● Omega provides region specific templates and flushes out the framework into a theme.

● Utilizes preprocess and process inc files to simplify hook management.

Visualizing Omega 3● global.css● alpha­default.css● alpha­default­narrow.css● alpha­default­normal.css● alpha­default­wide.css

Responsive Ideas

Responsive Design Practices

● Find your groove! There is no right way (or maybe there is?)● Think before you style (but not too much)! Preplan your content 

before creating styles that involve set width, margin, or padding.● Responsive design involves multiple reviews in all viewports, a 

change in one can affect others above it.● Image sizes! Make sure your site's payload is as small as possible.● Consolidate graphics into sprites or base64 encoded renderings.● Your site's universal usability will not matter if you ignore possible 

bandwidth restrictions!

Context & Delta | Panels & Pages● Context enhances the capabilities of

blocks. ● Blocks, menus, views, CSS classes

can be placed based on mutliple contexts

● Delta is similar to context, but on the template level.

● Context provides robust control over blocks and their placement and content design.

● Delta provides robust control over a theme's regions.

● Merlinofchaos is a boss.● Panels utilizes Page Manager

(Ctools) to replace your node.tpl.php.● Panels can use different layouts that

provide drag-and-drop content placement.

● Node properties, fields, blocks, Views, and more are exposed as panes which make up the content of a Panel.

● Page manager controls what Panels' overrides.

Compass & Sass● Sass is an extension of CSS3 which adds 

nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

● Compass makes using Sass easier with preconfigured mixins, sprite creation and more.

● You need Ruby to use Compass or Sass.● Compass uses config.rb and can 

compile from its location based on the CSS, JS, and image directory specified in config.rb

● Compass provides a reset import● Singularity is a Ruby gem for Sass 

to provide grid framework generation

● Susy is a Ruby gem for crazy grid columns.

● rgbapng is a Compass plugin to convert RGBa values to PNGs

Use Sass with Omega 3!● Create a new directory 'scss'● Create a bare Compass setup● Copy the default CSS files to 'scss' 

directory● Change file extension to .scss● Create _variables.scss and 

_mixins.scss● Import _variables.scss and 

_mixins.scss to each default Omega 3 stylesheet.

● Run Compass compile!

● Make sure you installed Ruby and ran 'gem install sass' and 'gem install compass'

● Reference Drual.org https://drupal.org/node/1808252

Pro Frontend DevelopmentBundler: A Gemfile describes the gem dependencies required to execute associated Ruby code.

Grunt: JavaScript task runner, Grunt will monitor your system and provide certain actions such as minification, Sass compiling, and more.

Guard: a command line tool to easily handle events on file system modifications. (just watches for changes to compile) 

Bower: is a package manager for the web. Bower runs over Git, and is package­agnostic. Omega 4 uses Bower to download respond.js, html5shiv