Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gettin responsive: Using Omega 3 and Omega 4.


Published on

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

Published in: Technology
  • Be the first to comment

Gettin responsive: Using Omega 3 and Omega 4.

  1. 1. Gettin' responsive. Omega 3 & Omega 4 It's apples to oranges, but lets do it anyways.
  2. 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. 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. 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. 5. Visualizing Omega 3 ● ● ● ● ● global.css alpha­default.css alpha­default­narrow.css alpha­default­normal.css alpha­default­wide.css
  6. 6. Responsive Ideas
  7. 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. 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. 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. 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 1808252
  11. 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