#3361 - Improving CSS and JavaScript maintenance

Identifier #3361
Issue type Feature request or suggestion
Title Improving CSS and JavaScript maintenance
Status Completed
Tags

Roadmap: v11 (custom)

Handling member Chris Graham
Addon core_themeing
Description Move out colours from global.css:
1) Move colours to new _colors.css file. This reduces the need to override global.css.
2) Add a Tempcode INCLUDE directive to include the default theme's own _colors.css. This is so any newly-defined colours come through automatically.
3) At top of global.css change comment to say colours are in _colors.css file
4) Search for code that references global.css and in some cases change to _colors.css
5) Search for code that references 'global' and in some cases change to '_colors'
6) Check that now the Theme Wizard ends up only creating a single CSS file, _colors.css

Move out hybrid responsive design initiation code from global.css:
1) Move responsive modes stuff (in hybrid responsive branch) to new _responsive.css file. This reduces the need to override global.css.

Allow easier tacking onto the end of any existing CSS file:
1) For each of our CSS files add a Tempcode INCLUDE to the _<file>__extensions CSS file on the bottom. The intention here is a themer can just decide to add CSS code by adding as an extension, removing the need for an actual override. Add a comment by the include explaining this.
2) Add all these _<file>__extensions files.
3) Document clearly in the tut_themes tutorial that this is the best way to override styles. That CSS lets you override stuff that's redefined later in the file.
4) Remove the theme wizard inclusion-style method (not needed anymore)
5) In <file>__extensions.css files support regexp substitutions, regexp deletions, white-space safe substitutions, white-space safe deletions. This would be done by new Tempcode symbols. Document all this too, being clear to explain these only work in CSS (and JavaScript) files.
6) Also support CSS-aware deletion symbols. {$DELETE_CSS_SELECTOR,selector}. {$DELETE_CSS_PROPERTY,selector,property}. Ditto about documentation.

Allow easier tacking onto the end of any existing CSS file:
1) Rename custom_global.js to _global__extensions.js, for consistency any clarity with how CSS will now be done
2) Add extension files for all the other default bundled .js files.
3) Document in tut_themes, just how we did for CSS.

More changes for JavaScript:
1) Rename the upper case JavaScript templates to lower case, and put underscores in front, and update our documented coding standard about this. Again, for consistency.

Misc:
1) Add all the new files to the appropriate addon_registry hooks.
2) Add an automated test to ensure all the __extension.css/__extension.js files exist, so we don't forget to maintain this in the future.
3) ...Document as a coding standard too.
4) New themes being installed would be displayed (via an automatic algorithm) as being upgrader safe or not. Ones that only use extension CSS/JS files, theme images, and no full template overrides would be considered safe. A warning would explain that unsafe ones may be fine if maintained, but otherwise will become incompatible at some point.
Steps to reproduce

Funded? No
The system will post a comment when this issue is modified (e.g., status changes). To be notified of this, click "Enable comment notifications".

Rating

Unrated