Open In App

Primer CSS Layout Sidebar Positioning

Improve
Improve
Like Article
Like
Save
Share
Report

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’ll see about Layout Sidebar positioning. We can change the position of the sidebar either to the start/left or end/right. 

Primer CSS Layout Sidebar positioning Classes:

  • Layout–sidebarPosition-start: This class is used to set the sidebar position to the start or at the left. This is the default positioning of the sidebar.
  • Layout–sidebarPosition-end: This class is used to set the sidebar position to the end or at the right.

Syntax:

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

Example 1: Below example demonstrates the layout sidebar with the start position.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0" />
    <title>Primer CSS</title>
    <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 Position
        </h2
    </div>
    <div class="Layout Layout--sidebarPosition-start m-4">
        <div class="Layout-main border
                    p-2 color-bg-success">
            GeeksforGeeks
        </div>
        <div class="Layout-sidebar border 
                    p-2 color-bg-accent">
            Learn more about it here.
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: Below example demonstrates the layout sidebar with end position.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0" />
    <title>Primer CSS</title>
    <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 Position
        </h2
    </div>
    <div class="Layout Layout--sidebarPosition-end m-4">
        <div class="Layout-main border 
                    p-2 color-bg-danger">
            Welcome to the community!
        </div>
        <div class="Layout-sidebar border 
                    p-2 color-bg-success">
            GeeksforGeeks
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://primer.style/css/components/layout#sidebar-positioning



Last Updated : 26 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads