Difference between revisions of "Dn-css"

Latest revision as of 22:09, 24 February 2021

Assumptions

To start with making our wiki up to date (in both regions: content and installation) we should take a moment to think about future and not the past. I would prefer to have conversation about what we would love to see, then bother about how we gonna get there. There for I would like to suggest few high level regions and reach mutual agreement on, that we all would support.

Colors

According to many web designers most of websites should be able to achieve good readability and modern look with usage of 5 colors only. Mostly 4 colors in same range and one as eye-catcher. I propose first 8 colors, more for the range allocations than anything else. Pallets below are for demonstrations purposes only.

dn-TK

dn-RT

dn-MR

But to make our wiki more attractive using 4+1 should do the trick. Something like this:

Trykers:

Marauders:

In my opinion, to make it even more flexible/dynamic, numbers should be replaced by variables like {{color}}, {{background-color}} which will contain specific number.

Tabels

No HTML tables, all in CSS. CSS is faster and 'easier' for browsers to interpret. It is more flexible.

Templating

We all know what template is. But do we know when is a template a good template? Friendly for contributors and as functional as it gets? Example below demonstrates my idea of templating in stages. Templet call should be as straight forward as possible. This can be best seen in button 4. How to keep templates easy to use? I suggest using templates containing subtemplates.

Template : this is template that Contributors will use
- Template/sub-1 : these are sub templates with more complicated code
  - Template/sub-1/sub-A
- Template/sub-2

Further in text there will be better examples of this construct.

Here some of my interpretations of staged templating:

No HTML buttons, all in CSS.

dn-button-1 div to create a button, fixed size, fixed colors:

Button 1

dn-button-2 div to create a button, fixed size, colors thru parameters:

Button 2

dn-button-3 div to create a button, dynamic size, colors thru parameters:

Button 3

dn-button-4 div to create a button, dynamic size, colors thru pallete:

Button 4

dn-menu-buttons menu with dynamic with a button dynamic size, colors thru pallete:

AAAA

BBBB

CCCC

DDDD

NEXT

@@ Line 2: / Line 2: @@
 To start with making our wiki up to date (in both regions: content and installation) we should take a moment to think about future and not the past. I would prefer to have conversation about what we would love to see, then bother about how we gonna get there.
 There for I would like to suggest few high level regions and reach mutual agreement on, that we all would support.
-==Layouts==
-===Main Page===
- This page should be attractive enough to invite people to read its content as informative as possible.
-* Proposal A
-* Proposal B
 ==Colors==
+According to many web designers most of websites should be able to achieve good readability and modern look with usage of 5 colors only. Mostly 4 colors in same range and one as eye-catcher. I propose first 8 colors, more for the range allocations than anything else. Pallets below are for demonstrations purposes only.
 * [[dn-TK]]
 {{dn-colors-table
@@ Line 41: / Line 37: @@
 |8=dn-MR8
 }}
+But to make our wiki more attractive using 4+1 should do the trick. Something like this:
+*Trykers:
+{{dn-pallete-table
+|1=dn-RT1
+|2=dn-RT2
+|3=dn-RT3
+|4=dn-RT4
+|5=dn-RT5
+|6=dn-RT6
+|7=dn-RT7
+|8=dn-TK3
+}}
+*Marauders:
+{{dn-pallete-table
+|1=dn-RT1
+|2=dn-RT2
+|3=dn-RT3
+|4=dn-RT4
+|5=dn-RT5
+|6=dn-RT6
+|7=dn-RT7
+|8=dn-MR3
+}}
+In my opinion, to make it even ''more'' flexible/dynamic, numbers should be replaced by variables like <nowiki>{{color}}</nowiki>,<nowiki> {{background-color}}</nowiki> which will contain specific number.
 == Tabels==
   No HTML tables, all in CSS. CSS is faster and 'easier' for browsers to interpret. It is more flexible.
-== Buttons==
+== Templating==
+We all know what template is. But do we know when is a template a good template? Friendly for contributors and as functional as it gets? Example below demonstrates my idea of templating in stages. Templet call should be as straight forward as possible. This can be best seen in '''button 4'''.
+How to keep templates easy to use? I suggest using templates containing subtemplates.
+* Template                       : this is template that Contributors will use
+** Template/sub-1            : these are sub templates with more complicated code
+*** Template/sub-1/sub-A
+** Template/sub-2
+Further in text there will be better examples of this construct.
+Here some of my interpretations of staged templating:
   No HTML buttons, all in CSS.
 * [[dn-button-1]] div to create a button, fixed size, fixed colors:<br/>
@@ Line 59: / Line 91: @@
 }}<br/>
-* [[dn-button-3]] div to create a button, dynamic size, colors thru parameters:<br/>
+* [[dn-button-3]] div to create a button, '''dynamic''' size, colors thru parameters:<br/>
 {{:dn-button-3
 |Color1=1A4A7A
@@ Line 68: / Line 100: @@
 }}<br/>
-*[[dn-button-4]] div to create a button, dynamic size, colors thru pallete:<br/>
+*[[dn-button-4]] div to create a button, '''dynamic''' size, colors thru pallete:<br/>
 {{:dn-button-4
 |Pallete=TK
-|text=Button 3
+|text=Button 4
 }}<br/>
 {{:dn-button-4
 |Pallete=MR
-|text=Button 3
+|text=Button 4
-}}<br/>*-
+}}<br/>
-* menu with dynamic width of a button:
-[[dn-menu-buttons]]
+* [[dn-menu-buttons]] menu with '''dynamic''' with a button '''dynamic''' size, colors thru pallete:
 {{:dn-menu-buttons
 |CellCount=4
-|Color1=1A4A7A
+|Pallete=MR
-|Color2=043464
-|Color3=9BCDFD
-|Color4=85B7E7
 |Link1= AAAA
 |Link2=BBBB
@@ Line 91: / Line 120: @@
 |Link4=DDDD
 }}<br/>
+----
-* menu with dynamic width of a button and color selector:
+{{:dn-button-1|text=[[dn-css-2| NEXT]]}}
-[[dn-menu-buttons-pallete]]
-{{:dn-menu-buttons-pallete
-|CellCount=3
-|Pallete=TK
-|Link1= AAAA
-|Link2=BBBB
-|Link3=CCCC
-|Link4=DDDD
-}}
-*-

From EncyclopAtys

Latest revision as of 22:09, 24 February 2021

Contents

Assumptions

Colors

Tabels

Templating