Primer CSS es un marco CSS gratuito de código abierto basado en tecnologías que brindan información sobre elementos de diseño clave como el espacio, el tipo de letra y el color. Este enfoque metódico garantiza que los patrones sean consistentes y compatibles. Es principalmente útil y adaptable. Fue hecho con la ayuda del sistema de diseño GitHub. Su enfoque CSS está guiado por fundamentos CSS orientados a objetos, CSS práctico y diseño BEM.
Primer CSS Spacing Scale es un rango específico de valores para especificar el número de utilidades como margen, relleno, etc. Primer CSS utiliza una escala de espaciado de base 8 , que es muy flexible porque nos permite multiplicar o dividir el ocho tantas veces como queramos y aun así terminar con números enteros.
La escala de espaciado extendida agrega seis opciones más a la escala de espaciado existente. Eso significa que la escala que tenía el rango de 0-6 ahora se incrementa a 7-12. Pero este rango extendido no funciona para todas las clases de servicios públicos en todas las direcciones. El uso más efectivo de la clase extendida es en margen y relleno. El rango extendido, es decir, 7-12 no funciona en el eje x , pero funciona en los lados izquierdo y derecho individualmente para margen y relleno. Pero para el margen, no podemos usar ese rango de 7-12 para el eje x completo, ni juntos ni individualmente. A diferencia de la escala de escala básica en la parte extendida , el valor aumenta en 16 px en lugar de 8 px .
Todas las variables y valores de la escala de espaciamiento extendida:
| Variable | Escala | Valor |
| $espaciador-7 | 7 | 48px |
| $espaciador-8 | 8 | 64px |
| $espaciador-9 | 9 | 80px |
| $espaciador-10 | 10 | 96px |
| $espaciador-11 | 11 | 112px |
| $espaciador-12 | 12 | 128px |
No hay clases utilizadas absolutas para esto, pero esto se usa en varias clases de utilidad.
- Cantidad de margen necesaria: por ejemplo, my-5 significa que se agregarán 32 px de márgenes en los lados izquierdo y derecho del contenedor.
- Cantidad de relleno necesario: por ejemplo, py-5 significa que se agregarán 32 px de relleno en los lados superior e inferior del contenedor.
Ejemplo 1: El siguiente ejemplo muestra el uso de la escala de espaciado extendida para especificar el relleno en los dos lados del contenedor. Hemos usado clases pt-8 y pl-8 que especifican que el relleno sea de 64 px en la parte superior e izquierda del contenedor div .
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>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el uso de la escala de espaciado extendida para especificar el margen en los dos lados del contenedor. Hemos usado la clase my-11 que especifica que el relleno sea de 112 px en la parte superior e inferior del contenedor div .
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>
Producción:
Referencia: https://primer.style/css/support/spacing#spacing-scale
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA