Primer CSS es un marco CSS gratuito de código abierto basado en tecnologías que brindan información sobre aspectos de estilo importantes como el espacio, la fuente y el color. Esta meticulosa metodología asegura que sus patrones sean estables y compatibles. Es sobre todo práctico y adaptable. Fue creado utilizando el sistema de diseño GitHub. Los fundamentos de CSS orientado a objetos, el CSS práctico y el diseño BEM guían su enfoque de CSS.
Primer CSS Spacing Scale es un rango predefinido de valores que se utiliza para especificar la cantidad de utilidades como margen, relleno, etc. La escala de espaciado utilizada en Primer CSS es una escala de base 8 , su uso es extremadamente flexible porque podemos multiplicar o dividimos el ocho tantas veces como queramos y nos quedarán números enteros.
Todas las variables y valores de la escala espaciadora básica:
Variable |
Escala |
Valor |
|---|---|---|
| $espaciador-0 | 0 | 0px |
| $espaciador-1 | 1 | 4px |
| $espaciador-2 | 2 | 8 píxeles |
| $espaciador-3 | 3 | 16 píxeles |
| $espaciador-4 | 4 | 24px |
| $espaciador-5 | 5 | 32 píxeles |
| $espaciador-6 | 6 | 40px |
Usamos los valores de escala para varias utilidades como Margin , padding , etc.
No hay clases utilizadas absolutas para esto, pero esto se usa en varias clases de utilidad.
- Cantidad de margen necesaria: por ejemplo, m-5 significa que se agregarán 32 px de márgenes en todas las direcciones.
- Cantidad de relleno necesario: por ejemplo, p-5 significa que se agregarán 32 px de relleno en todas las direcciones.
También se utilizan en utilidades como bordes, etc.
Ejemplo 1: El siguiente ejemplo muestra el uso de la escala de espaciado para especificar el relleno y el margen alrededor del contenedor. Hemos usado p-4 que especifica que el relleno sea de 24 px alrededor del contenedor HTML 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 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>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el uso de la escala de espaciado para especificar el relleno y el redondeo de los bordes alrededor del contenedor. Hemos usado p-4 que especifica que el relleno sea de 24 px alrededor del contenedor div . También hemos usado la clase rounded-2 que especifica que el redondeo de los bordes sea 8px .
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 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>
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