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. 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 orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible.
El diseño se utiliza para mostrar el contenido con un estilo particular. Por ejemplo, podemos cambiar el diseño del documento usando visualización, flotación, alineación y otras utilidades.
Primer CSS Visibility Layout se usa para ajustar la visibilidad de un elemento usando las clases .v-hidden y .v-visible.
Clases usadas:
- .v-hidden: esta clase se usa para establecer la visibilidad oculta de un elemento.
- .v-visible: esta clase se utiliza para establecer la visibilidad como visible de un elemento.
Sintaxis:
<div class="v-*> Content... </div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Layout Visibility</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Layout Visibility</h3> <h3>Visibility Hidden</h3> <div class="v-hidden"> GeeksforGeeks Hidden </div> <h3>Visibility Visible</h3> <div class="v-visible"> GeeksforGeeks Visible </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Layout Visibility</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Layout Visibility</h3> <h3>Visibility Hidden</h3> <div class="d-table v-hidden"> <div class="d-table-cell color-bg-success-emphasis"> Display Table Cell </div> <div class="d-table-cell color-bg-accent-emphasis"> Display Table Cell </div> <div class="d-table-cell color-bg-success-emphasis"> Display Table Cell </div> </div> <h3>Visibility Visible</h3> <div class="d-table v-visible"> <div class="d-table-cell color-bg-success-emphasis"> Display Table Cell </div> <div class="d-table-cell color-bg-accent-emphasis"> Display Table Cell </div> <div class="d-table-cell color-bg-success-emphasis"> Display Table Cell </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/layout#visibility