[4.0] New Frontend (Aurora) Template

[C-Lodder]

Summary of Changes

So long Protostar and welcome Aurora, the new J4 template based on BS4.

As it currently stands, there are still more views to migrated over to BS4.

Aurora now uses proper naming conventions for module positions, such as sidebar-left, top-a, etc.. unlike the old position-7 which nobody had any clue about.

With the sample data, I've tried to make the homepage look like a proper demo site, by displaying a full stack of modules, each using different "Module Style" and "Moulde Class Suffix", to show new users what it has to offer out the box.

The banner image used if just for demo purposes until the design team provide something a bit more concrete.

Screenshot

[MATsxm]

Best news of the...... (can't remember)
Really excited about it...
of course, if the design Team needs some total copyleft photos... just ask for them

[ciar4n]

@MATsxm On the subject of copyright images... can https://unsplash.com/ be used (CC0) ?

[wilsonge]

CC0 is compatible with GPL

[MATsxm]

@ciar4n @wilsonge it is but it is nearly a question without answers as legal requirements may vary according to the copyright in the country of the photographer, which is very often forgotten.
but... let's say "yes"
this is why I always prefer a writen agrement (things are specificaly fixed) than a "general license"

[C-Lodder]

When a photographer uploads their photo to a site, they are agreeing to the license stated by the site. And the site specifically says

you can copy, modify, distribute and use the photos for free, including commercial purposes, without asking permission from or providing attribution to the photographer or Unsplash

Either way, it's no big issue, it's only a banner. I'm sure the design team can come up with something that fits the bill

[wilsonge]

I'm sure @MATsxm can take a lovely photo for us that he can donate to the project ;)

[C-Lodder]

@brianteeman - yes, a11y will be done afterwards, once the entire template is finished. I'd preferably like to get a beta of this merged so it's just there with the rest of core for people to use and test on the fly

[wilsonge]

Can you add that comment back please :)

[C-Lodder]

will do

[N6REJ]

my suggestion for chrome / module sizing is a variant of what we currently have..
Select 'bootstrap" chrome, select columns ( both currently exist ) & finally select column size which behaves completely differently from bs2 or bs3 ( https://v4-alpha.getbootstrap.com/layout/grid/#grid-options )
You'll also note the column names are different then before.

[born2webdesign]

About the mentioned module positions, e.g. sidebar-left—they might still be a good idea (for things independent of html[dir]), but, for the sake of rtl-languages, I think the default wording for sidebars should be e.g. sidebar-start and sidebar-end? (In CSS, text-align-start and text-align-end are a thing now.)

As module positions are mainly exposed to developers/implementors, I think this would actually prevent confusion (rather than add to it).

[brianteeman]

@born2webdesign i agree that the positions should have semantic meaning and I already commented on that earlier today regarding an ID but in this case an RTL language would not change anything. An RTL template is not a mirror of an LTR template so right is still right etc

[born2webdesign]

@brianteeman True, RTL doesn't have to be a mirror of LTR—that's why I agree there could also be *-left and *-right. But a sidebar menu, e.g., should probably change sides when switching from RTL to LTR—thus an additional *-start and *-end would be helpful.

[brianteeman]

In an admin template the ui should indeed be reversed/mirrored so you would be 100% correct there but we are talking about a frontend template here so left would still be left

[born2webdesign]

I was talking about the frontend, as well. See my example from above—it is not uncommon for a module to be displayed on the left in ltr and on the right in rtl. And with distinct positions (sidebar-left and sidebar-start) we could have (e.g.) .sidebar-left {float:left} but .sidebar-start {float:left} [dir="rtl"] .sidebar-start {float:right}

[brianteeman]

in that scenario the correct way would be using the module assignment option already available. as this is a frontend template you can always create the positions and css as you want in your own template

[born2webdesign]

you can always create the positions and css as you want in your own template

Sure, but if we are introducing sensible module positions, it would be nice to harmonise those with my own template's positions (that came out wrong, I meant changing my own template positions).
You are of course right if you are saying I could assign a translated module to the "opposite" module position …

[C-Lodder]

I could just use sidebar-a and sidebar-b. Some of the top Joomla and WP template providers use these naming conventions

[born2webdesign]

My previous concern (changing sides (or not) for ltr-rtl) is mostly taken care of by assigning modules to the appropriate positions (as brought up by Brian).
But changing templates without having to reassign all modules might be nice, too (sidebar-a on the left in the old template, on the right in the new one)—then again, if we moved the old template's sidebar to the new template's header … To work around that we would have to stick with super generic names … perhaps sidebar-a, sidebar-b and similar are a good compromise? I'm not sure.

[brianteeman]

But changing templates without having to reassign all modules might be nice,

Yes it would be nice but sadly template developers like to reinvent the wheel.

[C-Lodder]

It's not reinventing the wheel at all. It's using proper naming conventions that SHOULD have been done in the first place, rather that position-7 which could be anywhere.

The new positions mean the user no longer needs to get a template preview open to know where to assign modules.

If the user has Protostar as their default template, then we can simply migrate the module positions over to the Aurora positions, so the the upgrade from 3.x to 4.0 is smooth.

[brianteeman]

I was referring to 3pd template developers not core. ;)

The reason that template positions have a "translation" was so that position-7 would never change in the code but the developer could give it a meaningful name in their own template - no one used it though

[born2webdesign]

Maybe we should stick with the generic but flexible position names but promote their translations more/make them more prominent?
Really, the current system seems very well-thought-out to me—thinking about it again ;)—and @brianteeman you are right, I hardly ever used the names/translations, rather invented my own positions. So, if we could fix this behaviour (reinventing positions) by exposing those names more/pushing for their use, perhaps that would make the current system perfect?!

[brianteeman]

Really not sure what more we can do to encourage their use. Remember they also allow a position to be called left and gauche (french) so that in itself should be a reason to use them as it means the position is easy to understand in languages other than english

[born2webdesign]

First, we could give them even more descriptive names ("Left Sidebar", "Left Content" instead of just "Left").
Then, in the promotion, instead of "Here are the all-new positions for Aurora: …." it could be "Here are the new position names for Aurora: … "Left Sidebar" (position-8) … Remember, you can give the same positions new names (and translations) in your template so, after changing your template, you shouldn't ever have to reassign positions for existing modules!".

[studio42]

I have read a little the story.
brianteeman, do not do the error to force to add old BS2 in a new template. It's the best way to have conflict as in Joomla3 and before.
I load boostrap in Joomla 3 using JHtml::_('bootstrap.framework') and overide always in front for eg. in MYTEMPLATE/js/ui and MYTEMPLATE/css/ui to overide medias, if alyout need changes, then this should be overide too, but i think that you should simply force all component to use Jquery+boostrap 4 or nothing in admin or we have 4 year problems as mootools in Joomla 3.
Is same as doing it compatible php4 , jquery 1.6 ...