| How to maintain css theme files (best practice?) [message #695418] |
Mon, 11 July 2011 13:25  |
Eclipse User |
|
|
|
Hello RAP community.
If you try to define your own theme based on css, so you will realize that this task can be complicated: because CSS (and its interpreter in RAP) does not support variables and reuse (I know, its named CASCADING style sheets, not object oriented:).
Fortunately, there are projects such LESS (http://lesscss.org/), Less for Java (LESS for Java) and Ant. With it, it's possible to make more order in your css files and it helps to make it more maintainable: with LESS-variables you can make definitions like colors and fonts only in one place and reuse it on hundreds places in RAP css theme.
Example:
/*@textStandardColor: #222222;*/
@textStandardColor: #222222;
/*Background color definitions*/
/*@backgroundStandardColor: #ffffff;*/
@backgroundStandardColor: #ffffff;
List,Tree,Table,Text,Spinner,Combo,DateTime {
color: @textStandardColor;
background-color: @backgroundStandardColor;
}
will be transformed into:
/*@textStandardColor: #222222;*/
/*Background color definitions*/
/*@backgroundStandardColor: #ffffff;*/
List,Tree,Table,Text,Spinner,Combo,DateTime {
color: #222222;
background-color: #ffffff;
}
Unfortunately Less Engine has no Ant task, so I created my own. In Attachment you can find an example, how to use it: simply run the build.xml.
Best regards,
Nikolai
|
|
|
| Re: How to maintain css theme files (best practice?) [message #886249 is a reply to message #695418] |
Thu, 14 June 2012 10:43  |
| Eclipse User |
|
|
|
Hi Nikolai
That was a great idea. I refactored all our css to less which gives me also the possibility to break my huge css into smaller entities and make @import directives.
I had to make a small patch to the newest less.js (1.3) which I'll contribute to less (github). Less had problems with style names with an underscore (i.e. SHADOW_IN).
So long and best regards
Stephan
|
|
|
Powered by
FUDForum. Page generated in 0.04407 seconds
Home