tolo / InterfaCSS

The CSS-inspired styling and layout framework for iOS
MIT License
96 stars 10 forks source link

pseudo classes #18

Closed tbrannam closed 9 years ago

tbrannam commented 9 years ago

I'd propose supporting pseudo classes that allow styling on device form factor. as a minimum "phone". "tablet" -

I could see perhaps following the pattern of size-classes instead (width-compact, width-any, width-regular, height-compact, height-any, height-regular)?

It might also be helpful if the Pseudo Class Parse supported multiple Pseudo Classes in a style definition - or is there another way to express this already?

.simple:phone:landscape{
    backgroundColor: red;
}

.simple:phone:portrait{
    backgroundColor: blue;
}

.simple:tablet:portrait{
    backgroundColor: pink;
}
.simple:tablet:landscape{
    backgroundColor: green;
}
tolo commented 9 years ago

Yes, using pseudo classes for size classes, or actually trait collections, is an idea I'm toying around with.

I haven't decided if I'm gonna go with chained or parameterized pseudo classes yet, although I'm leaning towards the latter. That would look something like this:

.simple:traits(anyWidth, regularHeight) {
    backgroundColor: red;
}

But I'm not ruling out the inclusion of a simpler device idiom pseudo class (with the possibility of chaining with interface orientation pseudo class) on top of this. I'm going to experiment a bit more and see what I come up with.

tbrannam commented 9 years ago

Adding multiple Pseudoclass support came just in time. Thanks!

tolo commented 9 years ago

Glad to hear it! :)