[#26191] - [4.0] Why is Cassiopeia CSS written for desktop then scaled down for small screens?
- Closed
- 9 Sep 2019
- Medium
- Build: staging
- # 26191
Is your feature request related to a problem? Please describe.
Bootstrap 4 has been redesigned 'mobile-first' to cater for small screens first and foremost with larger screens second as the greater majority of website users are now using mobile devices rather than desktops/laptops.
Joomla 4 code seems to be working the other way, being designed for large screens and then CSS added for smaller screens e.g. @media (max-width: 767.98px). Is this the right way to go?
I know it's easier to do the development work on a large screen, but all you need is another browser window open to change screen widths and you can see how it works at all sizes.
Describe the solution you'd like
Build Joomla 4 CSS from small screens up.
Additional context
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Labels |
Added:
?
|
||
| Status | New | ⇒ | Discussion |
Sorry. I should have clarified that my point was about the front end, not the admin. The CSS for Cassiopeia is designed for desktop first and mobile second. It should be mobile first, as the vast majority of website visits are now on mobile devices, even among oldies like me. I've changed the title.
| Title |
|
||||||
Could the "J4 Backend Template" tag be amended to "J4 Issue" as it's to do with the front end?
| Labels |
Added:
J4 Issue
Removed: ? |
||
Is this template been replaced with... https://community.joomla.org/gsoc-2019/gsoc-project-page-builder-third-coding-phase.html ?
If not then I'll switch the css to 'mobile first.
@ciar4n please see #26201 (comment) (even this is no answer on your question)
Pinging @wilsonge @HLeithner @bembelimen
Is this template been replaced with... https://community.joomla.org/gsoc-2019/gsoc-project-page-builder-third-coding-phase.html ?
When, then only somewhere in the future, the Page Builder needs some more love first, nothing for J! 4.
... then I'll switch the css to 'mobile first.
@ciar4n Will this be a manual job? If so, can you remove redundant IE fixes as you find them? For example, there is an IE fix for the Fontawesome fonts (src: url("../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.eot?#iefix"), etc, although I'm d*****d if I can find the original file where the instruction comes from. Thanks.
If not, I'll raise an issue as I find them.
Also, briefly mentioned elsewhere, but I've just found the code - why on very small screens do top-a and top-b modules drop below the component area, (and, for that matter, side-l, too)? It seems illogical. Surely top-a and top-b - and possibly side-l - should remain at the top?
joomla-cms/templates/cassiopeia/scss/blocks/_css-grid.scss
Lines 49 to 62 in 2aac831
I would
@HLeithner @bembelimen Thank you
@Scrabble96 Please create separate issues for these concerns.
| Status | Discussion | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-09-09 17:48:12 |
| Closed_By | ⇒ | franz-wohlkoenig |
True for the web in general. I suspect the joomla admin however is still predominantly viewed on desktop.