Primer CSS es un marco CSS gratuito de código abierto basado en conceptos que sientan las bases para los componentes básicos de diseño, como el espacio, la fuente y el color. Debido a su estructura sistemática, estos patrones son estables e interoperables. Su enfoque de CSS se basa en conceptos de CSS orientado a objetos, CSS central y arquitectura BEM. Es increíblemente adaptable y reutilizable. Fue hecho con la ayuda del sistema de diseño GitHub.
El relleno se puede usar para agregar el espacio alrededor del contenido interno de un elemento dentro de cualquier borde que lo rodee en CSS. La escala de espaciado global se usa en Primer CSS para determinar cuánto relleno se agregará, asegurando que el relleno horizontal y vertical sea uniforme. Podemos crear diferentes diseños con los mismos estilos utilizando estas herramientas, ya que nos ayuda a reducir la cantidad de CSS personalizado que tiene las mismas características. La Utilidad de Relleno de Contenedor Responsivo es una función que nos permite agregar una cantidad predefinida de relleno a un contenedor con el cambio de puntos de interrupción.
Primer CSS Responsive Container Padding Clases de utilidad:
- p-responsive: esta clase se puede usar para agregar relleno a cualquier lado del elemento, que pretende usarse con diferentes estilos de contenedor.
- Pantallas de tamaño 0 a sm : agregará un elemento de relleno de $spacer-3 que es equivalente a 16px.
- Pantallas de tamaño sm a lg : Agregará relleno de elementos de $spacer-6, que es equivalente a 40px.
- lg y pantallas de mayor tamaño: agregará relleno de elementos de $spacer-3, que equivale a 16 px.
Agregar estas clases al contenedor es equivalente a agregarle .px-3 .px-sm-6 .px-lg-3 .
Sintaxis:
<div class="p-responsive">Content...</div>
Ejemplo 1: Este ejemplo ilustra la implementación de Responsive Container Padding en Primer CSS. Aquí, hemos utilizado p-responsive a un contenedor div.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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 Container Padding </title> </head> <body> <div class="m-4"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3>Primer CSS Responsive Container Padding</h3> </div> <div class="p-responsive color-bg-open-emphasis d-inline-block m-3"> <div class="color-bg-inset color-fg-open p-1"> Hello Geeks my Padding changes with custom values when my size changes!! </div> </div> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, hemos implementado 2 contenedores en línea que tienen la extensión . clase de respuesta p que muestra que al ajustar el ancho de la pantalla, ambos contenedores también ajustan su tamaño de acuerdo con el ancho de la pantalla.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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 Container Padding </title> </head> <body> <div class="m-4"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3>Primer CSS Responsive Container Padding</h3> </div> <div class="p-responsive color-bg-open-emphasis d-inline-block m-3"> <div class="color-bg-inset color-fg-open p-1"> First Container </div> </div> <div class="p-responsive color-bg-success-emphasis d-inline-block m-3"> <div class="color-bg-inset color-fg-open p-1"> Second Container </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/padding#responsive-container-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