CSS (SCSS) Grid Layout: Atomic Bulldog Grid

Vista prévia

Descripción

Atomic Bulldog Grid es una biblioteca CSS (SCSS) para generar un diseño de cuadrícula flexible, moderno y adaptable usando el < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" target = "_ blank" rel = "noopener" > CSS Grid layout Technology. La biblioteca también proporciona una reserva que usa Flexbox CSS.

Funcionamiento

Agregue la hoja de estilo principal y los archivos CSS de reserva a la Página Web.

<link rel="stylesheet" href="/path/to/atomic-bulldog-grid.css">
<link rel="stylesheet" href="/path/to/atomic-bulldog-grid-fallback.css">
<link rel="stylesheet" href="/path/to/atomic-bulldog-grid-fallback-ie.css">

La estructura HTML básica para crear un diseño de cuadrícula.

<div class="grid">

<div>



<div class="example--item">





<p>Item 1</p>



</div>

</div>

<div>



<div class="example--item">





<p>Item 2</p>



</div>

</div>

<div>



<div class="example--item">





<p>Item 3</p>



</div>

</div>

...
</div>

Las clases CSS para personalizar el diseño de cuadrícula.

• . ha-cols-{Breakpoint}-{número de columnas}: el número de columnas
• . ha-Grid-Gap-{Breakpoint}-{espaciador}: espacio entre los elementos de la cuadrícula
• . tiene-Row-{punto de interrupción}-{número de filas}: el número de filas
• . is-Dense: si es denso

Configuración de la biblioteca reemplazando las variables predeterminadas en los siguientes archivos:

• _ puntos de interrupción. SCSS
• _ Container-sizes. SCSS
• _ Grid. SCSS
• _ root-classes. SCSS
• _ SPACERS. SCSS