author | Laurent Peuch <cortex@worlddomination.be> |
Thu, 26 Sep 2019 06:27:53 +0200 | |
changeset 12773 | 3a38f779bed5 |
parent 10492 | 68c13e0c0fc5 |
permissions | -rw-r--r-- |
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. |