author | Sylvain Thénault <sylvain.thenault@logilab.fr> |
Fri, 16 Sep 2011 14:43:41 +0200 | |
branch | stable |
changeset 7804 | 814fb7f379a3 |
parent 5492 | da983679fab5 |
child 10121 | 23af005426bf |
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. |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
43 |
|
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
44 |
FAQ |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
45 |
==== |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
46 |
|
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
47 |
- How do I keep the old style? |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
48 |
|
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
49 |
Put ``STYLESHEET = [data('cubicweb.old.css')]`` in your uiprops.py |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
50 |
file and think about something else. |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
51 |
|
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
52 |
- What are the changes in cubicweb.css? |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
53 |
|
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
54 |
Version 3.9.0 of cubicweb changed the following in the default html |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
55 |
markup and css: |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
56 |
|
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
57 |
=============== ================================== |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
58 |
old new |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
59 |
=============== ================================== |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
60 |
.navcol #navColumnLeft, #navColumnRight |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
61 |
#contentcol #contentColumn |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
62 |
.footer #footer |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
63 |
.logo #logo |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
64 |
.simpleMessage .loginMessage |
5492 | 65 |
.appMsg (styles are removed from css) |
66 |
.searchMessage (styles are removed from css) |
|
5482
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
67 |
=============== ================================== |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
68 |
|
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
69 |
Introduction of the new cubicweb.reset.css based on Eric Meyer's |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
70 |
reset css. |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
71 |
|
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
72 |
Lots of margin, padding, etc. |
8c8c6d3f3b3a
[css] start using uiprops in cubicweb.css
Katia Saurfelt <katia.saurfelt@logilab.fr>
parents:
diff
changeset
|
73 |