SCSS

The jeesl responsive styling provides several options to set within an scss file for a context.

There are two kinds of settings, variable and static ones. Variable settings overwrite the default value of an scss-variable, which is then used in the responsive design; these must be called before the import of the _responsive.scss. Static settings overwrite a value after usage in the responsive design and must be called after the import.

Variable settings:

• colour: the setColours(...) mixin can be called to change the default green colour theme. It takes five arguments ranging from brighter to darker colour. The three middle arguments, 2nd for light, 3rd for medium, 4th for dark, are the colours commonly used in the colour schemes, whereas the 1st for brighter and 5th for darker tones are only used for highlighting and separators within the status bar, with whose background the regular three colours would not contrast well with.
• width: the setContainerWidth(...) mixin can be called to define the content container's width and within which range it will expand. it takes two arguments, a mandatory 1st one to se the maximum width up to which the container will expand. The optional 2nd argument must be larger than the 1st one and can be used to set an upper width, from which on the container will start expanding again, which may be used to set wide containers for graph and map heavy projects.
• simplicity: the simplifyHeader() mixin can be used to display panel and table headers in a less accentuated style, without a coloured underline and losing a slight shine.

Static settings:

• background: the setBackground(...) mixin can be used ot set an alternative background image. It takes one argument, a local URL to a background image, e.g. "/lis/javax.faces.resource/background.png.jsf?ln=gfx&buildVersion=1643197112" (quotes included).