Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Es un sistema que nos ayuda a construir experiencias de usuario consistentes de manera eficiente con suficiente flexibilidad. Este enfoque sistemático garantiza que nuestros estilos sean coherentes e interoperables entre sí. Cuenta con una escala de espaciado altamente componible, tipografía personalizable y colores significativos. Es altamente reutilizable y flexible y se crea con el sistema de diseño de GitHub.
Una caja es un componente que se utiliza para crear cajas de varias formas y tamaños. Hay situaciones en las que necesitamos un cuadro diferente para el título , el cuerpo y el pie de página . Esta funcionalidad nos la proporciona Primer CSS y se conoce como Box Elements .
Primer CSS Box Elementos Clases:
- Box-header: esta clase se utiliza para crear un cuadro para la región del encabezado.
- Box-title: esta clase se utiliza para aplicar un peso de fuente en negrita al encabezado.
- Box-body: esta clase se utiliza para crear un cuadro para la región del cuerpo.
- Box-footer: esta clase se utiliza para crear un cuadro para la región del pie de página.
Sintaxis:
<div class="Box">
<div class="Box-header">
<h2 class="Box-title">
...
</h2>
</div>
<div class="Box-body">
...
</div>
<div class="Box-footer">
...
</div>
</div>
La sintaxis para las otras clases es la misma excepto por el nombre de la clase que cambiará.
Ejemplo 1: El siguiente ejemplo demuestra el uso de los elementos de Primer CSS Box utilizando las clases Box-header y Box-title .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box Elements </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Box Elements </h3> <div class="Box"> <!--Box Class--> <div class="Box-header"> <!--Header Class--> <h3 class="Box-title"> <!--Title Class--> This Is A Box-header </h3> </div> <div class="Box-header"> <h3 class="Box-title"> This Is Another Box-header </h3> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el uso de los elementos de Primer CSS Box utilizando todas las clases mencionadas anteriormente.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box Elements </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Box Elements </h3> <br> <div class="Box"> <!--Box Class--> <div class="Box-header"> <!--Header Class--> <h3 class="Box-title"> <!--Title Class--> This Is A Box-header </h3> </div> <div class="Box-body"> <!--Body Class--> This Is A Box-body </div> <div class="Box-footer"> <!--Footer Class--> This Is A Box-footer </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/box
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA