J4 Issue ?
avatar Scrabble96
Scrabble96
6 Sep 2019

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

avatar Scrabble96 Scrabble96 - open - 6 Sep 2019
avatar joomla-cms-bot joomla-cms-bot - change - 6 Sep 2019
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 6 Sep 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 6 Sep 2019
Labels Added: ?
avatar franz-wohlkoenig franz-wohlkoenig - labeled - 6 Sep 2019
avatar Scrabble96 Scrabble96 - change - 6 Sep 2019
The description was changed
avatar Scrabble96 Scrabble96 - edited - 6 Sep 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 6 Sep 2019
Status New Discussion
avatar ciar4n
ciar4n - comment - 8 Sep 2019

the greater majority of website users are now using mobile devices rather than desktops/laptops.

True for the web in general. I suspect the joomla admin however is still predominantly viewed on desktop.

avatar Scrabble96
Scrabble96 - comment - 8 Sep 2019

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.

avatar Scrabble96 Scrabble96 - change - 8 Sep 2019
Title
[4.0] Why is CSS written for desktop then scaled down for small screens?
[4.0] Why is Cassiopeia CSS written for desktop then scaled down for small screens?
avatar Scrabble96 Scrabble96 - edited - 8 Sep 2019
avatar Scrabble96
Scrabble96 - comment - 8 Sep 2019

Could the "J4 Backend Template" tag be amended to "J4 Issue" as it's to do with the front end?

avatar franz-wohlkoenig franz-wohlkoenig - change - 8 Sep 2019
Labels Added: J4 Issue
Removed: ?
avatar franz-wohlkoenig franz-wohlkoenig - unlabeled - 8 Sep 2019
avatar franz-wohlkoenig franz-wohlkoenig - labeled - 8 Sep 2019
avatar ciar4n
ciar4n - comment - 8 Sep 2019

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.

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 8 Sep 2019

@ciar4n please see #26201 (comment) (even this is no answer on your question)

avatar ciar4n
ciar4n - comment - 8 Sep 2019
avatar bembelimen
bembelimen - comment - 8 Sep 2019

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.

avatar HLeithner
HLeithner - comment - 9 Sep 2019

@ciar4n as benjamin wrote, there is no decision made yet when and how the page builder will be included into Joomla!

So I think changing the CSS to mobile first would be a good move. thx

avatar Scrabble96
Scrabble96 - comment - 9 Sep 2019

... 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.

avatar Scrabble96
Scrabble96 - comment - 9 Sep 2019

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?

@include media-breakpoint-down(xs) {
grid-template-areas:
". head head head head ."
". banner banner banner banner ."
". comp comp comp comp ."
". side-l side-l side-l side-l ."
". side-r side-r side-r side-r ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
". footer footer footer footer ."
". debug debug debug debug .";
}

I would

avatar ciar4n
ciar4n - comment - 9 Sep 2019

@HLeithner @bembelimen Thank you

@Scrabble96 Please create separate issues for these concerns.

avatar ciar4n
ciar4n - comment - 9 Sep 2019

PR created... #26237

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 9 Sep 2019

Closed as having Pull Request #26237

avatar franz-wohlkoenig franz-wohlkoenig - close - 9 Sep 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 9 Sep 2019
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2019-09-09 17:48:12
Closed_By franz-wohlkoenig

Add a Comment

Login with GitHub to post a comment