Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Standardize classnames and layout to facilitate theming

From MoodleDocs

Working notes on standardization of classnames and layout across Moodle activity types, with the intention of making theme design faster and more foolproof.

In order to be sure all bases are covered in standardization, I began with a Survey of existing page views and markup. I'm going to exclude editing screens from this survey because it would just be too much to cover. Additionally, student views should probably be the first priority.

Observations

  • We mix & match IDs and classnames a lot in our markup and our selectors. Ideally IDs would be used for items which need efficient selection by JavaScript, and classnames would be used for everything else. Both markup and CSS would be written with that prescription in mind.
    • For example div#intro, which appears on many, many pages, is just static text and will never be the target of JavaScript. Not clear why this needs to be an ID.
  • The generalbox class is ubiquitous, and very, very multipurpose.
    • We should probably look at additional classnames to refine the generalbox according to context. There are some interesting and possibly useful examples of how we might want to do that here: http://twitter.github.com/bootstrap/components.html#alerts
    • The box class appears in the markup on many page views but neither base nor standard theme actually targets .box or uses it as a way to establish basic box attributes. We should standardize with one box model build on one base classname. IMHO generalbox might be a little more self-explanatory than box.
  • The generaltable class could be more ubiquitous.
    • All tables should use a base table class, then add their own mod-specific class where necessary.
    • The forum uses its own .forumheaderlist for tables. Ideally it has a general table class assigned, then overrides where needed according to an additional class and/or body tag.
  • Header usage, especially h2.main, is way higher than it should be.
    • Ideally, we use h2.main only once on a page view, for activity title or other "main" title.
    • .main is not a descriptive classname. It doesn't tell us anything we don't already know from h2 and the body tag.
    • .main also does not indicate the top-level header in the page-content. In many views it is applied to every header on the page.
    • On some page views, headers are used for purposes other than headings. We should move away from this. Text that is not a heading but needs emphasis should instead be given emphasis using uniformly-available classnames.