Introducing an adaptive layout into Omega

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
himerus's picture

I want to start this discussion because of a conversation that came up today in the #drupal-omega IRC room.

The idea is to introduce a completely restructured layout/presentation architecture into Omega incorporating the mobile-first method, and using @media-queries in order to adjust/alter presentation for other screen sizes.

I've seen this topic come up a lot, and there currently (that I know of) isn't any theme, little on a base theme with the power behind it Omega has, and this could be the piece to the puzzle that really takes it home down the road, and for some of my future plans with the project, and my own business model.

References

Examples of adaptive design

With each of the examples above, make sure you are resizing your browser window, and noticing how things adjust based on the size of the browser. Also, try some of the links in your mobile browser, and see the effect as well.

The key here is, and can be clearly understood stepping through the presentation slides in the first resource link, that it is imperative that we begin building and designing for mobile first, THEN working on our more advanced browser capabilities.

The question in my mind is NOT this:
If this type of baseline structure should be built into Omega

The question in my mind IS this:
How?

And not how like how do I do media queries, or how do I make it all fancy and crap like that, but the how is meant to be... what would be the best approach...

If you note this link, you see (by resizing your window width) how the site adjust and changes, but in sequential steps of predefined sizes. You see in this link the site (using the same technique) adjusting fluidly, making a lot more adjustments.

Omega has both the 960 grid fixed width and fluid width ability, so the way I envision this option is to essentially start with a clean CSS slate (in a new omega subtheme) which is based on the mobile device ONLY... this would use something (still in the grid system mind you), but targeted for <320 pixel browsers. In this case, the grid elements would just all stack on top of each other, and be the same width. Then there could be step ups (notice this link again).

I envision let's say 4 sizes:

  • < 320px = stacked elements
  • < 800px = normal 960gs functionality with altered grid widths
  • < 1020 = 960gs at its best
  • > 1200px = normal 960gs functionality with altered grid widths

That's my thought, and the general idea of the chat in IRC today... I'd love to hear some thoughts as this IS a high item on my priority list, but I want to really confirm a good path to take. While it may be "easy" to build something like the example sites above in an one-off site theme, building similar functionality into a base theme like Omega is a much more daunting task to ensure that it is flexible enough for ALL applications, and provides a perfect starting point for this type of adaptive web design.

Comments

WANT

rhelwig's picture

This seems to be something I could really use. I like how http://sasquatchfestival.com changes the menu as well as dropping/adding content as the size changes.

I do need to do something to handle mobiles on http://shiresilver.com, and was thinking of doing the typical browser detection then select theme stuff, and for now I might just have to.

How would this affect other modules like Ubercart/commerce and SimpleNews?

Working on getting a baseline for this setup....

himerus's picture

So, I've spent most of today working on this, and testing out techniques.

But first, another great example of this type of design/layout is http://lanyrd.com/

I've sucessfully (in a test case subtheme of Omega):

  • Implemented new theme setting to enable/disable the "responsive" grid
  • Using hook_css_alter (the same way omega base switches between the fixed/fluid grid) implemented a replacement for the default 960.css file should the "responsive" grid theme setting be enabled
  • Implemented (12 column only) versions of the following grid structures: default/mobile (NO grid widths (everything defaults to full width, so all regions stack)), a 720px grid, the 960px grid, and a 1120px grid.

With this in place, on my android phone, I get the default Omega (including ALL the placeholder blocks/regions) rendered full width of my phone, in a VERY usable way. MOBILE FIRST BABY...

In a browser window at full screen, I'm being given the large 1120px grid, but when I drag to resize my window, the site shrinks accordingly and via the @media queries, will shift to the appropriate grid based on the current size of the window, much like the site at http://sasquatchfestival.com/

This is a VERY successful test so far, and I'd say look for this in a very soon upcoming Omega update.

My biggest questions really are which sizes to use. I'm using http://www.spry-soft.com/grids/ to generate all the grids, then making them drupal friendly replacing underscores with dashes, and compressing them down as small as possible.

But I'm torn on which sizes to really target... (mobile version by default obviously, definitely the default 960 grid, definitely a larger grid (1100-1200px), but WHAT sizes should be there in between mobile and 960px???

you da man!

rggoode's picture

Sounds like exciting stuff

Roger

_________________

Art has gone to the dogs
GoodeGallery.com

"but WHAT sizes should be

mkmagu's picture

"but WHAT sizes should be there in between mobile and 960px???"

Keep tablets in mind, it is a growing market.

Mary M.

Definitely!

himerus's picture

I'm all over that one.... I do kinda foresee an iPad purchase in the upcoming weeks "JUST" for testing purposes. :)

I'm just torn (since these devices CAN render a "normal" page beautifully) on which size to shrink those devices to...

it's the difference between the min-width and min-device-width... the min-width might be 1200px, but the min-device-width is actually more like 600... (hence why I really need to test one)

And with (at least the ipad for sure) you can detect vertical or horizontal orientation via these @media queries, and so then, render the site accordingly for each case...

TONS of CSS, but totally worth the effort I think. (this Drupal market needs to be cornered, and Omega is the master of incorporating just about every feature known to man)

Your Tablet Resolution....

himerus's picture

Mary, as I work more on this, I'm curious, can you give me the resolution (in horizontal AND vertical orientation) for your tablet?? I know it's physically smaller than the iPad, and want to get an idea of how the sizes I'm rolling with work.

I'm sure it'll be okay in the wide version, but the narrower version might use the default mobile style...

It's an 8" screen 800x600,

mkmagu's picture

It's an 8" screen 800x600, let me know if you make changes to the site I'll test them out.

Mary M.

Thanks for diving deep into

paranormals's picture

Thanks for diving deep into the topic :) Another link to add to your list.
http://www.netmagazine.com/tutorials/adaptive-layouts-media-queries

very cool....

himerus's picture

Quite awesome...

I've currently (needs a lot of testing) got the 4 versions of grid sizing working

  • mobile (everything stacked) (default) (1 column)
  • 720gs (12, 16, 24 & 32 column) (active on any viewport > 740px)
  • 960gs (12, 16, 24 & 32 column) (active on any viewport > 980px)
  • 1200gs (12, 16, 24 & 32 column) (active on any viewport > 1220px)

This all seems to work fine (all my testing has been on the 12 column variety right now.
The CSS that handles ALL this is 53kb (ouch)

There's still a lot to think about here...

But the mobile seems to be solid as the default base CSS (pretty much ignoring the grid classes)
The 720px grid is great for (I dunno really) something smaller
The 960px grid still the tried and true version (even should be the default for iPad as I think the default width is 1024 on there)
The 1200px grid an awesome stretch for larger screens as even my baby 13" macbookpro can handle that one with it's 1280x800 resolution.

32 Column Grid...

himerus's picture

Okay...

So the 32 column grid that I introduced into Omega a while back is quite problematic in this attempt to update to a responsive grid.

the 12, 16 and 24 columns are tested as bulletproof at the sizes listed above.... but the 32 is problematic in the 720 and 1200 pixel grids... there just appears to be no way in hell that it can work.

Is anyone even using that grid??????

Would anyone be opposed to me pulling it from omega completely???

pull it

rggoode's picture

While I can justify it in terms of the extra granularity and control of space management... I honestly can't see the REAL need for a 32 column grid. Personally, I am most likely to use a 12 or 16 myself. I can't speak for everyone, but I think most people would concur.

Cut yourself some slack... You are on a very interesting and productive track with the adaptive layout. So focus your energy where it will do the most good. If there is a real need for a 32 column grid, it can be addressed at a later date. But personally, i doubt you'll get a lot of requests for it.

Roger

_________________

Art has gone to the dogs
GoodeGallery.com

Responsive grid (beta) released...

himerus's picture

Okay... it's done... thanks for the timely responses today... I didn't have too much time to stew on this, and decided to go with my first thoughts, and simply talking/posting it out here helped my train of thought...

This has been commited to master on the Omega GitHub Repository
This has been commited to master/7.x-2.x (dev) on drupal.org

It might be a bit before I tag this as a new release (definitely needs some testing, and the Beta & Gamma themes need some updates to accommodate for these changes to CSS since neither are working perfectly with the responsive grid turned on)

There is now a theme setting (of course) under general theme settings to enable this feature. When it IS enabled, the fixed/fluid option is hidden, as currently the fluid sizing and this don't work together. I will ponder that at another point, seems like it'd be easy enough to handle.

So for the brave, please checkout the master from GitHub and have a play with a clean install and resizing the window, testing on your various devices (looks great once again on my android phone)

(oh, and I DID kill the 32 column layout, which decreased the CSS in this new system by over 20K, and removed some kruft from the original grid code.

woot!

oops...

himerus's picture

One last thing... I forgot one commit that adds a meta tag (in html.tpl.php for now)

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

I added this to the base theme, and both starterkits, so a clean test environment using any of those will work, but if you try to test it with a subtheme you've already created, you'd need to add in this meta tag to your html.tpl.php as so:

<?php print $head; ?>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>

Thanks.. :)

I'll probably try to move this call to preprocess prior to actually tagging it in a new version of Omega.

Another update...

himerus's picture

Upon finishing this last night, only one real issue remained:

Since the theme now (only when using the responsive grid option) loads the mobile (stacked) version first, THEN applies the appropriate sized grid to browsers that support the @media query, IE < 9 was rendering the mobile version, as IE 9 is the first to support @media "appropriately"...

If it worked in IE8, I would have just said "screw it" and let IE6 & 7 show the mobile (simplest) version. But since IE8 did NOT support it, I needed an option...

I've made commits now that add in a 960-ie.css file after the responsive CSS is loaded, so that IE6, 7, and 8 all render the default 960.gs implementation that we're used to. This should avoid ANY sites that switch to/use the responsive grid from breaking in that POS browser.

This is looking pretty solid, and seems to be testing out well.

I'd expect a 2.2 release of Omega by the end of this next week. (once again after updating Beta & Gamma to be responsive)

This is how I chunked the screen sizes

jessebeach's picture

http://mediaqueri.es/about/

Smartphone
320px
Tablet
768px
Netbook
1024px
Desktop
1600px

------ Ranges ------

x-small

0 to 240px

⁃   single column
⁃   predominantly user agent styling

small

240px to 640px

⁃   single column
⁃   fully branded
⁃   reduced styling complexity

------ Media queries start ------

medium

640px to 1152px

⁃   multi column
⁃   fully branded
⁃   full styling complexity

large

1280px to 1680px

⁃   multi column
⁃   fully branded
⁃   full styling complexity
⁃   content uses CSS columns

x-large

1680px to 2560px

⁃   multi column
⁃   fully branded
⁃   full styling complexity
⁃   content uses CSS columns

GREAT Info!!!

himerus's picture

Jesse,

This is GREAT information!! Will prove very helpful in this. I'm not 100% on the sizes I've chosen, but this information seems to make me think I'm on the right track.

me too

jessebeach's picture

I had the same feeling of being on the right track as I've been reading your updates on this project. I've been tinkering around with the nuts-and-bolts of a mobile first setup for a few weeks now and when I saw you'd come up with more or less that same approach, I felt relieved that I wasn't off on some crazy tangent!

This is ridiculously exciting!

Enzomaticus's picture

Jake - awesome work as usual. This is so timely for everyone right now and Omega is indeed the perfect theme for it. Since Omega is becoming the go-to base framework (I hesitate to use "theme") for so many drupal themers and devs it makes complete sense that it also have this added functionality. Its going to cut down even more on project time & cost while allowing us to deliver a more useful and accessible site to clients.

Wow, take a day off from emails and look what happens.

Cheers,
Wayne

Many Thanks!

himerus's picture

I'm personally already ridiculously shocked at what this can do now with mobile-first thinking, and one additional theme setting.

I've updated (dev versions) of Beta and Gamma to work with this new setup.

The changes are slight, allowing a decently looking mobile version to be pushed for each of those themes right out of the gate, scaling up for larger resolutions to appear as they already do.

I've got some more architectural thinking to do on the subject though.
Possibly: a theme setting that enables EACH of the various sizes??? the 1200px grid auto-enabled for some sites might not make sense, as well as the 720px grid (small screens/ipad portrait orientation)

So MAYBE, the best option is to completely segregate the options so that (default) a user gets the mobile version intended to display stacked on every screen, but then can enable the 720, 960 and 1200px grids.

I dunno, but so far, I LOVE IT... already taking the concept to the next level on a personal project, and I started (for the first time ever) my design process with mobile first concept, and it is shaping up to be AWESOME...

Mobile first, then design for things that can handle more.

I have a busy week ahead, but hope to do some testing, and play with the idea above of options for which sizes to enable, and have a full release of the new version out this week (if not, likely over next weekend)

Jake I checked out your site

mkmagu's picture

Jake I checked out your site on my tablet last night and the regular & mobile site look GREAT!!! The mobile is much easier to navigate than most of the other mobile sites that I've gone too. BTW this could not have come at a better time, I'm in the process of building a family site that I know most users will be using mobile phones to read it. I have Omega with Beta installed :)

Mary M.

well....

himerus's picture

Actually.... the version that is currently up on http://himerus.com is still the old version of Omega/Gamma, and not this newly enhanced version. I haven't had (and probably wont till next weekend) time to put up a live demo (or update my site) to use the new stuff... Wait till you see the mobile version when that happens.

In the current state, himerus.com works "okay" on GOOD mobile browsers (android/iphone) and tablets work pretty well in most cases I'd suppose. Since they all can render full on web pages quite well, most sites look "okay".

These new updates produce a "truly" mobile experience with a single column layout rather than any sidebars, etc. I'll have something at least for a quick 2 min demo at our next meetup. :)

Acquia Article

paranormals's picture

Hmmm.. thought I posted this last night but dont see it?

This is a great article from Acquia on the subject of responsive design.
http://acquia.com/blog/new-front-end-design-stack-role-responsive-web-de...

Options for theme settings

himerus's picture

I've been thinking over the past week on this topic, and the code that is already in the dev versions of Omega, Beta, and Gamma.

I LOVE it. First off, that's the most important, and yes, as demonstrated in Jesse's article on responsive design, it is pretty clear I'm about 90% of the way there. The only thing in that list of "must haves" that isn't implemented yet is any text scaling in the versions. And part of me feels that this should be left up to the subtheme, and NOT controlled by Omega.

I HAVE, however, decided that this new feature, and the sizes MUST be controlled by theme settings. And since I'm the king of theme settings, why not, right?!

The image below shows (not working yet) the options I plan to have available when you have chosen to enable the responsive grid in your subtheme. In NEW installs of Omega, this setting will be enabled by default, but for items without the setting declared, it will be marked as disabled, and the standard fixed/fluid width 960 grid option will be displayed instead.

Only local images are allowed.

The mobile option cannot be disabled, as at the core, Omega now supports a stacked layout for any device smaller than 740ish pixels. This simply negates the grid code, and sets everything to full width. In a subtheme, considerations must be made if you DO actually want some regions inline.

The 720px, 960px, and 1200px grids are all able to be enabled/disabled. (960gs is on by default), the 720 and 1200 are off by default.
While I DO love the 1200px grid, and it will look awesome in a 3 column (2 sidebar) layout, it looks quite stretched in a 1 sidebar layout, and I simply feel like there must be an option to enable/disable these sizes, and revert to ONLY having a 960gs AND mobile version available should a user choose to.

Lastly, the viewport setting, which will either modify (or not) the meta viewport tag that would tell smart phones NOT to scale the webpage. iPhone/Android (others??) do this by default when trying to render a page. This is what makes a page on android/iPhone devices look pretty decent out of the box.

But with a mobile layout, you "really" want this option to be disabled on the smartphone so that you are truly displaying your mobile version of a website.

Feedback welcome.

really impressed

jessebeach's picture

This is going to be the go-to theme for Drupal going forward - no doubt.

I agree 100%. This is awesome

jeppy64's picture

I agree 100%. This is awesome stuff!

Jay

Thanks

paranormals's picture

Thanks for the excellent article on Acquia. I dont think I have seen the "front end design stack" so clearly defined.

Mkay.... a conceptual question....

himerus's picture

Okay... I'm running across an impasse that I'm not sure how to handle... input needed (quickly)

Now, with the screenshot above, I'm attempting to break out all the grid CSS into preprocess, and have it all loaded appropriately, in order based on the settings. No biggie, right??

Well.... currently, the @media query is directly in the CSS like this:

@media all and (min-width: 1220px) and (min-device-width: 1220px) {
  /* Display the largest grid possible */
}

With that in CSS, it allows for (when dragging the size of the window) the page to scale when you shrink it... BUT... I can't respect the theme settings in Omega via this CSS file.

What I CAN do is load the CSS based on the CURRENT size of the window.... so, if it's a huge screen, load in the 1200px css and if you resize your window, the css wouldn't scale... and if your browser window was 1024px, and you refresh, you'd get the 960.css...

I'd like to see the original method retained, but not sure yet how to get past that at the moment... close to a solution though I'm sure.

What about writing out a

jessebeach's picture

What about writing out a <link>?

<link rel="stylesheet" type="text/css" media="all and (min-width: 1220px) and (min-device-width: 1220px)" href="" />

The sheet will only load when the media conditions are met.

@import in the stylesheet might work, too. Same difference to the <link> though.

I think....

himerus's picture

I think I now have a "solution"... just requires some adjustments to the @media queries...

It's all quite simple if ALL the grid sizes are on, but this giving users the ability to turn some off make the queries tricky. I should have something soon.

My goal is to get a version of this both committed, and up on a staging site so some eyes can get on it over the weekend.

The issue here is....

himerus's picture

I've got all the conditionals setup in the preprocess for respecting the theme settings.... and the media queries are inside the css files:

  • 720.css
  • 960.css
  • 1200.css

The issue is... if someone let's say has the following enabled:

  • mobile (locked, default)
  • 960.css
  • 1200.css

The media queries tell the browser that the 960 grid is ONLY good for a min-width of 980px (this includes the scroll bar, as if this is set to 960, there is horizontal scroll before it shifts).

So if a user resizes the browser window to anything less than 980px, the mobile style (no grid styles, regions stacked) takes effect again.
The same goes if you ONLY had the 1200px and mobile version enabled... anything less than 1220 for a browser window will render mobile only.

With all the sizes enabled, it works great, as expected.

So it's going to be HIGHLY recommended to leave the 720.css and 960.css enabled as otherwise, iPad (and probably most tablets) in portrait orientation will simply display the stacked default mobile version. The horizontal (landscape orientation) on my iPad renders the 960 appropriately as it is 1024 max-device-width.

Not sure another way around this without some crazy checks, and even more CSS files that overwrite even more.... I want to keep it as simplistic as possible to start, and let the feedback shape the way a "final" version is truly implemented.

Seems right. I can check over

jessebeach's picture

Seems right. I can check over the weekend after you check in.

Update on viewport settings

himerus's picture

After some thought, it needs to also be so a site admin can customize the viewport meta properties.

Only local images are allowed.

More information on the viewport meta tags can be found in Safari developer docs and Mozilla docs.

By default all the values (and with any GOOD mobile theme) should be 1.0 and the user-scalable should be unchecked. BUT... there might be reason to let a user decide that the do in fact want a user to still be able to zoom in some. With the user-scalable turned OFF, on my Android phone and iPad, I cannot zoom in using the pinch gesture. But with it turned on, I can zoom in just as much as my settings for min and max allow.

Looks good!

kristofo's picture

Looking really good! Is there any way that I can download or test this theme ?

Where to download...

himerus's picture

The current changes are only committed to the dev/master branches, and not tagged in an official release.
You can get the latest downloads from:

GitHub
* https://github.com/himerus/Omega - git clone git://github.com/himerus/Omega.git
* https://github.com/ThemeGeeks/Omega - git clone git://github.com/ThemeGeeks/Omega.git
Drupal.org
* http://drupal.org/project/omega - git clone --branch 7.x-2.x http://git.drupal.org/project/omega.git

I hope to have some more testing done on this, and simplify/enhance some of the feature options in theme settings and have an official version of this released in the next week or two.

lookin good man. that is a

zachattack's picture

lookin good man. that is a great idea adding the options for the viewport fields.

-- Zach (attack) Meyer

Sounds great

Dragorth's picture

This sounds great, and I see the need for a 700 size in the case of android phones that have res of 400X800, but I wonder if the 1200 size is the right one. This maybe naive, but if the next step up were, say, 1280, exactly 4 times the 320, it may be easier to manage the coding. You might also try a 640 res, instead of 720, to keep everything as multiples of 320, for the same reason. This would mean that you would be set up to expand to higher resolutions as multiples of 320, such as 1600, and later 1920. I seem to remember the originator of the 960 theme say that is why he chose 960, as it broke up so easily.

I also see a need to be able to turn off some sections if using the mobile template, one of the sideboards, in case it was an ad placement as I want to place ads in exact locations, not just randomly on the page. This may need to be handled in Delta, though I am not sure. This probably sounds like a lot more work, though.

I do use the 32 columns on a few sites, so may not be updating those for these sites. If you stick to the multiples of 320, you may be able to handle the 32 columns, and maybe even more. 64 columns on a 1920x1080 screen anyone? You can create sites that don't conform to any style, maybe psychedelic. Anyway, thanks for all the great work, and hope you take this as helpful thoughts, as that is how I mean them.

William

I agree....

himerus's picture

William,

I agree with your assessment. The "alternative" grid sizes, I kind of came up with based on my own screen sizes.

The 720px grid works well with the iPad in portrait viewing mode (and would work for old 800 resolutions, if anyone still has those)

the 1200px grid completely fills my screen on my 13" MBP (small resolution compared to "most")

We are currently discussing ways that the grids will be fully flexible and allow for generating your OWN sizing for any subtheme. So that maybe some defaults (narrow, normal, wide) will be provided by default, but easily extendible.

Glad it was helpful. I don't

Dragorth's picture

Glad it was helpful. I don't think it preclude you from doing multiples such as 2.5, which is 800, or the like. I don't personally have an iPad to test, so obviously you have a leg up. I see the great work that you have done already, and thought this might make your effort easier over the long haul.
This has some obvious benefits, but may allow for continuation for the long haul, even when we start seeing users using their 1080p televisions as a common computing display, as well as start packing more pixels into smartphones. I believe some android phones have 480x854, some of the tablets have 1024 size screens, and all of these devices are starting to come equipped with the ability to output through hdmi, even the new iPad 2, I believe.
So, your target of mobile is made more difficult as some of these will handle this natively, while others will simply stretch the image. I hope this helps to make that task easier, and will definitely tell my friends about your great work.

William.

This is exactly what I am

bmx269's picture

This is exactly what I am looking for in the next level of mobile theming. I do have on issue. On subthemes, the default stylesheet is subtheme.css, which doesn't have any @media info in it, so I am assuming that the stylesheets for the different media types must be added. Is this correct?

Are you using the version

Dragorth's picture

Are you using the version from drupal.org? I believe that the changes that he has made are in his personal git repository, and are considered alpha (not ready for prime time) quality. You can get it from here. Omega's Drupal Groups page list other resources that may be useful. That link is here.

I am using the github

bmx269's picture

I am using the github version. I would like to try this theme out. I have used media queries in a large project already, but not in a framework like Omega. I used a basetheme that was developed inhouse. I would like to use this one on a project as I like where it is heading. This is the reason to know how the css structure is to be to take advantage of the @media setup.

Add the following to the

bmx269's picture

Add the following to the subtheme.css AFTER the mobile defaults.

@media all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape) {
/* 720 grid css specific here */
}
@media all and (min-width: 980px) and (min-device-width: 980px), (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) {
/* 960 grid css specific here */
}

Screencast on Responsive Demo

himerus's picture

This screencast (http://himer.us/omega-3x-responsive) shows the 3.x version of Omega with the Responsive grid and some of it's basic features. This is the first of many items you can expect to see on the responsive grid, and designing for mobile first concepts.

I am testing the 3.x branch

bmx269's picture

I am testing the 3.x branch of Omega and still do not see the default css files to use for the multiple layouts included. I think this is a must. Documentation at least for the css to be themed should be included. Do you need help with this? I could help write documentation as long as I knew what the details are.

Here's how it works

himerus's picture

I have yet to add any default CSS files to accompany the narrow/normal/wide grids, but it is possible to define CSS in a way now in the .info that will let it be enabled with the responsive grids.

; OPTIONAL STYLESHEETS

css[seventwenty][name] = 720gs Styles
css[seventwenty][media] = responsive
css[seventwenty][file] = 720gs.css
css[seventwenty][description] = Stylesheet to accompany the 720 grid

css[ninesixty][name] = 960gs Styles
css[ninesixty][media] = responsive
css[ninesixty][file] = 960gs.css
css[ninesixty][description] = Stylesheet to accompany the 960 grid

css[twelvehundred][name] = 1200gs Styles
css[twelvehundred][media] = responsive
css[twelvehundred][file] = 1200gs.css
css[twelvehundred][description] = Stylesheet to accompany the 1200 grid

Setting the stylesheets up this way in the .info will list them under the optional styles section with each of the grid sizes to enable...

I've got this tested and working on a site I've upgraded (locally only) the key is the part about

css[NAME][media] = responsive

This tells the theme settings to display it with the responsive grid sizes, and not in the normal location to toggle css

Mind you, this is still all quite in flux, but this method seems to be working well to insert both the grid sizes for the responsive layout AND other stylesheet(s) that would need to correspond to the same media queries defined for the narrow/normal/wide grids.

I think the default

bmx269's picture

I think the default stylesheets for the default 4 sizes included should be created and commented as to what they are, as an option, a commented out .info item could be used to allow custom css for each media, this setting should not override the set stylesheets for the defaults.

Definitely...

himerus's picture

I agree completely...

I'm working right now on cleaning up some of the templates, getting back in some default HTML5 attributes into Omega core, and then will begin work on a first run starterkit, which WILL have these elements included by default. We're on the same page... it's just taking a bit of time to get it all in place.

We hope to have an official alpha release sometime this week/weekend. So far it is looking hawt if I do say so myself!

Have you seen this

Masonry is awesome...

himerus's picture

I've seen this one before... the problem with ALL of these things are that they take no account for a framework like Drupal... they are awesome for a one-off theme for a client, but impossible to put in a framework like Omega and have them work for every use case.

Same reason I even passed on the adapt.js, it works awesome, but A.) uses javascript and B.) doesn't fit the needs for configuration the responsive stuff in Omega needs (and has now).

The 3.x branch of Delta is

fubhy's picture

The 3.x branch of Delta is now available as Dev version! I just finished the code and didn't do too much testing but it should work! The best part is: It will work with EVERY theme out there. We no longer need to implement it on the theme layer, it just injects the Delta template settings into the normal theme settings!

http://drupal.org/project/delta
https://github.com/ThemeGeeks/Delta

Default Mobile CSS

bmx269's picture

I am looking for which stylesheet is for the default mobile theme on Omega 3.x? Thanks

I am using the omega-html5 starterkit of Omega. Forgot to mention that.

You are right... We need a

fubhy's picture

You are right... We need a default mobile.css in there (just like narrow.css, etc.). We will add that shortily

currently

himerus's picture

I didn't add (forgot) to add a default mobile stylesheet to the starterkits currently...

If you look at alpha.info you can see how the default mobile.css is loaded there, and replicate that in your subhteme.
It gives it negative weight to be loaded before anything else from the theme...

And remember since Omega is mobile-first now, the mobile.css is always loaded, and the defaults for everything that might need customizing on the mobile level. (hiding regions, logo, titles, etc.)

I'll update the starterkits (soon) to include a mobile CSS file by default as it does for the additional styles for narrow, normal, wide grids.

So basically, creating an

rwt's picture

So basically, creating a "THEME-alpha-default-mobile.css" file in the css path of your theme should work right ? Doesn't for me.

I think all you need is a

screeno's picture

I think all you need is a mobile.css file in your theme folder. That worked on the test site I've been playing with. Though I must add that the global, mobile, default naming scheme for the css files is more than a little confusing. Jake, maybe that could be cleared up is your next screencast. BTW - any time frame for that?

Gilbert

No, there is no

fubhy's picture

No, there is no "THEME-alpha-default-mobile.css". There is no layout named "mobile". You probably only have the layouts "narrow", "normal" and "wide". We are working with a mobile first approach here, so EVERYTHING is mobile if not defined otherwise. So "THEME-alpha-default-narrow.css" overrides the "global.css" file (which ships with your theme by default). So if you want to provide "mobile" css you would place it in the "global.css" file (or any other file that you include with your .info file) and then you can alter that css or override it completely in one of the layout specific CSS files.

Read this: http://groups.drupal.org/node/156719

View Switcher

Flash Gordon's picture

Hey first of all let me say that your work keeps on surpassing my expectations for what can be accomplished with a Drupal 7 site. THANKS A TON!!

Most recently I have been delving into the depths of omega/alpha/adaptive and really the possibilities are amazing. I'm using the custom css (normal, narrow, mobile) to create some layouts for the different views.

My question is this: Do you have a suggested method for implementing a view-switcher? For example, if I am using the adaptive theme with responsive grid activated, the iphone user will by default have the adaptive "mobile" view. What if the iphone user wants to view the adaptive "normal" layout (960px).

Is there any mechanism to give the mobile viewers an option to manually switch views from mobile to normal?

Once again, many many thanks for the outstanding work on omega960

Newby to the Omega Theme

stieglitz's picture

Great work again Jake. I am new to the 960 grid/Omega I've looked at it and used but never dug much deeper. It would seem to me the way to give the user the choice of displays you just make subthemes which is relatively painless in Omega. Enable permissions to switch themes and give it a nice gui. Maybe this is an oversimplification or maybe I don't understand the question but it does seem like an option.

There is NOT currently any

bmx269's picture

There is NOT currently any way to do this, maybe a JS could do this by adding a class to the body to allow a useragent type swtich, to use the IE default. hmm

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: