From EncyclopAtys
FairyFighter (talk | contribs) m (→CSS) |
FairyFighter (talk | contribs) m (→CSS) |
||
| Line 60: | Line 60: | ||
=== CSS === | === CSS === | ||
In ''css'' one of the ways to represent colors is: <nowiki>#EEFFFF</nowiki>. Lets stick to that, as it is more flexible equivalent of <nowiki>#EFF</nowiki>. Ok back to code: ''<nowiki>{{ColorAtys|type=bg|group={{{palette}}}}}</nowiki>''. 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. <br/> | In ''css'' one of the ways to represent colors is: <nowiki>#EEFFFF</nowiki>. Lets stick to that, as it is more flexible equivalent of <nowiki>#EFF</nowiki>. Ok back to code: ''<nowiki>{{ColorAtys|type=bg|group={{{palette}}}}}</nowiki>''. 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. <br/> | ||
| − | That's one consideration. Another one is readability of code. That template: '''''<nowiki>{{ColorAtys|type=bg|group={{{palette}}}}}</nowiki>''''' 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: '''''<nowiki>style="background:#{{ColorAtys|type=dark}};</nowiki>''''' same as here: '''''<nowiki> color:#{{ColorAtys|type=light}}</nowiki>'''''. So what we actually want is: '''<nowiki>style="background:{{BackGroundColor}};</nowiki>''' and: '''<nowiki> color:{{Color}}</nowiki>'''. | + | That's one consideration. Another one is readability of code. That template: <br/>'''''<nowiki>{{ColorAtys|type=bg|group={{{palette}}}}}</nowiki>''''' has two parameters and you can find it ONLY in one place in code: where color code have to be.<br/> |
| + | So, for example, in here: '''''<nowiki>style="background:#{{ColorAtys|type=dark}};</nowiki>''''' same as here: '''''<nowiki> style="color:#{{ColorAtys|type=light}}"</nowiki>'''''. So what we actually want is: '''<nowiki>style="background:{{BackGroundColor}};</nowiki>''' and: '''<nowiki> style="color:{{Color}}"</nowiki>'''. | ||
Revision as of 00:08, 27 February 2021
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}}".
