I've been toying with committing a different way to go about doing it (I'm not sure it makes sense to have all the imports for each type of responsive theme as some people will do breakpoints where they feel they absolutely need them, others will do one for every major device breakpoint, etc) not to mention retina/non-retina for the same viewport size due to asset loading (though basic layout would be the same). I also hit some oddness with the grid system using the default 480px breakpoint w/ desktop-first, but I'll look into that on my own.

I was building my own @mixin then decided to google and found http://paranoida.github.com/sass-mediaqueries/

I'm just going to make a desktop-first.scss and mobile-first.scss using @mixins people can easily copy and send different args to. They can be split into different scss files to be imported later, this is just a little cleaner for me to work with.

This would also have the nice side effect of bypassing the current settings.php import bug. :p

Comments

erutan’s picture

erutan commented
Title: Change repsonsive theming (media queries) » Change responsive theming (media queries)
erutan’s picture

erutan commented

I came across http://breakpoint-sass.com/.

tsi’s picture

tsi commented

You know you could copy the whole 'layout' directory into your sub-theme and hack it's partials as much as you want, right? Sasson will pick those changes and apply them to it's layout. firstfirstI made it this way so you have full control over Sasson's out-of-the-box layout, this way you are altering the base-theme CSS and NOT overriding it with extra CSS.

What are the benefits of these plug-ins? I don't really see how they are better then the plain CSS3 media-queries and the out-of-the-box nested media queries that comes with Sass for free.

erutan’s picture

erutan commented

The first isn't that useful for targeting aside from targeting specificish iOS devices, which seems like a waste. The second has some handy mixins for portrait vs landscape, monochrome, pixel density etc that actually provide value. In terms of looking to contribute back it's not the best idea as they'd need to be locally bundled since we're not compiling off of a config.rb, but as is I have to edit every partial in /layout/foo-first/ and remove the breakpoint variables in them as settings.scss isn't being processed properly (I've tried moving it around in my subtheme, assetic is finding it in the default location but for whatever reason foo-first.scss isn't loading it before being compiled).

I copied the layout directory, but I figured if I'm going to edit the entire layout directory I might as well play around with it a bit (yes, using a resp.scss ontop of fixed.scss like I did earlier was kind of stupid). I switched from that to a copy of desktop-first.scss and am tweaking it to suit my own needs. I simplified things a bit by doing away with settings > x-first > partials as it appears there's something with theme logic or assetic messing with the load order (now that I know I'm not the only one whose settings.scss isn't getting imported into x-first.scss before it compiles) - since it seems like troubleshooting that issue isn't a priority I figured I'd just go around it. :) atm I'm using the dev3 branch on a low priority side project, so I've been trying to kick the tires before just working around issues.

I've found two layout bugs in the theme/salsa and will post once I dig in a bit.

erutan’s picture

erutan commented
Status: Active » Closed (works as designed)

this isn't really as important, I'll just patch a few things about the way it currently works soon.

erutan’s picture

erutan commented
Issue summary: View changes

clarify