Base layout and menu
Cosmo CSS has a very opinionated layout, and to fully use its menu structure you need to follow it.
The menu consists of two levels of navigation and allows for a "backstage" menu. The top level navigation should navigate between your application areas, whereas the second level navigation should navigate between your actual pages.
The top bar navigation, left from the square, can be used to send your users into settings. In Jinya CMS it is used to toggle between the frontstage, where the artist manages their content, and the backstage, where the Jinya CMS installation can be administered.
To display status information, for example, during file upload, Cosmo CSS features a bottom bar. Even though the main usage of the bottom bar is to show progress, it can also be used to display buttons that should work on all pages the same.
Show code sample
<main class="cosmo-page">
<div class="cosmo-menu is--top">
<div class="cosmo-menu__row is--top">
<a target="_blank" href="https://github.com/Jinya-CMS/cosmo-css" class="cosmo-menu__item is--top">
Github
</a>
<a target="_blank" href="https://gitlab.imanuel.dev/jinya-cms/cosmo-css" class="cosmo-menu__item is--top">
GitLab
</a>
<a target="_blank" href="https://www.npmjs.com/package/@jinyacms/cosmo" class="cosmo-menu__item is--top">
NPM Package
</a>
</div>
<div class="cosmo-profile-picture"></div>
<a href="#" class="cosmo-menu__item is--top is--right">Logout</a>
</div>
<div class="cosmo-menu">
<button class="cosmo-back-button" onclick="history.back()" type="button"></button>
<nav class="cosmo-menu__collection">
<div class="cosmo-menu__row is--main">
<a class="cosmo-menu__item is--main" href="/index.html">
Cosmo
</a>
<a class="cosmo-menu__item is--main" href="/controls/controls.html">
Controls
</a>
<a class="cosmo-menu__item is--main is--active" href="/layout/layout.html">
Layout
</a>
</div>
<div class="cosmo-menu__row is--sub">
<a href="/layout/layout.html" class="cosmo-menu__item is--sub">
Base layout and menu
</a>
<a href="/layout/layout-bottom-bar-three-column.html" class="cosmo-menu__item is--sub">
Three column bottom bar
</a>
<a href="/layout/layout-showcase.html" class="cosmo-menu__item is--sub is--active">
Layout showcase
</a>
</div>
</nav>
</div>
<div class="cosmo-page-body">
<div class="cosmo-page-body__content"> <h1 class="cosmo-title">Some title</h1>
</div>
</div>
<div class="cosmo-bottom-bar">
<span class="cosmo-progress-bar__label">Top label</span>
<progress class="cosmo-progress-bar" value="19" max="100"></progress>
<span class="cosmo-progress-bar__label">Bottom label</span>
</div>
</main>