doc/refactoring-the-css-with-uiprops.rst
author Julien Cristau <julien.cristau@logilab.fr>
Mon, 18 May 2015 16:44:49 +0200
changeset 10439 45e18b4a7466
parent 10121 23af005426bf
permissions -rw-r--r--
[devtools] change the way we start/stop postgresql Instead of having the test db handler start a cluster on demand, use the test module's setUp/tearDown callbacks to do it. This allows to have one data directory (and thus cluster) per test module, allowing different test modules to run in parallel, each using its own database cluster whose path is based on the test module.
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
5482
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     1
=========================================
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     2
Refactoring the CSSs with UI properties
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     3
=========================================
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     4
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     5
Overview
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     6
=========
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     7
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     8
Managing styles progressively became difficult in CubicWeb. The
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
     9
introduction of uiprops is an attempt to fix this problem.
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    10
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    11
The goal is to make it possible to use variables in our CSSs.
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    12
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    13
These variables are defined or computed in the uiprops.py python file
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    14
and inserted in the CSS using the Python string interpolation syntax.
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    15
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    16
A quick example, put in ``uiprops.py``::
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    17
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    18
  defaultBgColor = '#eee'
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    19
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    20
and in your css::
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    21
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    22
  body { background-color: %(defaultBgColor)s; }
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    23
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    24
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    25
The good practices are:
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    26
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    27
- define a variable in uiprops to avoid repetitions in the CSS
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    28
  (colors, borders, fonts, etc.)
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    29
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    30
- define a variable in uiprops when you need to compute values
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    31
  (compute a color palette, etc.)
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    32
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    33
The algorithm implemented in CubicWeb is the following:
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    34
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    35
- read uiprops file while walk up the chain of cube dependencies: if
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    36
  cube myblog depends on cube comment, the variables defined in myblog
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    37
  will have precedence over the ones in comment
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    38
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    39
- replace the %(varname)s in all the CSSs of all the cubes
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    40
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    41
Keep in mind that the browser will then interpret the CSSs and apply
8c8c6d3f3b3a [css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff changeset
    42
the standard cascading mechanism.