Damyon Wiese (talk | contribs) |
Damyon Wiese (talk | contribs) |
||
| Line 3: | Line 3: | ||
== Problem == | == Problem == | ||
Our CSS is huge, this makes it slow to download and hard to maintain. It makes it hard for themers to write nice themes and makes it hard to implement responsive designs. | Our CSS is huge, this makes it slow to download and hard to maintain. It makes it hard for themers to write nice themes and makes it hard to implement responsive designs. | ||
== Current approach to CSS == | |||
Plugin/Page author manually attaches classes to HTML elements. Some classes are added to base theme and expected to be used by all themes e.g. r0, r1. Some classes are defined in the modules style.css. Themers are then expected to add a more specific CSS rule to override the style. In addition, tweaks are applied to individual pages through the use of #pageid, but the CSS for these tweaks is included in every page. There is also some CSS buried in YUI modules for things like popup windows. And there is the CSS required for standard YUI Modules (upstream). | |||
Whats wrong with this approach? | |||
The total CSS required for each page is: | |||
TOTALSTYLESFORALLFORMELEMENTSINBASE+TOTALSTYLESFORCUSTOMTWEAKSFOREVERYPAGEINMOODLE+ORPHANEDSTYLESTHATNOONEKNOWSIFTHEYAREINUSE+MODULESTYLES+YUISTYLES+CUSTOMYUISTYLES | |||
(It looks worse if I write it like that) | |||
Also - when working with CSS in Moodle it is impossible to know what is in all that CSS on any one page and the approach to working with the CSS resorts to: | |||
# Load the page | |||
# Inspect the element you want to change | |||
# Craft a new very specific CSS rule and add it to the bloat | |||
# Expect themers to find this new rule and add further tweaks | |||
== CSS Frameworks == | |||
There are several CSS frameworks available that aim to help with the above problems. The ones mentioned/used at Moodle so far are: Bootstrap and Pure (from YUI). | |||
The approach of a framework is to have an optimised small set of CSS that provides enough features that responsive, attractive designs can be achieved directly in the html by using standardized html with specific classes. | |||
The problem with this approach IMO is that adding specific classes to the HTML prevents themers from changing the presentation. It also combines logic about the presentation with the content (which CSS is supposed to avoid). | |||
== Relevant Links == | == Relevant Links == | ||
Revision as of 02:05, 30 May 2013
Random Thoughts on a CSS framework in Moodle
Problem
Our CSS is huge, this makes it slow to download and hard to maintain. It makes it hard for themers to write nice themes and makes it hard to implement responsive designs.
Current approach to CSS
Plugin/Page author manually attaches classes to HTML elements. Some classes are added to base theme and expected to be used by all themes e.g. r0, r1. Some classes are defined in the modules style.css. Themers are then expected to add a more specific CSS rule to override the style. In addition, tweaks are applied to individual pages through the use of #pageid, but the CSS for these tweaks is included in every page. There is also some CSS buried in YUI modules for things like popup windows. And there is the CSS required for standard YUI Modules (upstream).
Whats wrong with this approach?
The total CSS required for each page is: TOTALSTYLESFORALLFORMELEMENTSINBASE+TOTALSTYLESFORCUSTOMTWEAKSFOREVERYPAGEINMOODLE+ORPHANEDSTYLESTHATNOONEKNOWSIFTHEYAREINUSE+MODULESTYLES+YUISTYLES+CUSTOMYUISTYLES (It looks worse if I write it like that)
Also - when working with CSS in Moodle it is impossible to know what is in all that CSS on any one page and the approach to working with the CSS resorts to:
- Load the page
- Inspect the element you want to change
- Craft a new very specific CSS rule and add it to the bloat
- Expect themers to find this new rule and add further tweaks
CSS Frameworks
There are several CSS frameworks available that aim to help with the above problems. The ones mentioned/used at Moodle so far are: Bootstrap and Pure (from YUI).
The approach of a framework is to have an optimised small set of CSS that provides enough features that responsive, attractive designs can be achieved directly in the html by using standardized html with specific classes.
The problem with this approach IMO is that adding specific classes to the HTML prevents themers from changing the presentation. It also combines logic about the presentation with the content (which CSS is supposed to avoid).
