Primer CSS es un marco CSS gratuito de código abierto construido sobre sistemas que sientan las bases para elementos de estilo básicos como el espaciado, la tipografía y el color. Nuestros patrones son estables e interoperables debido a su estructura sistemática. Los principios de CSS orientado a objetos, el CSS central y la arquitectura BEM informan su enfoque de CSS. Es extremadamente reutilizable y adaptable. Fue creado utilizando el sistema de diseño GitHub.
El relleno en CSS es una forma de agregar espacio alrededor del contenido interno de un elemento, dentro de cualquier borde que lo encierre. En Primer CSS , la escala de espaciado global se usa para definir cuánto relleno se agregará, lo que garantiza que el relleno horizontal y vertical sea consistente. Al usar esta utilidad, podemos hacer diferentes diseños usando los mismos estilos porque nos ayuda a reducir la cantidad de CSS personalizado que puede tener las mismas características.
El relleno receptivo es un atributo que nos ayuda a ajustar todas las utilidades de relleno en puntos de interrupción específicos, lo que nos ayuda a que responda a diferentes tamaños de pantalla. Cada utilidad de relleno dada agrega relleno a ese punto de interrupción específico y tamaños por encima de él.
Relleno sensible utilizado Clase:
- p-[dirección]-[punto de interrupción]-[espaciador]: aquí la dirección se refiere al eje en el que se aplicará el relleno, el punto de interrupción desde el que se agregará el relleno. El espaciador se refiere al valor de la escala de espaciado global de Primer.
- La dirección puede tener valores x/y.
- El punto de interrupción puede tener valores sm/md/lg.
- El espaciador puede tener de 0 a 6 valores.
Sintaxis:
<div class="px-sm-2 px-md-4">
...
</div>
Ejemplo 1: en el siguiente ejemplo, el relleno se incrementó en el eje x cuando el tamaño de la pantalla se redujo mediante el uso de clases de relleno sensibles.
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 Responsive Padding</title> </head> <body> <div class="m-4"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Responsive Padding</h3> <br /> </div> <div class="px-sm-6 px-md-4 px-lg-2 color-bg-open-emphasis d-inline-block m-3"> <div class="color-bg-inset color-fg-open p-1"> Hello Geeks my Padding changes when my size decreses!! </div> </div> </body> </html>
Producción:
Ejemplo 2: en el siguiente ejemplo, el relleno disminuirá en el eje y cuando el tamaño de la pantalla se reduzca mediante el uso de las clases de relleno de respuesta.
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 Responsive Padding</title> </head> <body> <div class="m-4"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Responsive Padding</h3> <br /> </div> <div class="py-sm-2 py-md-4 py-lg-6 color-bg-open-emphasis d-inline-block m-3"> <div class="color-bg-inset color-fg-open p-1"> Hello Geeks my Padding changes when my size decreses!! </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/padding#responsive-padding
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA