Cassiopeia skeleton

The Cassiopeia template for Joomla 4 has a basic skeleton that allows the module-positions and also uses Bootstrap's grid system for a responsive design. This basic skeleton supports HTML5 areas such as header, nav, main and footer.

If we remove all the PHP from the index.php file, we see the basic skeleton of the template as shown below. This is for the static layout, with <body class="site-grid site wrapper-static">. Assigned to the fluid layout is <body class="site-grid site wrapper-fluid">, which allows the body to be as large as the screen size and shrink proportionally. If we select the fluid option under the options in Cassiopeia, Joomla uses PHP code that appends the text "-fluid" to the class name.

<!DOCTYPE html>
<html lang="" dir="">
<head>
  <jdoc:include type="metas" />
  <jdoc:include type="styles" />
  <jdoc:include type="scripts" />
</head>

<body class="site-grid site wrapper-static">

  <header class="header container-header full-width">
    <div class="grid-child">
      <div class="navbar-brand">
        LOGO
      </div>
   </div>
    <div class="grid-child container-nav">
      <nav class="navbar navbar-expand-md">
      </nav>
    </div>
  </header>

  <div class="grid-child container-component">
    <main>
    </main>
  </div>

  <footer class="container-footer footer full-width">
    <div class="grid-child">
    </div>
  </footer>

</body>
</html>

Body

Das Standard-Styling für das Cassiopeia Template hat keinen Rand. Kopfzeile, Navigation, Hauptbereich und Footer nehmen die gesamte verfügbare Breites ein. Das Logo befindet sich in der Kopfzeile im <header>-Tag. <body class=".. wrapper-fluid"> ist eine Breite von 100% zugewiesen. <body class=".. wrapper-static"> ist eine Breite auf 1320px begrenzt.

To the left and right of the main content are sidebars. These are both moved down for display sizes narrower than 992px.

...
	<?php if ($this->countModules('sidebar-right', true)) : ?>
	<div class="grid-child container-sidebar-right">
		<jdoc:include type="modules" name="sidebar-right" style="card" />
	</div>
	<?php endif; ?>
...