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.
El diseño de visualización se utiliza para ajustar la propiedad de visualización de un elemento. Este diseño representa cómo se colocarán los componentes en la página web.
Clases usadas:
- .d-block: se utiliza para mostrar un elemento como un elemento de bloque.
- .d-none: t se usa para eliminar el elemento.
- .d-inline: se utiliza para mostrar un elemento como un elemento en línea.
- .d-inline-block: se utiliza para mostrar un elemento como un contenedor de bloques de nivel en línea.
- .d-table: se utiliza para establecer el comportamiento como <table> para todos los elementos.
- .d-table-cell: se utiliza para establecer el comportamiento como <td> para todos los elementos.
Sintaxis:
<div class="d-*"> Content... </div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Layout Display</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1> GeeksforGeeks </h1> <h3>Primer CSS Layout Display</h3> <div class="d-inline color-bg-success-emphasis"> Display Inline Content Part 1 </div> <div class="d-inline color-bg-accent-emphasis"> Display Inline Content Part 2 </div> <br> <div class="d-block color-bg-success-emphasis"> Display Block Content Part 1 </div> <div class="d-block color-bg-accent-emphasis"> Display Block Content Part 2 </div> <br> <div class="d-inline-block color-bg-success-emphasis"> Display Inline Block Content Part 1 </div> <div class="d-inline-block color-bg-accent-emphasis"> Display Inline Block Content Part 2 </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Layout Display</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 Display</h3> <div class="d-table"> <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> <br><br> <div class="d-none"> Display None </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/layout#display