Layout & Themes

Container

.s-container

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

Page Structure

The body, header, and footer elements may be treated differently, especially if the latter two are direct children of body:


body
If it has a footer 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.
header
If it is a direct child of body, the header becomes sticky, ensuring it remains visible while scrolling. A slight box shadow is also applied in this case.
footer
If it is a direct child of body, 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>
main content
Footer content

Themes

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

Light theme

<article class="s-light" role="presentation">
 	<h2>Headline</h2>
 	<p>This is a boring text</p>
	<search>
		<input type="text" aria-label="Search">
		<button>I do nothing</button>
	</search>
</article>

Dark theme

<article class="s-dark" role="presentation">
 	<h2>Headline</h2>
 	<p>This is a boring text</p>
	<search>
		<input type="text" aria-label="Search">
		<button>I do nothing</button>
    </search>
</article>

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.