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
Revision as of 18:58, 13 November 2012 by Amy Groshek (talk | contribs)

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 generaltable class could be more ubiquitous.
  • Header usage, especially h2.main, is way higher than it should be.
    • Ideally, we use h2.main only once on a page view.
    • Child headers are h3 and h4, and only employed when there is more than one child header necessary