Pequeño sistema de rejilla de 12 columnas-Waffle-Grid

Vista prévia

Descripción

Solo otra biblioteca de CSS que se usa para crear un diseño de cuadrícula de 12 columnas adaptable basado en Flexbox para un diseño web moderno. Totalmente personalizable a través de SASS.

Instalación

$ npm install waffle-grid

Funcionamiento

Sólo tiene que importar la hoja de estilo Waffle-Grid. CSS en su documento HTML y listo.

<link href="waffle-grid.css" rel="stylesheet">

El HTML para generar un sistema de rejilla:

<div class="grid">

<div class="row">


<!-- For column width, use col-n-of-p. By default, p can be 4, 8, or 12 -->


<div class="col col-1-of-4"></div>


<div class="col col-1-of-4"></div>


<div class="col col-1-of-4"></div>


<div class="col col-1-of-4"></div>

</div>

<div class="row">


<!-- The center class centers the column. -->


<div class="col col-7-of-12 center"></div>

</div>

<div class="row">


<!-- use col-m- and col-s- as well as m-hide, s-hide, m-only and s-only to make your grid responsive -->


<div class="col col-2-of-8 col-m-1-of-4 col-s-1-of-2"></div>


<div class="col col-3-of-8 col-m-2-of-4 col-s-1-of-2"></div>


<div class="col col-1-of-8 m-hide"></div>


<div class="col col-2-of-8 col-m-1-of-4 s-hide"></div>

</div>

<div class="row">


<div class="col col-1-of-4"></div>


<div class="col col-1-of-2"></div>


<div class="col col-1-of-4"></div>

</div>

<div class="row">


<!-- Pushes and pulls are used in the same way as col-n-of-p. They can also be responsive, like pull-m-1-of-4 -->


<div class="col col-1-of-8"></div>


<div class="col col-2-of-8 push-2-of-12"></div>


<div class="col col-3-of-8 pull-1-of-12"></div>

</div>
</div>

Registro de cambios

09/22/2018

• v1.3.5: Bugfix