Difference between revisions of "Dn-css-4"
From EncyclopAtys
FairyFighter (talk | contribs) m (→COLORS) |
FairyFighter (talk | contribs) m (→COLORS) |
||
| 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> |
<div style=" | <div style=" | ||
border:1px solid #{{ColorAtys|group={{{palette}}}}}; | border:1px solid #{{ColorAtys|group={{{palette}}}}}; | ||
| Line 27: | Line 27: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Lets start disecting: | Lets start disecting: | ||
| + | |||
=== | === | ||
---- | ---- | ||
Revision as of 23:31, 26 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:
