Sidebar layout

#Example

<div class="sidebar-layout"><aside class="rounded-lg bg-surface-2 p-4">Sidebar</aside><main class="rounded-lg border border-border p-4">Main content</main></div>

#Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.sidebar-layout > :last-child {
  flex: 999 1 0;
  min-width: 55%;
}

.sidebar-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.sidebar-layout-end > :first-child {
  flex: 999 1 0;
  min-width: 55%;
}

.sidebar-layout-end > :last-child {
  flex: 1 1 var(--sidebar-w, 16rem);
  min-width: 0;
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Sidebar layout: start from the base class, then add modifiers -->
<div class="sidebar-layout"><aside class="rounded-lg bg-surface-2 p-4">Sidebar</aside><main class="rounded-lg border border-border p-4">Main content</main></div>

#Accessibility

• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components