Primer CSS Layout Sidebar Sizing

Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.

In this article, we will learn about Primer CSS Layout Sidebar Sizing. Primer CSS provides the functionality to add a sidebar of two sizes which are discussed below.

Primer CSS Layout Sidebar Sizing Classes used:

• Layout--sidebar-narrow: This class is used to create a sidebar of narrow size.
• Layout--sidebar-wide: This class is used to create a sidebar of wide size.

Syntax: 

<div class="Layout Layout--sidebar-narrow">
 <div class="Layout-main border">
 ...
 </div>

 <div class="Layout-sidebar border">
 ...
 </div>
</div>

Example 1: Below example demonstrates the layout of the narrow sidebar.

Output:

Example 2: Below example demonstrates the layout of the wide sidebar.

Output:

Reference: https://primer.style/#sidebar-sizing