Primer CSS es un marco CSS gratuito y de código abierto que se crea utilizando el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Ayuda a crear la base de los elementos de estilo básicos, como el espaciado, los componentes, la tipografía, el color, etc.
En este artículo, aprenderemos sobre los diseños de anidamiento de Primer CSS. En Primer CSS, podemos anidar los componentes del diseño para generar un diseño de diseño de 3 columnas.
Primer clases de anidamiento de diseño CSS:
- Diseño: esta clase se utiliza para crear un componente de diseño.
- Layout-main: esta clase se utiliza para agregar un componente de diseño de contenido principal.
- Layout-sidebar: esta clase se usa para agregar una barra lateral en un componente de diseño.
- Layout–sidebarPosition-end: esta clase establece la posición del componente de la barra lateral al final/a la derecha.
- Layout–sidebar-narrow: esta clase se usa para agregar un componente de barra lateral estrecha.
Sintaxis:
<div class="Layout">
<div class="Layout-main ">
<div class="Layout Layout--sidebarPosition-end
Layout--sidebar-narrow">
<div class="Layout-main border">
Layout main container
</div>
<div class="Layout-sidebar border">
Layout metadata sidebar container
</div>
</div>
</div>
<div class="Layout-sidebar border">Layout sidebar</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra el anidamiento del componente de diseño.
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" /> <title>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet"/> </head> <body> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Primer CSS Nesting Layout</h2> </div> <div class="Layout m-4"> <div class="Layout-main"> <div class="Layout Layout--sidebarPosition-end Layout--sidebar-narrow"> <div class="Layout-main border p-2 color-bg-success"> Layout main container </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Layout metadata sidebar container </div> </div> </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Layout sidebar default </div> </div> </body> </html>
Producción:
Ejemplo 2: Otro ejemplo que demuestra el anidamiento del componente de diseño.
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" /> <title>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet"/> </head> <body> <div class="m-4"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Primer CSS Nesting Layout</h2> </div> <div class="Layout m-4"> <div class="Layout-main"> <div class="Layout Layout--sidebarPosition-end Layout--sidebar-narrow"> <div class="Layout-main border p-2 color-bg-success"> Layout main container </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Layout metadata sidebar container </div> </div> </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Layout sidebar default </div> </div> <div class="Layout m-4"> <div class="Layout-main "> <div class="Layout Layout--sidebarPosition-end Layout--flowRow-until-lg Layout--sidebar-narrow"> <div class="Layout-main border p-2 color-bg-danger"> Layout main container </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Layout metadata sidebar container </div> </div> </div> <div class="Layout-sidebar border p-2 color-bg-accent"> Layout sidebar </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/layout#nesting-layouts
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA