jescalan / rupture

Simple media queries in stylus

Home Page:http://jescalan.github.io/rupture

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vertical scale

Coobaha opened this issue · comments

Hey!

I think, we can also have vertical scale for height query.

and then we can somehow mix them, like

from X-axis scale and to Y-axis scale 
  {block}

and will produce (min-width: Xpx) and (max-height: Ypx)

@Jenius , @declandewet what do you think?

I don't think mixing them like that would work - I've never seen any means of mixing mixins together like that other than creating a new mixin - could you elaborate a little more? I do like the idea of vertical scales.

I mean create mixin that will accept x scale and y scale
for example +both(toX:2, toY:4) or +both(betweenX:2 4, atY:3)

anyway it is very rare case.

And it will be simpler just to nest them if we need both scales:

+to(2)
  +atY(3)
     {do something when width is 2 and height is 3}

hmm... I think we'd need to get @Jenius' opinion on syntax here first

btw with stylus @media and then scale mixin - got what i want

.selector
  @media (min-height: 1101px)
    +from(3) 
      {block}

produces

@media only screen and (min-height: 1101px) and (min-width: 601px) {
  .selector  {
    {block}
  }
}

busy a bit with work, will try later to implement Y-axis scale and make it nestable

Is there any potential use case for this? Maybe I'm just using media queries in too simple a manner, but this seems overly complex to me...

Well i got cases today, i have sections that can't be more then 100% height of the screen.. and they got oveflowed by content at some points.

i agree that this is rare case, and stylus @media in my example is enough.
should i close then?

Yeah, I think maybe we should close for now, and if it comes up a second time from you or anyone else, we'll take a crack at implementing it. Does that seem reasonable?