Primer CSS Margin Naming Convention
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.
Margins are required to set each tag position. Primer CSS has special classes defined for applying suitable margins. Every class has a special name defined. Let us see all the names and its meaning :
m: To provide margin to a tag we use the “m” class.
Direction classes:
t: To set the top margin we use the “t” class.
r: To set the right margin we use the “r” class.
b: To set the bottom margin we use the “b” class.
l: To set the left margin we use the “l” class.
x: To set horizontal, left & right properties through this class.
y: To set vertical, top & bottom properties through this class.
Size classes:
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
0px | 4px | 8px | 16px | 24px | 32px | 40px | 48px | 64px | 80px | 96px | 112px | 128px |
Syntax:
<div class= "m *direction - *scaling"> . . .UI elements </div>
Let us see the application of these classes in the following examples:
Example 1: This example demonstrates the primer CSS naming convention margin.
- Margin Top : 24px through mt-4 class
- Margin Left : 40px through ml-6 class
HTML
<!DOCTYPE html> < html > < head > < title >Primer CSS Naming Convention Margin</ title > < link rel = "stylesheet" href = "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </ head > < body class = "mx-6" > < div class = "color-bg-attention" > < h1 class = "color-bg-subtle mt-4 ml-6 mb-4 color-fg-success" > w3wiki </ h1 > </ div > </ body > </ html > |
Output: You can see the margin applied to head in the image. w3wiki is shifted “24-px” from the top and “40- px” to the left so is the text showing the CSS on the web page.
Example 2: This example demonstrates the primer CSS naming convention margin.
HTML
<!DOCTYPE html> < html > < head > < title >Naming convention margin</ title > < link rel = "stylesheet" href = "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </ head > < body > < div class = "text-center" > < h1 class = "color-fg-success" > w3wiki </ h1 > < h3 >< u >Primer CSS Naming convention margin</ u ></ h3 > < br /> </ div > < div class = "d-flex flex-justify-center" > < div class = "color-bg-subtle" > < div class = "mt-6 color-bg-attention" > Margin top </ div > </ div > < div class = "color-bg-subtle" > < div class = "ml-6 color-bg-attention" > Margin left </ div > </ div > < div class = "color-bg-subtle" > < div class = "mr-6 color-bg-attention" > Margin right </ div > </ div > < div class = "color-bg-subtle" > < div class = "mb-6 color-bg-attention" > Margin bottom </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://primer.style/css/utilities/margin#naming-convention
Contact Us