Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system.
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.
In primer CSS Layout there are two types from which we can create a layout:
Position elements with spacing utilities: In this type of layout you can create a layout at any position like at the top, bottom, left and right. We can use any marketing spacing scale from $spacer-1 to $spacer-12 including 0 and negative values as well.
Note: Position elements with spacing utilities are only for md(medium) and lg(large) breakpoints.
Classes Used:
- position-relative: This class is used to position relative to its normal position.
- position-absolute: This class is used to position relative to the nearest positioned ancestor
- position-lg-static: This class is used to position is not positioned in any special way and it is always positioned according to the normal flow of the page.
- position-lg-absolute: This class is used to position relative to the nearest positioned ancestor in large resolution.
Negative offset columns: We can use negative offset columns to drag any element to the left and it is available from spacing.
Classes Used:
- offset-n1: This class is used to create the element with negative offset of value 1.
- offset-n2: This class is used to create the element with negative offset of value 2.
Example1: In the below code, we will make use of the above classes to position elements with spacing utilities.
<!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=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<div class="position-relative
p-6 color-fg-success">
<div class="border color-bg-default
position-absolute top-3">
GfG(top)
</div>
<div class="border color-bg-default
position-absolute top-9">
GfG(top)
</div>
<div class="border color-bg-default
position-absolute position-lg-static
right-md-4">
GfG(right)
</div>
<div class="border color-bg-default
position-lg-absolute left-lg-3">
GfG(left)
</div>
</div>
</center>
</body>
</html>
|
Output:
Example2: In the below code, we will make use of the above classes to position negative offset columns.
<!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=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<div class="mx-auto border" style="width: 300px">
<div class="offset-n3 col-4 border p-3
color-fg-success">
GfG(offset-n1)
</div>
<div class="offset-n2 col-4 border p-3
color-fg-success">
GfG(offset-n2)
</div>
<div class="offset-n1 col-4 border p-3
color-fg-success">
GfG(offset-n3)
</div>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://primer.style/css/utilities/marketing-layout