Details

    • Type: Improvement Improvement
    • Status: Patch Available
    • Priority: Major Major
    • Resolution: Unresolved
    • Affects Version/s: 1.0.2-core
    • Fix Version/s: None
    • Component/s: Skinning
    • Labels:
      None

      Description

      Working in my Google Summer of Code, I have found that It would be cool, when you define a css skin file that you can do something like this:

      @constants {
      greencolor: #97f099;
      f90color : #f90;
      }

      .AFPanelNavigationHorizontal ul li.off a:hover, .AFPanelNavigationHorizontal ul li:hover a, .AFPanelNavigationHorizontal ul li.over a {
      background: greencolor;
      color: f90color;
      }

      Like in server side CSS in PHP.

      I have created a patch that adds this feature. With this, yo can define local constants variables in a .css file that is used as trinidad skin file.
      (If you define a constant in a base skin, the extended skins don't see it). It's a simple but powerful idea.

      Suggestion for improvements of this topic are welcome.

        Activity

        Hide
        Jeanne Waldman added a comment -

        We have this feature with aliases. And it seems that aliases are more useful, because you can have more than one css property per alias.

        .AFDefaultFont:alias

        { -tr-rule-ref: selector(".AFFontFamily:alias"); font-size: 11px; }

        af|inputText::content

        { -tr-rule-ref: selector(".AFDefaultFont:alias"); }
        Show
        Jeanne Waldman added a comment - We have this feature with aliases. And it seems that aliases are more useful, because you can have more than one css property per alias. .AFDefaultFont:alias { -tr-rule-ref: selector(".AFFontFamily:alias"); font-size: 11px; } af|inputText::content { -tr-rule-ref: selector(".AFDefaultFont:alias"); }
        Hide
        Leonardo Uribe added a comment -

        Yes, I has noted before that this is true. But the aliases has its drawback. For example:

        @constants

        { greencolor: #97f099; f90color : #f90; }

        /..... ..../

        .AFPanelNavigationHorizontal ul li.on ul

        { display: block; background: f90color; }

        .AFPanelNavigationHorizontal ul li.on:hover ul, .AFPanelNavigationHorizontal ul li.over ul

        { /*for ie*/ background: greencolor; }

        .AFPanelNavigationHorizontal ul li a

        { color: #B510D; font-weight: bold; display: block; padding: 5; }

        .AFPanelNavigationHorizontal ul li.on a

        { color: #fff; background: f90color; }

        .AFPanelNavigationHorizontal ul li.on ul a, .AFPanelNavigationHorizontal ul li.off ul a

        { float: left; /*ie doesn't inherit the float*/ border: 0; color: f90color; width: auto; }

        Please note that in this case, the constant f90color are used in the following properties:

        color
        background

        The example was adapted from the css file of the examples of tomahawk component called panelNavigation.

        Theorically, you have to define 4 alias classes to do the same or do not use it at all. The practical problem is if I want to
        change the color theme of a skin, I have to change on its 4 alias selectors or in all the css file. I feel that constants are more
        clear and easy to understand than use aliases, but this is my particular opinion.

        But thinking more from other point of view, maybe the only example that this is true and it has a practical value is with color properties.
        The other scenarios of need to group properties could be done with aliases. =|

        Anyway, thanks for your efford and guide illustrating that point of view.

        Show
        Leonardo Uribe added a comment - Yes, I has noted before that this is true. But the aliases has its drawback. For example: @constants { greencolor: #97f099; f90color : #f90; } / ..... .... / .AFPanelNavigationHorizontal ul li.on ul { display: block; background: f90color; } .AFPanelNavigationHorizontal ul li.on:hover ul, .AFPanelNavigationHorizontal ul li.over ul { /*for ie*/ background: greencolor; } .AFPanelNavigationHorizontal ul li a { color: #B510D; font-weight: bold; display: block; padding: 5; } .AFPanelNavigationHorizontal ul li.on a { color: #fff; background: f90color; } .AFPanelNavigationHorizontal ul li.on ul a, .AFPanelNavigationHorizontal ul li.off ul a { float: left; /*ie doesn't inherit the float*/ border: 0; color: f90color; width: auto; } Please note that in this case, the constant f90color are used in the following properties: color background The example was adapted from the css file of the examples of tomahawk component called panelNavigation. Theorically, you have to define 4 alias classes to do the same or do not use it at all. The practical problem is if I want to change the color theme of a skin, I have to change on its 4 alias selectors or in all the css file. I feel that constants are more clear and easy to understand than use aliases, but this is my particular opinion. But thinking more from other point of view, maybe the only example that this is true and it has a practical value is with color properties. The other scenarios of need to group properties could be done with aliases. =| Anyway, thanks for your efford and guide illustrating that point of view.
        Hide
        Martin Marinschek added a comment -

        Hi,

        I also think these constants might be useful for other stuff where margins, borders, widths and heights of some components are the same - but with different property names.

        E.g. the height of one component might be the margin of another component.

        Does that make sense as an additional use-case to the color use-case?

        regards,

        Martin

        Show
        Martin Marinschek added a comment - Hi, I also think these constants might be useful for other stuff where margins, borders, widths and heights of some components are the same - but with different property names. E.g. the height of one component might be the margin of another component. Does that make sense as an additional use-case to the color use-case? regards, Martin
        Hide
        Andrew Robinson added a comment -

        Isn't this what aliases are for and then using -tr-rule-ref to import them?

        Show
        Andrew Robinson added a comment - Isn't this what aliases are for and then using -tr-rule-ref to import them?
        Hide
        Andrew Robinson added a comment -

        If this were implemented as in the patch, I personally would prefer to see a more obvious way to note that the value is a constant (some syntax like $

        {constant.name}

        )

        Show
        Andrew Robinson added a comment - If this were implemented as in the patch, I personally would prefer to see a more obvious way to note that the value is a constant (some syntax like $ {constant.name} )

          People

          • Assignee:
            Unassigned
            Reporter:
            Leonardo Uribe
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:

              Development