Dear colleagues. How many web designers create websites using the Cassiopeia template, redefining its blocks, creating a completely new design?
I do the same thing. The Cassiopeia template has accessibility, normalization, styles, and a framework. This template is ideal for starting even if you need to create a website with a completely different design.
But Cassiopeia is not adapted for use on a large scale with such capabilities.
Cassiopeia is used only with the design that is already laid down. This is bad. It can not be used as NORMALIZE.CSS is used.
We need to add this to the template:
//134 line
<jdoc:include type="modules" name="top" style="none" class="grid-child" />
//180 line
<jdoc:include type="modules" name="bottom" style="none" class="grid-child" />
The important thing is that you need to add these positions without the <DIV> container.
Using classes in a position
class="grid-child"
we specify that the position will have the default grid width that all blocks on the site have.
Class processing should be added to
//25 line \templates\cassiopeia\html\layouts\chromes\noCard.php
//25 line \templates\cassiopeia\html\layouts\chromes\card.php

$moduleAttribs['class'] = $module->position . ' no-card ' . ($params->get('moduleclass_sfx') ?
			(htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8')) : $attribs['class']);

Add the GRID-ARIA grid position to the styles.
.
Dear colleagues, thanks to the change. You can create modules on the site that are the width of the entire site, this can be a map of the route map. It can be a carousel of products. Agree that the driving directions and carousel are convenient when they are the entire width of the site.
Let's make more features for Cassiopeia!
By default, this position has only the width of the content.
This is also convenient when placing just ordinary modules.
If desired, we can place the gallery in the entire width of the site between the blocks.
90% of sites have a gallery in the site header with a width of 100% without affecting the main menu.
For example, the Xiaomi website.
https://www.mi.com/global/
https://www.solus.com/
to make a wide module, you need to add a class suffix full-width in the module settings of the admin panel.