Primer CSS Extended Spacing Scale

Last Updated : 29 May, 2022

Primer CSS is a free open-source CSS framework built on technologies that provide insights into key design elements like space, typeface, and color. This methodical approach guarantees that the patterns are both consistent and compatible. It's primarily useful and adaptable. It was made with the help of the GitHub design system. Its CSS approach is guided by object-oriented CSS foundations, practical CSS, and BEM design.

Primer CSS Spacing Scale is a specified range of values for specifying the number of utilities such as margin, padding, and so on. Primer CSS uses a base-8 spacing scale, which is highly flexible because it allows us to multiply or divide the eight as many times as we want and still end up with whole integers.

The Extended Spacing Scale adds six more options to the existing spacing scale. That means the scale which had the range of 0-6 is now increased to 7-12. But this extended range doesn't work for every utility class in every direction. The most effective usage of the extended class is in margin and padding. The extended range i.e., 7-12 doesn't work on the x-axis but does work on the left and right sides individually for margin and padding. But for margin, we cannot use that 7-12 range for the complete x-axis neither together nor individually. Unlike the Basic Scaling Scale in the Extended part, the value increases by 16px instead of 8px.

All the variables and values of the extended spacing scale:

Variable	Scale	Value
$spacer-7	7	48px
$spacer-8	8	64px
$spacer-9	9	80px
$spacer-10	10	96px
$spacer-11	11	112px
$spacer-12	12	128px

There are no absolute used classes for this but this is used in various utility classes.

Amount of margin needed: For example, my-5 means 32px of margins will be added on the left and right sides of the container.
Amount of padding needed: For example, py-5 means 32px of padding will be added on the top and bottom sides of the container.

Example 1: The example below shows the usage of the extended spacing scale for specifying the padding on the two sides of the container. We have used pt-8 and pl-8 classes which specify the padding to be 64px on the top and left side of the div container.

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" />     <title>Primer CSS Extended Spacing Scale</title> </head> <body>     <div class="m-4">         <h1 class="color-fg-success"> GeeksforGeeks </h1>         <h3>Primer CSS Extended Spacing Scale</h3>         <br/>      </div>     <div class="pt-8 pl-8 color-bg-open-emphasis                  d-inline-block m-4">         <div class="color-bg-subtle p-1">GeeksforGeeks</div>     </div> </body> </html>

Output:

Example 2: The example below shows the usage of the extended spacing scale for specifying the margin on the two sides of the container. We have used the my-11 class which specifies the padding to be 112px on the top and bottom of the div container.

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" />     <title>Primer CSS Extended Spacing Scale</title>     <style>        body        {          margin-left:10px;          margin-right:10px;        }     </style> </head>  <body>     <div class="m-4">         <h1 class="color-fg-success"> GeeksforGeeks </h1>         <h3>Primer CSS Extended Spacing Scale</h3>         <br/>      </div>     <div class="my-11 color-bg-open-emphasis                       d-flex flex-column p-4">         <div class="color-bg-subtle p-1">GeeksforGeeks</div>     </div>     <div class="m-4 color-bg-open-emphasis                      d-flex flex-column p-4">         <div class="color-bg-subtle p-1">GeeksforGeeks</div>     </div> </body> </html>

Output:

Reference: https://primer.style/css/support/spacing#spacing-scale

Primer CSS Extended Vertical Margins

priyanshuchatterjee01

Improve

Article Tags :

Primer CSS Extended Spacing Scale

Similar Reads