Primer CSS is a free open-source CSS framework based on technologies that provide insights into important style aspects like space, font, and color. This meticulous methodology ensures that its patterns are both stable and compatible. It’s mostly practical and adaptable. It was created using the GitHub design system. Object-oriented CSS foundations, practical CSS, and BEM design guide its CSS approach.
Primer CSS Spacing Scale is a predefined range of values that is used to specify the amount of the utilities like margin, padding, etc. The spacing scale used in Primer CSS is a base-8 scale, using it is extremely flexible because we can multiply or divide the eight as many times as we want and we will end up with whole numbers.
All the variables and values of the basic spacer scale:
Variable |
Scale |
Value |
|---|---|---|
| $spacer-0 | 0 | 0px |
| $spacer-1 | 1 | 4px |
| $spacer-2 | 2 | 8px |
| $spacer-3 | 3 | 16px |
| $spacer-4 | 4 | 24px |
| $spacer-5 | 5 | 32px |
| $spacer-6 | 6 | 40px |
We use the scale values for various utilities like Margin, padding, etc.
There are no absolute used classes for this but this is used in various utility classes.
- Amount of margin needed: For example, m-5 means 32px of margins will be added in all the directions.
- Amount of padding needed: For example, p-5 means 32px of padding will be added in all the directions.
They are also used in utilities like Borders etc.
Example 1: The example below shows the usage of the spacing scale for specifying the padding and margin around the container. We have used p-4 which specifies the padding to be 24px all around the HTML div container.
<!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 Spacing Scale</title>
</head>
<body>
<div class="m-4">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>Primer CSS Spacing Scale</h3>
<br/>
</div>
<div class="p-4 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 below example shows the usage of the spacing scale for specifying the padding and rounding of borders around the container. We have used p-4 which specifies the padding to be 24px all around the div container. We have also used the rounded-2 class which specifies the rounding of the borders to be 8px.
<!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 Spacing Scale
</title>
</head>
<body>
<div class="m-4">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>Primer CSS Spacing Scale</h3>
<br/>
</div>
<div class="p-4 color-bg-open border
color-border-closed-emphasis
rounded-2 d-inline-block m-4">
<div class="color-bg-subtle p-1">
GeeksforGeeks
</div>
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/support/spacing#spacing-scale