Why such a layout Cassiopeia?

[kosh2323]

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?

[Pavel-ww]

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]

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

[Per Yngve Berg]

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/

[Pavel-ww]

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

[Pavel-ww]

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]

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?

[Pavel-ww]

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>

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]

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>

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*/

[Pavel-ww]

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]

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.

[Pavel-ww]

You are wellcome