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 el tamaño de la barra lateral de diseño de Primer CSS. Primer CSS proporciona la funcionalidad para agregar una barra lateral de dos tamaños que se analizan a continuación.
Primer CSS Layout Sidebar Sizing Classes used:
- Layout–sidebar-narrow: esta clase se usa para crear una barra lateral de tamaño estrecho.
- Layout–sidebar-wide: Esta clase se usa para crear una barra lateral de tamaño ancho.
Sintaxis:
<div class="Layout Layout--sidebar-narrow">
<div class="Layout-main border">
...
</div>
<div class="Layout-sidebar border">
...
</div>
</div>
Ejemplo 1: El siguiente ejemplo muestra el diseño de la barra lateral estrecha.
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 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 Layout Sidebar Sizing</h2> </div> <div class="Layout Layout--sidebar-narrow m-4"> <div class="Layout-main border color-bg-success p-4"> Sidebar of narrow size </div> <div class="Layout-sidebar border color-bg-accent p-4"> Layout Sidebar </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el diseño de la barra lateral ancha.
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 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 Layout Sidebar Sizing</h2> </div> <div class="Layout Layout--sidebar-wide m-4"> <div class="Layout-main border color-bg-success p-4"> Sidebar of wide size </div> <div class="Layout-sidebar border color-bg-accent p-4"> Layout Sidebar </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/layout#sidebar-sizing
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA