Primer CSS Layout Sidebar Sizing

Last Updated : 25 May, 2022

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.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
</head>

<body>
    <div class="m-4">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h2>Primer CSS Layout Sidebar Sizing</h2>
    </div>

    <div class="Layout Layout--sidebar-narrow m-4">
        <div class="Layout-main border 
            color-bg-success p-4">
            Sidebar of narrow size
        </div>

        <div class="Layout-sidebar border 
            color-bg-accent p-4">
            Layout Sidebar
        </div>
    </div>
</body>

</html>

Output:

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

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
</head>

<body>
    <div class="m-4">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Primer CSS Layout Sidebar Sizing</h2>
    </div>

    <div class="Layout Layout--sidebar-wide m-4">
        <div class="Layout-main border 
            color-bg-success p-4">
            Sidebar of wide size
        </div>

        <div class="Layout-sidebar 
            border color-bg-accent p-4">
            Layout Sidebar
        </div>
    </div>
</body>

</html>