Difference between revisions of "Dn-css-4"

From EncyclopAtys

Jump to: navigation, search
m (Content Box)
 
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}}}}};

Latest revision as of 16:03, 23 November 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 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:

  • 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.

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:

  • Text Color: dn-varTextColor
  • Background Text Color: dn-varBackgroundTextColor
  • Header Text Color : dn-varHeaderTextColor
  • Header Background Color: dn-varHeaderBackgroundColor
  • Paragraph Header Color: dn-varParagraphHeaderColor
  • Line Color: dn-varLineColor

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





  • -