#2095 - Bootstrap theme

Identifier #2095
Issue type Feature request or suggestion
Title Bootstrap theme
Status Closed (duplicate)
Tags

Risk: Breaks themes (custom)

Skills: Graphic design (custom)

Type: Mobile (custom)

Handling member Chris Graham
Addon core_themeing
Description Implement a Bootstrap theme for Composr and bundle it. Characteristics:
- Responsive design (no mobile mode)
- Bandwidth-heavy (but flashy)
- Uses grid system (so not as semantic)
- Flat design (so fewer gradients or rounded corners, use solid colours, make good use of quality modern screens)
- More animation effects

To do this, we would first make some modernisations to the default theme to put us more in harmony with what other people are doing. Things that don't sacrifice anything, just meet some soft expectations people may have. Things like updating code styles and using more modern JavaScript. We then use this as a base to then build the Bootstrap theme, knowing fewer overrides will be needed.

Improving the default theme:
- We can drop some compatibility. See #2005 for some vague ideas that may be implementable in whole or part. We can Kill IE9 support, IE10 minimum. Any code in there just for IE8 and IE9 can be removed. Once stuff is done from that issue, edit it out of that issue.
- Put Zepto in jquery_lite.js and always load it by default.
- But if jQuery is requested, we hard-code to skip jquery_lite in the PHP code (web_resources.php)
- We let any of our JS code use Zepto's minimal jQuery features, going as far as removing Composr JS that performs the same thing. Zepto gives us a minimal version of jQuery giving us the useful features without the bloat. We will generally write modern JS and CSS rather than relying on jQuery, but where Zepto saves significant code we would use it.
- We support CSP (#508) which means making a lot of new .js files and not using inline event handlers. We don't worry about having lots of individual JS files anymore, minimising request quantity is not as important as it was due to browser parallelisation improvements a decade ago and HTTP/2. So we can have downloads.js, galleries.js, etc (i.e. a separate JS file for every addon that uses JS, listed in the addon's addon_registr file).
- We make the JS match best practices (maybe run it through code reformatters)
- We continue to have the CSS match best practices for semantic low bandwidth sites - tweaks may be made, nothing huge (if you prefer '-' to '_' be my guest)
- We continue to include Tempcode in JS and CSS, but we do use our comment encapsulation

Notes:
- The default theme will not be responsive, mobile mode will persist
- Try and do in small steps to not overwhelm yourself or break the code-base. We don't want to have to delay v11 because we're still making theme changes. Ultimately we're planning most of this for v12, so at some point we'll probably decide "okay, that's enough for this version"

Then Bootstrap:
- When we are happy the default theme has modern enough code and works to its design goals, we then clone to make a responsive Bootstrap v4 theme using the very latest Bootstrap. No mobile mode support in this theme. Support the Admin Zone also.
- We may support native sass (scss) in Composr by shipping a compiler. If we do though, it will have to run FAST, unlike what we had with LESS. Performance testing will be required. It is critical users can run on really shitty web hosts and not do any kind of steps that touch any kind of code, yet continue to customise things in a native template editor if they wish to
- We remove any overrides no longer needed in the bootstrap theme - probably that means almost no .js files are overridden, but almost all CSS and HTML templates are
- In the default zones, set the bootstrap theme as the default
- Add a question to the Setup Wizard which theme to use
- Document the relative advantages and disadvantages of each theme in the theme documentation.

Notes:
- Going forward we maintain and ship both themes
Steps to reproduce

Related to

#508 - Support Content Security Policy

#3206 - Next generation theme (on hold)
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