Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Remote Application Platform (RAP) » How to maintain css theme files (best practice?)
How to maintain css theme files (best practice?) [message #695418] Mon, 11 July 2011 17:25 Go to next message
Nikolai Raitsev is currently offline Nikolai RaitsevFriend
Messages: 102
Registered: July 2009
Senior Member
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 14:43 Go to previous message
Stephan Leicht Vogt is currently offline Stephan Leicht VogtFriend
Messages: 102
Registered: February 2010
Location: Baden Switzerland
Senior Member

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
Previous Topic:Articles about "Create a WAR from RAP Application with Libra WAR Product"
Next Topic:How to read a external file after deployment?
Goto Forum:
  


Current Time: Sun Dec 21 13:01:17 GMT 2014

Powered by FUDForum. Page generated in 0.10493 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software