Less Demo

Asides: Rethink universal sidebars

Traditional sidebars, once a cornerstone of web design, are losing relevance in modern layouts. As more people use phones and tablets to browse the web, universal sidebars have become less important.

Bar, Breakout & Pullout: A sidebar by any other name

While simple layouts work well on mobile, desktop users can enjoy more varied and interesting layouts. This is where Less’s flexible sidebars: bar1, breakout, and pullout come in handy. They act as contextual sidebars on larger screens and fit nicely into the main content on mobile devices.

1The bar is a nice way to add inline footnotes to your content.

These layout elements are great for emphasizing content and keeping readers engaged. You can style them to make your designs even more visually appealing. Remember, even though these elements are technically sidebars, treat them as important as your main content—because they’ll become part of the main content on mobile devices.

The breakout layout feature nicely interrupts your main content, stretching across the full width of the browser on desktop screens.

They also work well on all devices, including phones and tablets. They automatically adjust to fit smaller screens by blending into the main content. But they’re more than just pretty additions. They are useful tools that help organize information and make it easier for readers to understand your content. They guide people through your website in a clear and interesting way.

Lastly, let’s look at a pullout in action. This element sits alongside your main content and extends to the edge of the browser on a desktop.

They offer versatile ways to enhance your content presentation. Some excellent uses include:

  • Author bios: Provide context about the writer alongside articles
  • Related links: Guide readers to relevant content on your site
  • Pull quotes: Highlight key statements to capture attention
  • Testimonials: Showcase customer feedback to build credibility
  • Call-to-actions: Prompt user engagement with clear, eye-catching prompts

To create a bar, breakout, or pullout put your text between <div> tags and add the appropriate class. To align your asides on the other side of your text, add the .left class.

<div class="bar">
    Add your bar text here.
</div>

<div class="breakout left">
    Add your breakout text here.
</div>

<div class="pullout">
    Add your pullout text here.
</div>