Primer CSS es un marco CSS gratuito y de código abierto basado en conceptos de diseño que es la base de elementos de diseño como el espacio, la tipografía y el color. Debido a su naturaleza lógica, estos patrones son robustos e interoperables. Su enfoque de CSS está definido por los conceptos de CSS orientado a objetos, CSS básico y la arquitectura BEM. Tiene muchos usos y se puede reutilizar. Para su elaboración se utilizó el sistema de diseño GitHub.
El relleno es una propiedad de CSS que le permite aumentar el espacio alrededor del contenido interno de un elemento dentro de cualquier borde que lo rodee. Primer CSS utiliza la escala de espaciado global para calcular cuánto relleno agregar, lo que garantiza un relleno horizontal y vertical uniforme. Con esta herramienta, podemos desarrollar diseños alternativos con los mismos estilos, ya que disminuye la cantidad de CSS personalizado con las mismas características.
La taquigrafía no es más que una estrategia de nomenclatura utilizada para nombrar las diferentes variaciones de la utilidad de relleno. Empleamos una estrategia de nomenclatura abreviada para que los nombres de las clases sean concisos porque las utilidades de relleno tienen varias versiones y se usarán en muchas ubicaciones.
Símbolos abreviados utilizados para las utilidades de relleno y sus descripciones:
- p: relleno
- r: lado derecho
- l: lado izquierdo
- t: sección superior
- b: sección inferior
- x: el eje x, ambos lados izquierdo y derecho
- y: el eje y, ambos lados izquierdo y derecho
- 0: 0 píxeles
- 1: 4 píxeles
- 2: 8px
- 3: 16px
- 4: 24 píxeles
- 5: 32 píxeles
- 6: 40 píxeles
- 7: 48px
- 8: 64px
- 9: 80px
- 10: 96px
- 11: 112 píxeles
- 12: 128px
Clases usadas:
- p[r/l/t/b/x/y]-[0-12]: usamos este formato con diferentes símbolos abreviados para valores y dirección para crear diferentes variaciones de las utilidades de relleno, como px-5. Este ejemplo agrega un relleno de 32 px en el eje x.
Syntax:
<div class="px-5">
...
</div>
Ejemplo 1: este ejemplo muestra cómo podemos agregar un relleno de 40 px en los lados superior y derecho y un elemento usando los símbolos abreviados como t, r y 6 (40 px).
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 Shorthand Padding</title> </head> <body> <div class="m-4"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Shorthand Padding</h3> <br /> </div> <div class="pt-6 pr-6 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: este ejemplo muestra cómo podemos agregar un relleno de 64 px y 40 px a los ejes x e y respectivamente y un elemento usando los símbolos abreviados como x, y, 6 y 8 (64 px).
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 Shorthand Padding</title> </head> <body> <div class="m-4"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Shorthand Padding</h3> <br /> </div> <div class="px-6 py-8 color-bg-open-emphasis d-inline-block m-4"> <div class="color-bg-subtle p-1"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/padding#shorthand
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA