Primer CSS Layout

Last Updated : 10 Jun, 2022

Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.

Primer CSS Layout is used to change the document layout with the help of classes that provide inline, block, table, etc. which can customize the document. We can even change the layout and the direction of the float.

Primer CSS Layout Classes:

Display: Used to change the display of the element.
Visibility: Used to change the visibility of the layout items.
Overflow: The classes can be utilized to control the overflow of the elements.
Float: Floating sets the direction of the element which is by default left.
Alignment: Adjust the alignment of the elements with the following classes:
Width and Height: We can set the width and height using the following classes:
Position: Sets the position of the elements.
Media object: Creates a media object container to hold layout utilities.

Syntax: Assign the layout classes to a container as follows:

<div class="d-inline border">
  <div class="d-inline-block border">
    Data Structures
  </div>
  <div class="d-inline-block border">
    Algorithms
  </div>
</div>

Example 1: In the following example, we have different display layout elements.

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"/>
    <title>GeeksforGeeks | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>Primer CSS Layout</strong>
            <br />
            <br />
        </center>
        <div>
            <div class="d-inline border border-dashed">
                <div class="d-inline-block border border">
                    Data Structures
                </div>
                <div class="d-inline-block border">
                    Algorithms
                </div>
            </div>
        </div>
        <br />
        <div>
            Programming Languages Table
            <div class="d-table">
                <div class="d-table-cell border">
                    1
                </div>
                <div class="d-table-cell border">
                    Java
                </div>
            </div>
            <div class="d-table">
                <div class="d-table-cell border">
                    2
                </div>
                <div class="d-table-cell border">
                    C++
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: In the following example, we are toggling the visibility of a container with the visibility classes.

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" />
    <title>GeeksforGeeks | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>Primer CSS Layout</strong>
            <br />
            <br />
        </center>
        <div id="gfg" class="v-visible">
            <div class="p-4 color-shadow-medium border">
                Welcome to GeeksforGeeks
            </div>
        </div>
        <button onclick="toggleVisibility()"
            class="btn btn-danger">
            Toggle Visibility
        </button>
    </div>
    <script>
        function toggleVisibility() {
            $('#gfg').toggleClass('v-visible')
            $('#gfg').toggleClass('v-hidden')
        }
    </script>
</body>
</html>