Difference between revisions of "Dn-css"

From EncyclopAtys

Jump to: navigation, search
m (β†’β€Ž3)
m
Line 112: Line 112:
 
}}<br/>
 
}}<br/>
  
βˆ’
==Page elements==
+
[[dn-css-2| NEXT]]
βˆ’
A nice concept of separated text in a box! Lets make it a bit more modern:
 
βˆ’
===Paragraph===
 
βˆ’
Biggest problem I see here horizontal line. Not line but its color. If we would use standard wiki markup we can not change its color. It appears at highest level.. Then it is there no more:
 
βˆ’
==1==
 
βˆ’
111111
 
βˆ’
===2===
 
βˆ’
2222222
 
βˆ’
====3====
 
βˆ’
333333333
 
βˆ’
 
 
βˆ’
That's why I would consider using an alternative approach.
 
βˆ’
 
 
βˆ’
{{:dn-paragraph
 
βˆ’
|Header=Header
 
βˆ’
|Content=Some text
 
βˆ’
|Pallete=RT
 
βˆ’
}}
 
βˆ’
 
 
βˆ’
===Table===
 
βˆ’
No HTML table here, only CSS:
 
βˆ’
 
 
βˆ’
===Text box===
 
βˆ’
===Article===
 
βˆ’
===Navigation===
 
βˆ’
===Page box===
 
βˆ’
 
 
βˆ’
==Layouts==
 
βˆ’
===Main Page===
 
βˆ’
This page should be attractive enough to invite people to read its content as informative as possible.
 
βˆ’
* Proposal A
 
βˆ’
* Proposal B
 

Revision as of 23:12, 23 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 webdesigners most of websites should be able to achive 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.

dn-TK1 dn-TK2 dn-TK3 dn-TK4 dn-TK5 dn-TK6 dn-TK7 dn-TK8
dn-RT1 dn-RT2 dn-RT3 dn-RT4 dn-RT5 dn-RT6 dn-RT7 dn-RT8
dn-MR1 dn-MR2 dn-MR3 dn-MR4 dn-MR5 dn-MR6 dn-MR7 dn-MR8

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

  • Trykers:
dn-RT1 dn-RT2 dn-RT3 dn-RT4 dn-RT5 dn-RT6 dn-RT7 dn-TK3
  • Marauders:
dn-RT1 dn-RT2 dn-RT3 dn-RT4 dn-RT5 dn-RT6 dn-RT7 dn-MR3

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



Button 4



  • dn-menu-buttons menu with dynamic with a button dynamic size, colors thru pallete:
AAAA
BBBB
CCCC
DDDD

NEXT