|
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. |
|
43 |
|
44 FAQ |
|
45 ==== |
|
46 |
|
47 - How do I keep the old style? |
|
48 |
|
49 Put ``STYLESHEET = [data('cubicweb.old.css')]`` in your uiprops.py |
|
50 file and think about something else. |
|
51 |
|
52 - What are the changes in cubicweb.css? |
|
53 |
|
54 Version 3.9.0 of cubicweb changed the following in the default html |
|
55 markup and css: |
|
56 |
|
57 =============== ================================== |
|
58 old new |
|
59 =============== ================================== |
|
60 .navcol #navColumnLeft, #navColumnRight |
|
61 #contentcol #contentColumn |
|
62 .footer #footer |
|
63 .logo #logo |
|
64 .simpleMessage .loginMessage |
|
65 .appMsg (styles are removed from css) |
|
66 .searchMessage (styles are removed from css) |
|
67 =============== ================================== |
|
68 |
|
69 Introduction of the new cubicweb.reset.css based on Eric Meyer's |
|
70 reset css. |
|
71 |
|
72 Lots of margin, padding, etc. |
|
73 |