I agree with Chacapamac as well. The UI is what sells the CMS and if the UI is wrong, then regardless of how technically superior the underlying CMS might be, it won't be adopted.
We have CSS Grids now, this should be used in the administrator template as well as for the Cassiopeia template.
This is because CSS Grids allows us to rearrange elements on a page to optimize the space for each device that loads that page. With CSS Grids there is no reason that someone couldn't manage a Joomla installation from their iPhone.
By contrast, Bootstrap 4.x now seems clunky in comparison.
Here is an example of what I did with the old Protostar Template and will now re-do the Casseopia template in similar fashion.
http://www.lc4911-dev.org
username: guest
password: thisIS4GUESTS!
I will only make this account available for a few days.
The CSS is pretty simple:
Code: Select all
.main-content-container {
align-content: stretch;
background-color: transparent;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto auto auto;
min-height: 560px;
justify-items: center;
justify-content: space-around;
padding: 20px;
}
#left-panel-container {
grid-area: 1 / 1 / span 2 / span 3;
}
#content {
grid-area: 1 / 4 / -1 / span 6;
width: 100%;
}
#right-panel-container {
grid-area: 1 / 10 / span 2 / span 3;
}
And then for anything less than 768 pixels wide I make the following simple changes
Code: Select all
@media (max-width: 768px) {
#left-panel-container {
grid-area: 2 / 1 / span 1 / span 12;
max-width: 400px;
}
#content {
grid-area: 1 / 1 / span 1 / span 12
}
#right-panel-container {
grid-area: 3 / 1 / span 1 / span 12;
max-width: 400px;
}
}
I could use the shortcuts for grid-area to save character counts, but using the span notation makes it more immediately obvious what area of the container the elements occupy.
Again, Joomla needs to recapture market share and the way it will do that is by having a UI that is the envy of everyone currently using Drupal and WordPress.
