Why such a layout Cassiopeia?

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Why such a layout Cassiopeia?

Post by kosh2323 » Wed Dec 07, 2022 3:59 pm

The default Cassiopeia template includes Bootstrap styles. The grid Bootstrap assumes a layout of the type of

Code: Select all

<container-fluid > container > row > col-*

but in the header and footer a different grid is used in the template

Code: Select all

full-width > grid-child > <div>......


The principle is similar, but it is still different. Will classes, for example row, col-*, work correctly in such a construction?

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 912
Joined: Tue Jun 30, 2020 12:17 pm

Re: Why such a layout Cassiopeia?

Post by Pavel-ww » Wed Dec 07, 2022 4:23 pm

Hi. Cassiopea uses Bootstrap js but layout (css) part is built on CSS Grid. It is native css, not framework so there are not specific class names. You can use any you want class names. This is much better than the Bootstrap grid. You should study this technology to work correctly with this template in aspects of general layouts.

Nevertheless, you can use the Bootstrap grid inside your own HTML structures. For example, inside the article editor and modules

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: Why such a layout Cassiopeia?

Post by kosh2323 » Thu Dec 08, 2022 6:49 am

As I understand it, Bootstrap is just a set of classes to which CSS properties are bound. If we apply such constructions, then they will not differ in fact in any way, or am I wrong?

Code: Select all

.container-fluid > .container > .row > .col-* > <div.....

Code: Select all

.full-width > .grid-child > .row > .col-* > <div.....

Code: Select all

.full-width > .grid-child > .col-* > <div.....

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 29659
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Why such a layout Cassiopeia?

Post by Per Yngve Berg » Thu Dec 08, 2022 7:50 am

Bootstrap 5 will generate a css grid. This is much better and faster than the earlier versions of Bootstrap.

https://getbootstrap.com/docs/5.1/getti ... roduction/

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 912
Joined: Tue Jun 30, 2020 12:17 pm

Re: Why such a layout Cassiopeia?

Post by Pavel-ww » Thu Dec 08, 2022 8:05 am

Hi. Yes, it will work. You can use a bootstrap construction inside any div.

But remember the performance. Using Bootstrap, you call a large CSS volume for reading by browser. That Bootstrap is done using three levels of divs and 10 lines of CSS code, CSS Grid is done using one level of divs and one line of code. That works much faster

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 912
Joined: Tue Jun 30, 2020 12:17 pm

Re: Why such a layout Cassiopeia?

Post by Pavel-ww » Thu Dec 08, 2022 8:13 am

Per Yngve Berg wrote:
Thu Dec 08, 2022 7:50 am
Bootstrap 5 will generate a css grid.
Hi Per. That in Bootstrap 5 is called Grid is not CSS Grid. Bootstrap 5 works on Flex Box. CSS GRID is a killer of Bootstrap grid. They are antagonists if you want :)

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: Why such a layout Cassiopeia?

Post by kosh2323 » Thu Dec 08, 2022 9:08 am

If I understood correctly, then I can use col-* classes as size or adaptability for @media requests if the parent container has a d-flex class, and I see properties in the bootstrap.css file.

Code: Select all

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;}
At the same time, I can use any container itself, it must have a display:flex class. A grid of containers can be built on a Grid. Right?

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 912
Joined: Tue Jun 30, 2020 12:17 pm

Re: Why such a layout Cassiopeia?

Post by Pavel-ww » Thu Dec 08, 2022 4:30 pm

Class row is a flex wrapper for the columns (it has display: flex; by default from bootstrap css). The classes that you mean like d-flex are utilities.

You can use the bootstrap grid inside any div using its standard classes row and col without utilities.

Code: Select all

<div class="some-class-name-block">
    <!-- Bootstrap grid start -->
    <div class="row">
        <div class="col-*"></div>
        <div class="col-*"></div>
        <div class="col-*"></div>
    </div>
    <!-- Bootstrap grid end -->
</div>
kosh2323 wrote:
Thu Dec 08, 2022 9:08 am
At the same time, I can use any container itself, it must have a display:flex class. A grid of containers can be built on a Grid. Right?
Yes but container (If you are talking about class) may have any display property you want. display:flex for it is not necessary. For container class in Bootstrap is used only paddigs, margins,width and max-width. The display property is not defined and by default is display:block from main html rules

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: Why such a layout Cassiopeia?

Post by kosh2323 » Fri Dec 09, 2022 7:40 am

Pavel-ww wrote:
Thu Dec 08, 2022 4:30 pm
Class row is a flex wrapper for the columns (it has display: flex; by default from bootstrap css). The classes that you mean like d-flex are utilities.

You can use the bootstrap grid inside any div using its standard classes row and col without utilities.

Code: Select all

<div class="some-class-name-block">
    <!-- Bootstrap grid start -->
    <div class="row">
        <div class="col-*"></div>
        <div class="col-*"></div>
        <div class="col-*"></div>
    </div>
    <!-- Bootstrap grid end -->
</div>
kosh2323 wrote:
Thu Dec 08, 2022 9:08 am
At the same time, I can use any container itself, it must have a display:flex class. A grid of containers can be built on a Grid. Right?
Yes but container (If you are talking about class) may have any display property you want. display:flex for it is not necessary. For container class in Bootstrap is used only paddigs, margins,width and max-width. The display property is not defined and by default is display:block from main html rules
Thanks for the detailed answer, in fact the .row class is a row for columns, if the .row-my class is assigned the same css properties as bootstrap .row, then the construction will also work, it's just a set of properties. So?

Code: Select all

<div class="some-class-name-block">
    <!-- Bootstrap grid start -->
    <div class="row-my">
        <div class="col-*"></div>
        <div class="col-*"></div>
        <div class="col-*"></div>
    </div>
    <!-- Bootstrap grid end -->
</div>
/*CSS*/
.row, .row-my {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
/*CSS*/

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 912
Joined: Tue Jun 30, 2020 12:17 pm

Re: Why such a layout Cassiopeia?

Post by Pavel-ww » Fri Dec 09, 2022 10:41 am

kosh2323 wrote:
Fri Dec 09, 2022 7:40 am
In fact the .row class is a row for columns, if the .row-my class is assigned the same css properties as bootstrap .row, then the construction will also work, it's just a set of properties. So?
Hi. Yes. But what's the point of using .row-my if you already have .row? Or do you just have an academic interest? :)

kosh2323
Joomla! Apprentice
Joomla! Apprentice
Posts: 42
Joined: Mon Aug 22, 2022 3:01 pm

Re: Why such a layout Cassiopeia?

Post by kosh2323 » Fri Dec 09, 2022 12:25 pm

Pavel-ww wrote:
Fri Dec 09, 2022 10:41 am
kosh2323 wrote:
Fri Dec 09, 2022 7:40 am
In fact the .row class is a row for columns, if the .row-my class is assigned the same css properties as bootstrap .row, then the construction will also work, it's just a set of properties. So?
Hi. Yes. But what's the point of using .row-my if you already have .row? Or do you just have an academic interest? :)
Yes, the interest is academic, I just want to know how it works. Now I understand. I want to thank all the participants of this topic, especially you Pavel-ww. THANK YOU.

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 912
Joined: Tue Jun 30, 2020 12:17 pm

Re: Why such a layout Cassiopeia?

Post by Pavel-ww » Sat Dec 10, 2022 6:33 am

You are wellcome :)


Post Reply

Return to “Templates for Joomla! 4.x”