Hi,
I'm using responsive layout with the 960 grid. It works as expected when setting my beakpoints and grid dimensions in pixels.
I'd like to use em unit instead of px. It appears Sasson doesn't pickup the ems beakpoints.
So my questions is, how can I use em units with the 960 grid in a responsive layout with breakpoints set in em?
Thanks you.

Comments

tsi’s picture

tsi commented
Status: Active » Postponed (maintainer needs more info)

I'm not sure I follow, what are you doing ? what do you get ? what did you expect to get ?
I can, say, put 70em in my theme settings form under 'Responsive Layout Settings' -> 'Desktop first' -> 'Narrow width' and get in my compiled CSS :
@media (max-width: 70em) {...
So this seems to work as designed, please explain what is wrong.

jlbretton’s picture

jlbretton commented

Sorry not to be clear.
Yes my setup is similar to what you've descibed.
Here is how I setup the layout in my sub-theme through the Sasson UI with responsive enable and desktop first:

Grid dimension 62.222em
Gutter 20px = 1.111em
12 colums
Narrow width = 62.222em
Narrower width = 53.333em
Narrowest width = 42.611em

In my scss I also call.
@import "960/grid";
@media only screen and (max-width: 62.222em) { /* 960px*/
... }
and
@media only screen and (max-width: 53.333em) { /* 767px*/
... }

I don't get any errors but it's not responsive it only display the base grid dimensions 62.222em
If I do the setup in px in the UI and in the scss, it works as expected.

thank you.

tsi’s picture

tsi commented

I still don't understand what do you mean by "it's not responsive" ? media queries don't apply ? it would help if I could take a look at the site online.
Note that, if you're writing you're media queries this way, than you're simply writing standard CSS, nothing to do with Sasson.
If you want to use the values from Sasson's theme settings you can use tokens like [grid-width] or [narrower]. but first we should understand what is wrong with the simple media query the way you wrote it.

ATM the only thing I can suggest is removing the only keyword as it is not really needed -

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

http://www.w3.org/TR/css3-mediaqueries/#media0

jlbretton’s picture

jlbretton commented

Thanks for the tips.

Unfortunately I can't show you yet the online site.
Further investigations. What happend is the generate media queries are wrongly formated when you use fractions in your em queries.

Exemple setting Narrower width at 53em
The generate css file is correct it contains:
@media screen and (max-width: 53em) {...

but if you add a decimal like 53.3em
The generate css file is wrong. Missing closing parentesi, unit and decimal.
@media screen and (max-width: 53 {...

saas seems to have some trouble parsing fractional units.
Note:I'm using the sasson embed sass library

tsi’s picture

tsi commented
Component: Miscellaneous » Phamlp
Status: Postponed (maintainer needs more info) » Postponed

I see, thanks for the info.
Unfortunately, bugs with the php compiler is probably not something we will have time to work on anytime soon, because most of the efforts are going into the v3.x branch which uses the original ruby-compass.
Any help with this will be most appreciated.
This might also be related to #1825006: Phamlp can't get arguments as @media queries values

jlbretton’s picture

jlbretton commented
Status: Postponed » Closed (won't fix)

Thanks for your feedback. Yes it make sense.
Great work.