From EncyclopAtys
COLORS
On first page of this essay I showed few rows from table below. Bare with me as I am Tryker and Marauder... I will concentrate on that combination ;-)
| Template | 1/8 | 2/7 | 3/6 | 4/5 | 5/4 | 6/3 | 7/2 | 8/1 |
|---|---|---|---|---|---|---|---|---|
| Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom |
| Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker |
| Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder |
If we would to agree with many CSS designers on internet we should need only five colors to create modern clean layout. By no means I will defend that statement nor I will try to dismiss its value, I am proposing here things to open discussion... BUT, if we would consider CSS designers idea we should, or at least try, to restrict amount of colors used. That's why I posted this contraption:
| dn-RT1 | dn-RT2 | dn-RT3 | dn-RT4 | dn-RT5 | dn-RT6 | dn-RT7 | dn-MR3 |
before I go any further, I would like to share idea behind this model and PLEASE do not bother with code of it for a moment...
Try to not see 'dn-' part at all the time. I use it to easly identify 'my' code in this development stage.
Lets have a look at bit of CSS (this one should look familiar ;) ):
<div style="
border:1px solid #{{ColorAtys|group={{{palette}}}}};
background: #{{ColorAtys|type=bg|group={{{palette}}}}};
background: linear-gradient(to right, #{{ColorAtys|type=bg|group={{{palette}}}}}, #{{ColorAtys|type=light|group={{{palette}}}}});
border: thin solid #{{ColorAtys|type=bg|group={{{palette}}}}};
border-bottom: thin outset #{{ColorAtys|type=dark|group={{{palette}}}}};
color: #{{ColorAtys|type=fg|group={{{palette}}}}};
">
Lets start disecting:
Dynamic colors
I am not gonna explain how colors are chosen to form a pallet for css layout, plenty of resources out there there... What I will like to do is analize bit of code from above:
- border:1px solid #0ff;
- here we have: BorderColor
- background: #eff;
- here we have: BackgroundColor
- background: linear-gradient(to right, #eff, #cff);
- fancy stuff: ColorFrom and ColorTo
- border: thin solid #eff;
- here we have: BorderColor... I saw that already here...
- border-bottom: thin outset #366;
- here we have... BottomBorderColor
- color: #122;
- here we have: Color
So we have now:
- BorderColor
- BackgroundColor
- ColorFrom and ColorTo
- BorderColor
- BottomBorderColor
- Color
and values are:
- {{ColorAtys|group={{{palette}}}}} : 0ff
- {{ColorAtys|type=fg|group={{{palette}}}}} : 122
- {{ColorAtys|type=bg|group={{{palette}}}}} : eff
- {{ColorAtys|type=bg|group={{{palette}}}}} : eff
- {{ColorAtys|type=bg|group={{{palette}}}}} : eff
- {{ColorAtys|type=light|group={{{palette}}}}} : cff
- {{ColorAtys|type=dark|group={{{palette}}}}} : 366
so.. we have here four colors :-) only.
Flexibility
In css one of the ways to represent colors is: #EEFFFF. Lets stick to that, as it is more flexible equivalent of #EFF. Ok back to code: {{ColorAtys|type=bg|group={{{palette}}}}}. This call is very flexible. Imo WAY TOO flexible! :-) If we are looking for a layout that is consistent, easy on eyes and looks clean, we should/must restrict flexibility in favor of style.
That's one consideration. Another one is readability of code. That template:
{{ColorAtys|type=bg|group={{{palette}}}}} has two parameters and you can find it ONLY in one place in code: where color code have to be.
So, for example, in here: style="background:#{{ColorAtys|type=dark}}; same as here: style="color:#{{ColorAtys|type=light}}". So what we actually want is: style="background:{{BackGroundColor}}; and: style="color:{{Color}}". And why do we want it, so that we can easily read it.
But now we can read it, but we lost flexibility, our limited flexibility. We know where the colors will have to come, we know their 'location': text color, background color, border color, whatever color... We want to adjust these colors depending of the space we are in wiki: page about Trykers will have differnt colors then one about Marauders or Rangers. That's, as already realized in existent template by calling it Pallete. So I came up with this notation for colors:
{{ColorAtys|type=bg|group={{{palette}}}}} = {{:{{{Pallete}}}{{varLocation}} }}
... and whats so amazing about this? We need only one parameter as another one is kinda... fixed. Allow me to explain further... Lets create few constants:
- Text Color: dn-varTextColor
- Background Text Color: dn-varBackgroundTextColor
- Header Text Color : dn-varHeaderTextColor
- Header Background Color: dn-varHeaderBackgroundColor
- Paragraph Header Color: dn-varParagraphHeaderColor
- Line Color: dn-varLineColor
Please bare with me a bit longer... Now we create pages that will hold numeric value representing position in Pallete:
- Text Color: dn-varTextColor -> 2
- Background Text Color: dn-varBackgroundTextColor -> 6
- Header Text Color : dn-varHeaderTextColor -> 1
- Header Background Color: dn-varHeaderBackgroundColor -> 4
- Paragraph Header Color: dn-varParagraphHeaderColor -> 2
- Line Color: dn-varLineColor -> 7
Content Box
- -
.....
- -
