2.1.7. Tips and tricks

Easier CSS debugging

By default, CSS files are cached and their imports are merged into a single CSS file at the server side. This reduces the number of HTTP requests from the browser to the server.

The optimization code is quite simple as all the CSS files are parsed at the server startup time and all the @import and url(...) references are rewritten to support a single flat file. The result is stored in a cache directly used from the ResourceRequestFilter.

Although the optimization is useful for production environments, it may be easier to deactivate this optimization while debugging stylesheets. To do so, set the java system property exo.product.developing to true.

For example, the property can be passed as a JVM parameter with the -D option when running GateIn.

sh $PLATFORM_JBOSS_HOME/bin/run.sh -Dexo.product.developing=true

Warning

This option may cause display bugs with certain browsers, such as Internet Explorer.

Some CSS techniques

It is recommended that you have some experiences with CSS before studying GateIn 3.5 CSS.

GateIn 3.5 relies heavily on CSS to create the layout and effects for the UI. Some common techniques for customizing GateIn 3.5 CSS are explained below.

Decorator pattern

The decorator is a pattern to create a contour or a curve around an area. To achieve this effect, you need to create 9 cells. The BODY is the central area for you to decorate. The other 8 cells are distributed around the BODY cell. You can use the width, height and background image properties to achieve any desired decoration effects.


<div class="Parent">

  <div class="TopLeft">

    <div class="TopRight">

      <div class="TopCenter"><span></span></div>

    </div>

  </div>

  <div class="CenterLeft">

    <div class="CenterRight">

      <div class="CenterCenter">BODY</div>

    </div>

  </div>

  <div class="BottomLeft">

    <div class="BottomRight">

      <div class="BottomCenter"><span></span></div>

    </div>

  <div>

</div>

Left margin left pattern
Left margin left pattern is a technique to create 2 blocks side by side. The left block has a fixed size and the right block will take the rest of the available space. When the user resizes the browser, the added or removed space will be taken from the right block.
```
<div class="Parent">

  <div style="float: left; width: 100px">

  </div>

  <div style="margin-left: 105px;">

  <div>

  <div style="clear: left"><span></span></div>

</div>
```