Diseño de cuadrícula basado en Flexbox adaptable-Griddd
| Autor: | shankariyerr |
|---|---|
| Views Total: | 1,864 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 27, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Griddd es un diseño de cuadrícula basado en Flexbox CSS ligero y adaptable que es totalmente personalizable a través de SASS.
Install and import the Griddd into your project:
$ npm install griddd
Funcionamiento
Cargue la versión minimizada del Griddd en la Página Web.
<link href="dist/griddd.min.css" rel="stylesheet">
El HTML básico.
<div class="columns"> <div class="is-4">4 Col</div> <div class="is-8">8 Col</div> </div> <div class="columns"> <div class="is-2">2 Col</div> <div class="is-8">8 Col</div> <div class="is-2">2 col</div> </div> <div class="columns"> <div class="is-8">8 Col</div> <div class="is-4">4 Col</div> </div>
Si desea establecer la alineación.
<div class="columns alignment"> <div class="is-12"> <h1 class="start">.start</h1> </div> <div class="is-12"> <h1 class="center">.center</h1> </div> <div class="is-12"> <h1 class="end">.end</h1> </div> </div>
Personaliza el diseño de la cuadrícula con SASS:
$width: 100%; //Container Width $resize: 100% - 5%; //Container Width $gutter: 0.5; //gutter size $columns: 12; //number of columns $slug: is !default; // change it to col if you're comfortable $breakpoint-md: 48em; // tablets $breakpoint-lg: 56.25em; // desktop $breakpoint-xlg: 68.75em; // HD
