-
Notifications
You must be signed in to change notification settings - Fork 0
CSS Development
OntoWiki has its own framework for HTML/CSS which is been used for the GUI (together with Javascript components).
OntoWiki do not support Internet Explorer (IE) 6 anymore (so we can now use chained classes and better selectors for example), but we still have some relicts from that time in our CSS framework. Addionally we added elements and style options for different things during the past which could be merged to generalized concepts now. This means we can develop the framework step by step to a more elegant and usable solution.
All themes should be use following stylesheet files from the styles folder:
- default.css - home of the OntoWiki's CSS framework
- default.dev.css (since 0.8) - testing new elements/options or quick&dirty adoptions
- deprecated.dev.css (since 0.9.5) - defines a red outline with 1px width for all definitions from `default.css` which are marked as deprecated (`outline:solid 1px red;`), the `outline` attribute is still not supported by IE7 but we're talking about developing environments :)
- legacy.css (after 0.9.5) - contains removed definitions from `default.css` which are marked as deprecated for at least one OntoWiki release
- legacy.dev.css (after 0.9.5) - should be contain definitions from `deprecated.dev.css` after they have been there for one OntoWiki release, the outline should be 2px width to distinguish deprecated and legacy elements
All `*.dev.css` files are only loaded with activated debug mode (it's recommended for developers to activate the debug mode). Definitions from `*.dev.css` overwrite/extend definitions from default.css (and later from legacy.css), because they are loaded after the default styles.
Please comment in `deprecated.dev.css` and `legacy.css` what elements should be used instead or how options have to be used properly. A recent example is:
/**
* Inherited Minibuttons
* @deprecated 0.9.5
*
* - ul.minibutton and li.minibutton is deprecated 0.9.5 for simplification of the default styles
* - please use directly span.minibutton or a.minibutton
*/
ul.minibutton li a,
li.minibutton a
{
outline:solid 1px red !important;
}