Sidebar
A common responsive layout in which there is a "sidebar" of a fixed width, and a content area that is flexible. This implementation switches to a vertical layout the moment the flexible content gets too little space left within the targeted (wrapper) element. By default, items are stretch vertically within the parent wrapper.
Implementation
<div class="sidebar --left --threshold-{z}">
...
</div>
Implementation tip(s)!
1. The sidebar layout pattern does not have to be applied to an entire page. You can even apply it to a "searchbar". The input bar is the flexible content, but the search button is of a fixed content. If there is not enough room, they switch to a vertical layout.
2. There is a custom property called --layout-inline-size, set to 60% to calculate the breaking point of this layout. If you want a different breaking point, you can overwrite this custom property. There are class utilities available.
API
| Custom property | Default | Description |
|---|---|---|
--layout-threshold | 0 | Sets the "fixed width" of the sidebar child element |
--layout-gap | 0 | Sets the gap of the targeted element |
--layout-inline-size | 60% | Sets the min-width of the flexible content child element |
Utility classes
| Class name | Required? | Description |
|---|---|---|
--threshold-{z} | Required | Controls the --layout-threshold API |
--gap-{z} | Controls the --layout-gap API | |
--left/--right | Required | Sets which element is the fixed width sidebar |