Primer CSS es un marco CSS gratuito de código abierto que se crea con el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático asegura que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.
Una caja es un componente que se utiliza para crear cajas de varias formas y tamaños. En este artículo, aprenderemos varios tipos de componentes de cajas.
Componentes básicos de la caja CSS:
- Caja: Esta clase se utiliza para crear una caja.
- Elementos de cuadro : esta clase se utiliza para crear un cuadro diferente para el título, el cuerpo y el pie de página. Box Elements nos proporciona esta funcionalidad.
- Densidad de relleno de caja : esta clase se utiliza para cambiar la densidad de relleno de los elementos de caja.
- Tema del cuadro azul : esta clase se usa para crear el cuadro con un borde azul y un encabezado azul usando la clase Box–blue .
- Tema de encabezado de cuadro azul : esta clase se usa para crear el encabezado con un borde azul y un fondo azul usando la clase Box-header–blue .
- Tema de peligro de cuadro : esta clase se utiliza para crear el cuadro de borde rojo utilizando la clase de peligro de cuadro .
- Temas de fila : el color de fondo de cada fila en un cuadro se puede cambiar individualmente.
- Borde discontinuo : El borde discontinuo es una serie de líneas cortas. Se puede obtener usando la clase border-dasshed .
- Cajas con alertas flash : Las alertas flash se utilizan para colocar las alertas flash debajo del encabezado de la caja y encima del cuerpo de la caja. Podemos tener diferentes colores de alertas flash y se pueden usar con iconos y botones.
- Cajas con iconos : Sirven para añadir iconos con el contenido de la caja.
- Encabezados de caja con contadores : Se utiliza para crear el encabezado de caja con el contador usando la clase Counter .
- Elementos de formulario y botones en cuadros: para lograr diferentes diseños con elementos de formulario y botones en cuadros, utilice utilidades para lograr el diseño.
Sintaxis:
<div class="Box Box--Component-Classes"> ... </div>
Ejemplo 1: el siguiente código demuestra el componente de cuadro con el tema de cuadro azul usando las clases box , box–blue , box-body , box-header–blue , box–danger , box–footer .
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width = device-width,
initial-scale = 1">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">
<style>
body {
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Box elements with blue box header theme
</h3>
<h4>
Box elements with blue box header theme
</h4>
<br>
<div class="Box Box--blue">
<!--Box Class-->
<div class="Box-header Box-header--blue">
<!--Header Class-->
<h3 class="Box-title">
This is title in header class
</h3> </div>
<div class="Box-body"> This is body </div>
<div class="Box Box--danger">
<div class="Box-row">
This is box danger theme.
</div>
</div>
<div class="Box-footer">
This is footer
</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código demuestra las clases de densidad de relleno de cuadro CSS de Primer.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>
Primer CSS Box Padding Density
</h3>
<div class="Box Box--condensed">
<div class="Box-header">
<h4 class="Box-title">
This is Box--condensed element
</h4>
</div>
<div class="Box-row">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" >
</div>
<div class="Box-row">
A Computer Science portal for geeks
</div>
</div>
<div class="Box Box--spacious">
<div class="Box-header">
<h4 class="Box-title">
This is Box--spacious element
</h4>
</div>
<div class="Box-row">
GFG Body
</div>
<div class="Box-row">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" >
</div>
<div class="Box-row">
Portal for geeks
</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 3: El siguiente código demuestra el componente de cuadro utilizando las clases border , border-dasshed , flash , flash-full , flash-success y flash-error .
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>
Primer CSS Box with Dashed border n Flash
</h3>
<br>
<div class="border border-dashed ">
GeeksforGeeks is a Computer Science Portal
</div>
<div class="flash flash-full flash-success">
<svg class="octicon"
viewBox="0 0 14 16"
width="18"
height="20">
<path d="M13.78 4.22a.75.75 0 010 1.06l-7.25
7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0
011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
</path>
</svg>
<span>
GeeksforGeeks Success Flash alert
</span>
</div>
<div class="flash flash-full flash-error">
<svg class="octicon"
viewBox="0 0 14 16"
width="18"
height="20">
<path d="M13.78 4.22a.75.75 0 010 1.06l-7.25
7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0
011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
</path>
</svg>
<span>
GeeksforGeeks Error Flash alert
</span>
</div>
</center>
</body>
</html>
Producción:
Enlace de referencia: https://primer.style/css/components/box#box
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA