FairyFighter (talk | contribs) m (→Content Box) |
|||
| (8 intermediate revisions by one other user not shown) | |||
| Line 16: | Line 16: | ||
Try to not see 'dn-' part at all the time. I use it to easly identify 'my' code in this development stage. | 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 ;) ): | Lets have a look at bit of CSS (this one should look familiar ;) ): | ||
| − | <syntaxhighlight> | + | <syntaxhighlight lang='css'> |
<div style=" | <div style=" | ||
border:1px solid #{{ColorAtys|group={{{palette}}}}}; | border:1px solid #{{ColorAtys|group={{{palette}}}}}; | ||
| Line 86: | Line 86: | ||
|content= {{dn-LoremIpsum}} | |content= {{dn-LoremIpsum}} | ||
}} | }} | ||
| − | + | ||
---- | ---- | ||
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> | <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> | ||
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:
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:
So we have now:
and values are:
so.. we have here four colors :-) only.
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:
Please bare with me a bit longer... Now we create pages that will hold numeric value representing position in Pallete:
