Gettin responsive: Using Omega 3 and Omega 4.
-
Upload
matt-glaman -
Category
Technology
-
view
1.957 -
download
5
description
Transcript of Gettin responsive: Using Omega 3 and Omega 4.
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 preconfigured 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● alphadefault.css● alphadefaultnarrow.css● alphadefaultnormal.css● alphadefaultwide.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 packageagnostic. Omega 4 uses Bower to download respond.js, html5shiv