.s-containerThe .s-container class defines the default maximum page width.
It includes 2.5rem padding.
Its width is calculated with an inline margin. This ensures the container remains the same width, regardless of the presence of a scrollbar.
The default container width is 65rem, but can be customized by
--container-width-number custom property (framework adds rem units).
The body, header, and footer elements may be treated
differently, especially if the latter two are direct children of body:
bodyfooter as a direct child, it receives
min-height: 100dvh; display: flex; flex-direction: column;. This is necessary
to keep the footer at the bottom of the page even with minimal content.
headerbody, the header becomes sticky, ensuring
it remains visible while scrolling. A slight box shadow is also applied in this case.
footerbody, it is positioned at the bottom of the document
even with limited content. A slight box shadow is applied in this scenario as well.<body>
<header>
<nav class="s-container">
<div>Your logo</div>
<menu>
<li><a>item</a></li>
<li><a>item</a></li>
</menu>
</nav>
</header>
<div class="s-container">main content</div>
<footer>
<div class="s-container">Footer content</div>
</footer>
</body> Sugar.css supports light and dark themes by default. You can preview them on the customization page.
Themes are automatically switched based on the prefers-color-scheme set by the browser
or operating system.
Base colors, defined as custom properties, are provided in two sets: one for the light theme and the other for the dark theme.
You can manually set any element to the dark or light theme by adding the following classes:
.s-dark.s-lightThis is a boring text
<article class="s-light">
<h2>Headline</h2>
<p>This is a boring text</p>
<search>
<input type="text">
<button>I do nothing</button>
</search>
</article> This is a boring text
<article class="s-dark">
<h2>Headline</h2>
<p>This is a boring text</p>
<search>
<input type="text">
<button>I do nothing</button>
</search>
</article>