Contents

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:

So we have now:

and values are:

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:

Please bare with me a bit longer... Now we create pages that will hold numeric value representing position in Pallete:

Content Box

Some title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


















.....

[[File:{{{image}}}|38px|left]]
{{{title}}}

{{{content}}}






<- BACK
NEXT ->


Retrieved from "https://en.wiki.ryzom.com/w/index.php?title=Dn-css-4&oldid=42989"