Primer CSS es un marco CSS gratuito de código abierto que se basa en 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 garantiza 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.
Uno de estos componentes útiles presentes en Primer CSS es Blankslates . Es uno de los componentes únicos que solo están presentes en Primer CSS. En este artículo, aprenderemos sobre las diferentes variaciones del componente de pizarra en blanco en Primer CSS.
¿Cuál es el uso de una pizarra en blanco?
Blankslate se utiliza para indicar los espacios en blanco en el sitio web donde no hay contenido. Dentro del componente de pizarra en blanco, el usuario tiene la opción de agregar contenido. Esto es muy común en los sitios web modernos, como Github y Google Drive, donde inicialmente no hay contenido y el usuario tiene la opción de cargarlo. En todos estos casos, entra en acción una pizarra en blanco.
En Primer CSS, podemos crear diferentes variaciones en las clases de pizarra en blanco mediante clases opcionales adicionales junto con la clase «placa en blanco» .
Los diferentes componentes de Blankslate Variation se detallan a continuación:
- Pizarra en blanco estrecha: podemos crear una pizarra en blanco estrecha usando la clase .blankslate-narrow para el componente de pizarra en blanco. Esto hace que la pizarra en blanco sea estrecha y no ocupe todo el ancho disponible de la página.
- Large Blankslate: Podemos aumentar el tamaño del texto usando la clase .blankslate-large en el componente blankslate. Esto aumenta el tamaño de cualquier texto dentro de Blankslate.
- Espaciosa hoja en blanco: utilizamos la clase .blankslate-spacious para aumentar el relleno vertical entre el texto de la hoja en blanco.
- Agregar borde: también podemos agregar un borde al componente de pizarra en blanco envolviendo todo el componente de pizarra en blanco dentro de un componente de cuadro . Esto agrega un borde a Blankslate.
- Borde rematado: podemos eliminar el radio del borde de las esquinas superiores de los bordes de la pizarra en blanco agregando la clase .rounded-top-0 al componente del cuadro.
Nota: Podemos combinar dos variaciones, como pizarra en blanco grande y espaciosa, mediana con borde, y muchas más.
Sintaxis:
<div class ="...">
...
</div>
Ejemplo 1: hemos creado una pizarra estrecha en blanco con un borde utilizando el componente de cuadro.
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 rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Primer CSS Small Blankslate</h3> <div class="blankslate"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220504234629/copywriting-300x300.png" alt="" class="blankslate-image"/> <h3 class="blankslate-heading"> You don't have any articles uploaded. </h3> <p> Upload your articles on GeeksforGeeks to help the Geek community. </p> <div class="blankslate-action"> <button class="btn color-bg-done-emphasis" type="button" style="color: white;"> Upload </button> </div> <div class="blankslate-action"> <button class="btn-link" type="button"> Learn how to write articles </button> </div> </div> </body> </html>
Producción:
Ejemplo 2: Hemos creado una pequeña pizarra en blanco con un borde.
Código completo:
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 rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Primer CSS Small Blankslate</h3> <div class="Box rounded-top-0 m-4 color-shadow-large"> <div class="blankslate"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220504234629/copywriting-300x300.png" alt="" class="blankslate-image"/> <h3 class="blankslate-heading"> You don't have any articles uploaded. </h3> <p> Upload your articles on GeeksforGeeks to help the Geek community. </p> <div class="blankslate-action"> <button class="btn color-bg-done-emphasis" type="button" style="color: white;"> Upload </button> </div> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/blankslate
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA