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.

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.

CSS

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}}".

---

<- BACK

NEXT ->