StableLayout · since 0.1.0
A sidebar next to main content that stacks when the content would get narrower than 50%.
Pick this part
Pick l-sidebar for
- Filters next to results, a form label next to its field, an avatar next to text.
- Any side column that should drop below the content when space runs out.
Pick another part for
- Equal columns: use
l-gridorl-switcher. - Page-level navigation that must stay fixed while scrolling: that is app chrome, outside this layout.
Build it
- Start with an element and add
class="l-sidebar". - Add the required parts:
l-sidebar__sidebar,l-sidebar__content. - Put the parts inside. The layout sets the space between them, so they need no margins.
Show markup 4 lines
<div class="l-sidebar">
<aside class="l-sidebar__sidebar"><p class="u-margin-0">Filters</p></aside>
<div class="l-sidebar__content"><p class="u-margin-0">42 results</p></div>
</div>Check your build
Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.
Fits
Put the side column first in the source only if it should also be read first.
Show markup 4 lines
<div class="l-sidebar">
<aside class="l-sidebar__sidebar"><p class="u-margin-0">Filters</p></aside>
<div class="l-sidebar__content"><p class="u-margin-0">42 results</p></div>
</div>validate: 0 issues
Doesn't fit
Don't use the sidebar elements on their own.
<aside class="l-sidebar__sidebar"><p class="u-margin-0">Filters</p></aside>validate
- warning "l-sidebar__sidebar" should be inside an element with class "l-sidebar".
[element-outside-block]
Spec sheet
| Class | On | What it does |
|---|---|---|
l-sidebar__sidebar required | – | The narrow side (16rem basis). |
l-sidebar__content required | – | The main content; takes the remaining space. |