Source Files

Overview

To make development easier, CSS files are authored in a conditional logic source format that is processed with regular expressions. Sometimes, it is easier to edit the source format and re-generate the CSS output than it is to edit the final output directly. If your product provides CSS in the source format, you will find the source files as well as the Apache Ant build scripts necessary to do the transformation in a folder usually named csssrc. (Check your product documentation to determine the exact location and if the source format is provided or not.) In addition to the standard Ant tasks, the build scripts necessary to do the transformation requires the Apache ant-contrib tasks.

Here is an example illustrating our source format:

/*This CSS was built on @BUILDDATE@. (version: @BUILDNUMBER@)*/
[core]
.lotusExampleStyle {
	padding:[ltr]12px 12px 12px 20px[/ltr][rtl]12px 20px 12px 12px[/rtl];
}
[/core]

[theme=@ALLTHEMES@]
.lotusExampleStyle {
	color:@THEME_TEXT_COLOR@;
	background-position:@LEFT@ bottom;
	background-repeat:repeat-x;
	background-image:url(@IMAGESROOT@/exampleBackground.gif)
}
[/theme]
/*#include "foo/anotherExampleFile.css" */

Keywords

Keywords are replaced with a value at build time and are denoted by @ characters. The following keywords are defined by the build script:

BUILDDATE: The date on which the build was run
BUILDNUMBER: An identifier unique to each build used for support purposes
LEFT: The string "left" in left-to-right languages. The string "right" in right-to-left languages.
RIGHT: The string "right" in left-to-right languages. The string "left" in right-to-left languages.
IMAGESROOT: The path to a folder containing images shared across all themes. This is dynamically generated on a per-directory basis so it has the proper number of ".." path components relative to the file in which the subsitution is made.
THEMEIMAGESROOT: The path to a folder containing images that are specific to the current theme. This is dynamically generated on a per-directory basis so it has the proper number of ".." path components relative to the file in which the subsitution is made.
NAMESPACECLASS: The string "lotusui" + version used as a namespace class for all style definitions. This allows multiple versions of the ICS UI to be used on the same page.
DOJONAMESPACECLASS: The NAMESPACECLASS string + "dojo" used as a namespace class for all Dojo theme style definitions. This allows multiple versions of the Dojo theme to be used on the same page.

Additional keywords are defined in css.properties such as:

ALLTHEMES: A list of all themes created during a build
GEN2: A list of second generation themes.
GEN3: A list of third generation themes. These are the latest themes available including the current default theme.

Color keywords are defined in various copies of theme.properties for each theme. Keywords in these files define colors such as THEME_TEXT_COLOR

Conditionals

Surround content with:

[ltr]...[/ltr]

to output the content only in left-to-right language CSS files.

[rtl]...[/rtl]

to output the content only in right-to-left language CSS files.

[core]...[/core]

to output the content only in core CSS files.

[expand:nlvhfa]...[/expand]

to repeat the content into the output using one or more pseudo-classes: n = normal (without any pseudo-class), l = link, v = visited, h = hover, f = focus, and a = active. Order of the characters after the colon is not important. The output will always use the order: normal, link, visited, hover, focus, active.

Example:

[expand:nvh].foo[/expand]{color: #fff;}

would expand to:

.foo, .foo:visited, .foo:hover{color: #fff;}

[highcontrast]...[/highcontrast]

to repeat the content into the output in such a way that the version marker class can be supported on both the body tag or on an island element. @NAMESPACEHC@ is replaced with the appropriate version marker class / high contrast class ordering.

Example:

[highcontrast].lotusui_ie @NAMESPACEHC@ .lotusFoo[/highcontrast] { color: #fff; }

would expand to:

.lotusui_ie .lotusui30.lotusImagesOff .lotusFoo, .lotusui_ie .lotusImagesOff .lotusui30 .lotusFoo {color: #fff;}

[theme=@ALLTHEMES@]...[/theme]

to output the content in all theme files.

[theme=@GEN2@]...[/theme]

to output the content in all generation 2 theme files.

[theme=@GEN3@]...[/theme]

to output the content in all generation 3 theme files. These are the latest themes available including our default theme.

Includes

Files can be included inside each other at build time using the /*#include "filename.css" */ syntax. This is an alternative to the CSS @import syntax that causes additional HTTP requests at runtime.