Breakpoint, Panels and No Query Fallbacks [#2172785]

I'm confused by how breakpoints, no query files, and panels all work together. I keep looking at this documentation on github, but I don't quite get it yet, and hoping someone can help.

In my theme, I have a PAGE layout, with code such as:

@include breakpoint($desk, true) {

and that seems to work as a responsive layout across the board, and render OK in IE8. Am I correct in assuming the "true" that follows a breakpoint variable is what makes it render in IE8 properly? That and the corresponding "no-query" scss file?

Inside my custom PAGE layouts, I also have a PANELS layout, with their own breakpoints for elements.

If I have a series of breakpoints in my layouts, such as:
@include breakpoint($tab)

It renders as I'd expect, except in IE8, which only shows the site in my 'mobile' view (no sidebars, etc.).

If I change my breakpoints as follows, my site is no longer responsive? (sidebars always show at any width)
@include breakpoint($tab, true)

Does this ring a bell with anyone? I hope it's not too obscure a question.

Comments

Comment #1

minneapolisdan CreditAttribution: minneapolisdan commented 13 January 2014 at 20:07

In each of my custom PANELS layout files, I created a "no-query" file, following the same conventions as my PAGE layouts. For example, "customPanel.layout.scss" would exist and I also make a "customPanel.no-query.layout.scss" file, with the following code.

$breakpoint-no-queries: true;
$breakpoint-no-query-fallbacks: true;

// Re import everything  but without media queries.
@import "customPanel.layout";

Comment #2

msmithcti CreditAttribution: msmithcti commented 20 January 2014 at 07:00

Status:

Active

» Fixed

Your assumptions are correct, however I think your expectations aren't:

It renders as I'd expect, except in IE8, which only shows the site in my 'mobile' view (no sidebars, etc.). If I change my breakpoints as follows, my site is no longer responsive?

In the first case, breakpoint isn't printing any of the CSS that is wrapped in a media queries, if you are writing your styles mobile first then you will only see the mobile styles. In the second case, the CSS within breakpoints with the second argument set to "true" will be printed so you see the sidebars etc. In neither case will the site be responsive in IE8 as IE8 and below do not support media queries, unless you use something like respond.js, which I wouldn't reccomend (no query fallbacks are the suggested method in Omega).

Comment #3

minneapolisdan CreditAttribution: minneapolisdan commented 20 January 2014 at 16:19

Thanks for the response. I do know that IE8 is not responsive, and I also would not use respond.js.

In case this helps or makes any sense, I've narrowed this down to a question of Page Layout vs my custom Panels Layouts.

On all Sass relating to my custom Page Layouts, I add the "True" after my breakpoint, and it works across the board. e.g.:
@include breakpoint($desk, true)

On all my custom Panels Layouts, which render INSIDE my custom Page Layout, I only want to code as follows (no "true" following breakpoint)

@include breakpoint($desk)

Then I've had to write some IE8-specific layout rules to get a proper layout on Panels-related layouts.