Media Query Mixin #94
Conversation
| * 2. @include mq( $max: 300px ) { } (max-width) | ||
| * 3. @include mq( 400px, 800px ) { } (both min + max-width) | ||
| */ | ||
| $media-queries: true; |
There was a problem hiding this comment.
These variables should probably go into a separate files for themeroller use.
There was a problem hiding this comment.
I think the location of variable files will change based on jsass-vars #89 PR. But they will certainly be in a separate file
|
@arschmitz and @MichaelArestad, Please review when you have a chance |
| /* Content printed with no media query for desktop project */ | ||
| @content; | ||
| } | ||
| @else if $desktop-styles == false and $min == null { |
There was a problem hiding this comment.
so say we have a max value passed and $desktop-styles is set to true? nothing happens ? So queries without a max value are considered as desktop styles if I am not wrong?
We could pass a third parameter to specify that explicitly maybe?
There was a problem hiding this comment.
Yes the idea behind the $desktop-styles variable is to only be used if $media-queries is set to false. This way the code knows if it should print out styles based on styles targeted to large screens vs small screens.
As for a third parameter I'm having a hard time imagining what that would be. I imagine the goal of the third parameter is to ensure the user is getting all the styles they need. When writing the code initially I was thinking the lowest size screen styles would be "mobile" while highest would be "desktop" but I can see a point where that might not be the case. While pondering this question it did make me think of an idea (sorry if this is what you were saying and I totally misunderstood) maybe we should remove the $desktop-style variable and replace it with a variable called $app-size (or something like that) that takes a pixel size that defines the screen size the user wishes to support without media queries.
For example if I was making an iPad app I would pass 1024px to the variable (iPad landscape). Then when styles are evaluated through the mixin we could check if the min/max width fits the size to determine if it should be printed or not.
Please let me know if this didn't address your question but I do really like this idea and if others are on board with it I will add it to the mixin. Thanks for reviewing!
There was a problem hiding this comment.
My issue was what you guessed, instead of assuming based on the presence of min or max, we could let the developer specify it somehow,and the solution you mentioned saves the developer pains to add a third param and think about it, plus gives us the control. That is a good idea. Let two vars specify min and max size of the app itself if its not responsive. Any styles that don't fit in can be totally ignored by your mixin. 👍 to that.!! @sfrisk what do you think of @kristyjy's idea. ?
|
That looks really good, 👍 |
|
While this was done very well, after further discussion in the meeting last week, we decided to go with the approach in #106 |
This mixin supports only min/max width rules. I wasn't sure if we wanted to support more types such as min/max height, min/max resolution etc. but I thought this was the best way to get feedback.