Web Developers: If you are planning to develop a new web application for CentOS, please consider using the following visual style as base to your work, and joining the effort to make it better.
1. Common Style
CSS definitions used to build the base "CentOS Web Visual Style". It should always be loaded in first place.
2. Miscellaneous Style
CSS definitions used to build visual effects. New definitions may be grouped in separate files as time goes by.
3. Specific Web Application Style
CSS definitions used on specific web applications.
CentOS uses many different applications to handle its needs. Different web applications generally have different visual presentations. One of our goals is to have a common visual presentation along the web applications we use. Another one is to update web applications' source code without breaking the already defined common visual style.
The visual presentation of most web applications is generally based both on HTML style definitions and CSS definitions. These definitions are dependent one each other and should match in order to have effect when the page is rendered in a web client.
If we want to have a common visual presentation for all those applications that actually have different ones, it is inevitable to modify them. If we want to modify them, we need to define how we are going to do it.
The following are some ideas to consider; feel free to add yours and improve what we have until now:
Note: HTML structure will need to be modified to add common HTML elements like those holding the navigation links between web applications. CSS will need to be modified too, for including the style of those elements.
3.1. Schema #1
- Web applications should have the same HTML style definition and just one CSS definition.
3.2. Schema #2
- Web applications should have different HTML style definitions and specific CSS definitions.
3.3. Schema #3
- Web applications may share a common HTML style definition and specific HTML style definitions.
- Web applications may share a common CSS definition and specific CSS definitions.
- Web applications may have the same HTML style definition and just one CSS definition.
- Web applications cannot have just specific HTML style definitions. Common HTML style definitions need to be present.
- Web applications cannot have just specific CSS definitions. Common CSS definitions need to be present.
- Web applications sharing common and specific HTML style definitions should include a link to both common and specific CSS definitions. For example, in httpd case every page should have the following link definition in its head section:
<link href="stylesheet.css" rel="stylesheet" type="text/css" /> <link href="httpd.css" rel="stylesheet" type="text/css" />
In this case stylesheet.css has the CentOS common and miscellaneus CSS definitions. httpd.css has specific CSS definitions to httpd related pages. httpd.css should extend stylesheet.css and never overlap it except in some rare exception.
3.4. CSS Hierarchy
- CentOS common CSS definitions should be loaded first.
- Web applications specific CSS definitions should be loaded after CentOS CSS definitions.
- Web applications specific CSS definitinos wont overlap CentOS common CSS definitions.
- Web applications specific CSS definitions extend CentOS common CSS definitions toward specific applications.
4. HTML/CSS Definitions
The following file has a set of HTML and CSS files with a first implementation of Common and Miscellaneous section. It is here for you to check and improve.
wvs-default-definitions-1.tar.gz (md5: 04d2927e5b8d16e5066e8adda61d10f6)
wvs-default-definitions-2.tar.gz (md5: a71f693e28a6ee22f6795a7eedb676ba) - without tabs in page footers