It's apples to oranges, but lets do it anyways.
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
Provides a UI for placing
blocks and assigning grid
spans, prefix and suffix spans.
Prebuilt grid with
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
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.
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
Context & Delta | Panels & Pages
Context enhances the capabilities of
Blocks, menus, views, CSS classes
can be placed based on mutliple
Delta is similar to context, but on the
Context provides robust control over
blocks and their placement and
Delta provides robust control over a
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
Node properties, fields, blocks, Views,
and more are exposed as panes
which make up the content of a Panel.
Page manager controls what Panels'
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
Compass makes using Sass easier with
preconfigured mixins, sprite creation and
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
Compass provides a reset import
Singularity is a Ruby gem for Sass
to provide grid framework
Susy is a Ruby gem for crazy grid
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'
Change file extension to .scss
Create _variables.scss and
Import _variables.scss and
_mixins.scss to each default Omega 3
Run Compass compile!
Make sure you installed
Ruby and ran 'gem install
sass' and 'gem install
Pro Frontend Development
Bundler: A Gemfile
describes the gem
required to execute
associated Ruby code.
Guard: a command line
tool to easily handle events
on file system modifications.
(just watches for changes
Grunt will monitor your system
and provide certain actions
such as minification, Sass
compiling, and more.
Bower: is a package
manager for the web.
Bower runs over Git, and
Omega 4 uses Bower to
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.