naldikt / NXSS

NX Style Sheet - customize your UI using CSS-like files & conventions.
1 stars 0 forks source link

Size Classes Support #25

Open naldikt opened 8 years ago

naldikt commented 8 years ago

There’s a need to support size classes in the nxss class declaration.

• We’d like to support alternative declarations given specific traits i.e. Any, Compact, Regular. • Whenever device orientation changed, we'll need to auto-update the uiview element

Changes to NXSS syntax

Support simple @media query similar to what specified here: https://davidwalsh.name/device-state-detection-css-media-queries-javascript

Example:

label-home-title {
    font-size: 10px;
}

/**  The value of "sizeClass" is (horizontal,vertical) 
  with options:  a = any , c = compact , r = regular **/
@media sizeClass:(c,r) {
    label-home-title {
        font-size: 13px;
    }
}

We're adding a new header "@media" which supports "sizeClass" property with value specifying the trait's size class "(horizontal,vertical)". The possible values are a=any, c=compact, r=regular

Changes to NXSS Interface

NXSS.getStyleDeclarations( selector , selectorType , pseudoClass ) will need to change to support more attributes.

Proposed to create a new query class to be used instead of passing more arguments

class Query {
  let selector : String
  let selectorType : SelectorType
  let pseudoClass : PseudoClass
  let sizeClass : SizeClass
}

Return type will have to change from just "Declarations" to include whether the resulting return is an exact or closest match.

naldikt commented 8 years ago

Adam agreed on syntax. The issue's interpretation i.e. if you're on C,R what happens if A,A C,A A,R are defined What we came up with: • We're going to coalesce different available size classes and decide on prioritization (the tricky part is if you are C,C and C,A A,C are available). • Up to the user to define full ruleset or take advantage of the coalescer