Primer CSS Marketing Layout

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.

Output:

👁 Image

Example2: In the below code, we will make use of the above classes to position negative offset columns.

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/