Presentation given at Drupal 414 on building responsive Drupal sites using Omega 3 and Omega 4. Touching base on how to use Compass & Sass.

1. Gettin' responsive.
Omega 3
&
Omega 4
It's apples to oranges, but lets do it anyways.

2. 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.

3. Apples to Oranges
Omega 3
●
●
●
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
●
●
●
●
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.

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.

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

6. Responsive Ideas

7. 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!

8. 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.

9. 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

10. 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

11. Pro Frontend Development
Bundler: A Gemfile
describes the gem
dependencies
required to execute
associated Ruby code.
Guard: a command line
tool to easily handle events
on file system modifications.
(just watches for changes
to compile)
Grunt: JavaScript task runner,
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
is package­agnostic.
Omega 4 uses Bower to
download respond.js,
html5shiv