I prefer Zen's straight forward approach by just putting them in layouts/responsive-sidebars.scss. I agree that most of the time 3 breakpoints are fine, but depending on the complexity/design someone might want to use 4 or 5. Or a site might be straightforward to just need 2. Since SALSA is based off of Zen Grids it shouldn't be too hard to adapt. Having the extra layer of abstraction with [narrow] [narrower] etc to me doesn't seem worth the payoff.

This could be implemented by having a default desktop_first.scss and mobile_first.scss w/ some default values and having them at the top of subtheme.scss with one commented out.

I'd also honestly just keep all the "grid settings" stuff in the file - you have to pass values to all the declarations, so why not just edit them there and keep things centralized?

Obviously this is out of the scope for 2.x, but since upgrade paths for 3.x are a little fragile anyways it seems like a sound architectural decision to me.

Comments

erutan’s picture

erutan commented
Title: take media breakpoints out of the theme UI :) » take media breakpoints / grid settings out of the theme UI :)

this would also solve/mitigate http://drupal.org/node/1791600#comment-6532964

tsi’s picture

tsi commented

The path I'm aiming at is:
a. keeping all the [tokens] -> $variable conversion happen in one place, wrapped with some kind of an @if statement that will not validate when compiling "manually".
b. add a _settings.scss partial that will be able to override all of them.

This way, we solve the problem of compiling with compass watch caused by Sasson's tokens, and we allow people to define everything via code if they prefer.

It's not exactly what you're suggesting, and it does has a downside that when values are overridden via code we don't have anyway of showing that in the UI, but I believe (hope) many people use the UI for this kind of things and would like it to stay available.

I should take a look at zen's implementation though.

BTW - Salsa is not based off of Zen Grids, it's inspired by them (and Susy, and many others) ;)

tsi’s picture

tsi commented

After playing around with this, I can conclude that a. is not going to be easy.
Giving up the whole "Sasson tokens" concept and putting all of these in .scss only - no theme settings at all for layout dimentions, for @media break-points etc. (apart from being more simple to implement, and maybe even more performant) is going to make compiling "manually" with compass watch (instead of Sasson/Assetic compiler) much more simple.
Nothing new, just saying that out loud.
Tempting.

Don't you think people will miss those simple layout settings ?

tsi’s picture

tsi commented

Done!

Next step - figure out what will it take to be able to compile with compass watch or Assetic interchangeably

erutan’s picture

erutan commented

Sorry for dropping away for a bit!

#2 - the two seemed similar in approach so I made that connection in my head. inspired it is!

#3-4 good to hear, I do think that it makes things cleaner overall. I haven't installed 3.x (just taken a glance at the theme files) but it l might have some comments on how I'd deal with media queries in a bit. I'll also try and contribute some patches finally for some starterkit tweaks. :)

tsi’s picture

tsi commented
Status: Closed (fixed) » Fixed

Great.
Last update about this issue - the API for "Sasson tokens" (replacing values in you style sheets via PHP) is still still in place, it should be documented better but ATM you can find all the info in /includes/sasson.api.php. The change is that files don't go by default through hook_sasson_alter(), only if 'sasson_alter' == true.

[EDIT] hook_sasson_alter was removed for better performance while developing.

Status: Active » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.