1 =========================================

     2 Refactoring the CSSs with UI properties

     3 =========================================

     4 

     5 Overview

     6 =========

     7 

     8 Managing styles progressively became difficult in CubicWeb. The

     9 introduction of uiprops is an attempt to fix this problem.

    10 

    11 The goal is to make it possible to use variables in our CSSs.

    12 

    13 These variables are defined or computed in the uiprops.py python file

    14 and inserted in the CSS using the Python string interpolation syntax.

    15 

    16 A quick example, put in ``uiprops.py``::

    17 

    18   defaultBgColor = '#eee'

    19 

    20 and in your css::

    21 

    22   body { background-color: %(defaultBgColor)s; }

    23 

    24 

    25 The good practices are:

    26 

    27 - define a variable in uiprops to avoid repetitions in the CSS

    28   (colors, borders, fonts, etc.)

    29 

    30 - define a variable in uiprops when you need to compute values

    31   (compute a color palette, etc.)

    32 

    33 The algorithm implemented in CubicWeb is the following:

    34 

    35 - read uiprops file while walk up the chain of cube dependencies: if

    36   cube myblog depends on cube comment, the variables defined in myblog

    37   will have precedence over the ones in comment

    38 

    39 - replace the %(varname)s in all the CSSs of all the cubes

    40 

    41 Keep in mind that the browser will then interpret the CSSs and apply

    42 the standard cascading mechanism.