Your SlideShare is downloading. ×
Gettin responsive: Using Omega 3 and Omega 4.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Gettin responsive: Using Omega 3 and Omega 4.

2,048
views

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.

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,048
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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