Moin2 CSS Style Guide

None of this is implemented yet, so it is easy to add your ideas now.

Major changes in CSS from Moin 1.x.

• use a browser reset (maybe: http://html5doctor.com/html-5-reset-stylesheet/ based on Eric Meyer's html4)

• common.css, screen.css, print.css, and projection.css are combined into one file named moin2.css.

  • maybe later, maybe not at all

• support for obsolete browsers will be removed from moin2.css; if we feel bad about this later we can add it back by continued use of a separate CSS file (msie.css) or use jQuery super selector plugin.

  • IE 6, 7 and earlier

    • as of Aug 2010, IE6 has 16% market share and IE7 11% per http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2

  • Firefox 1, 2
  • Opera 8 and earlier
  • Safari 3 and earlier

• support for RTL languages will be removed from moin2.css; cssjanus may be used to create a separate CSS file named moin2rtl.css.

• most contributed themes and other distributed themes will load the unmodified base css files and a theme specific screen.css file.
  • not many themes will be interested in modifying print.css, projection.css, slideshow.css, or msie.css
  • loading base common.css will reduce theme maintenance due to changes in base and html
• inclusion of jQuery plugins will sometimes add additional CSS files.
  • this creates the possibility of having naming collisions on classes and IDs
  • while we hope all plugin authors have the foresight to carefully name classes and IDs to avoid collisions, we have the same responsibility
  • the solution is to rename all classes and IDs to include a unique prefix, "moin-"

Format of CSS rules

Use a dense, one-line style with comments or blank lines to separate unrelated items and create visual white space. Break long lists of attributes into multiple lines and indent the second line with four spaces. Lists of selectors with common attributes should be broken with new lines so selectors are always on the left margin.

Minimize the length of selectors to increase speed and simplify code:

• https://developer.mozilla.org/en/Writing_Efficient_CSS (old, but well written)

• http://code.google.com/speed/page-speed/docs/rendering.html

Use color names and 3 or 6 digit hex notation. Use shorthand notations as described here:

• http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/

• http://www.dustindiaz.com/css-shorthand/

Alphabetize lists of attributes. Use spaces to separate attributes and attribute names and values (e.g. spaces after : and ;)

.rcpagelink {width: 33%; }
.rctime,
.rceditor {font-size: 0.88em; white-space: nowrap; }


/* admonition start */
div.caution, 
div.important, 
div.note, 
div.tip, 
div.warning {background-color: #F9F9FF; border: 1pt solid #E5E5E5; color: black; 
    margin: 10pt 30pt; min-height: 64px; padding-right: 64px; }

Changes to work on

• accessibility issues
  • output content div before header div
    • relatively easy for sidebar themes, not so for top bar themes
    • content first may have small benefit in search engine page ranking
• work on second theme to get a view of content vs. ui split
  • monobook is based on mediawiki, has sidebar, outputs content before header
• ugliest part of modernized theme is more actions drop down box
  • there is an old complaint about accessibility issues of drop down selection boxes
  • mandarin and fixedleft themes use alternatives to show more actions

  • is it possible to convert to list and utilize css-only drop down/up box? (a modernized tweak )

• modernized header is Xmas tree: on hover, some red, some green, Show has burned out bulb (tweak #2 )

• use of base css is not popular
  • only explorer theme uses @import url("../../modern/css/common.css");
  • other themes are at greater risk of small bugs and increased maintenance due to changes in base
  • is this result of IE6 bugs? or need more examples on how to override
• handling of rtl languages could be made easy for css coders if theme base handled it automatically
  • embed cssjanus in core code

    • licensing issues, see http://www.apache.org/licenses/GPL-compatibility.html

      • per http://en.wikipedia.org/wiki/List_of_FSF_approved_software_licenses we are OK if GPL v3, not OK if GPL v2

      • same issue with svgweb?
      • cssjanus is easy to run manually, just need instructions, relatively few sites will need it
  • if page is rtl language and rtl version of css file does not exist, generate and save it
  • to avoid file date checking, rule is to delete rtl file when changing ltr file

Discussion

Another idea is maybe keeping content and theme/ui css apart.