Diseño básico de rejilla de 12 columnas en CSS puro/LESS-less Grid boilerplate

Vista prévia

Descripción

Less Grid boilerplate es una librería CSS/LESS ligera e independiente para generar un diseño de rejilla básico, adaptable y flexible para el moderno Design Web.

Funcionamiento

Importa el less Grid boilerplate en tu proyecto Web.

<script src="less.js"></script>
<link rel="stylesheet/less"href="main.less">

Cree un diseño de cuadrícula de la siguiente manera:

<div class="container">

<div class="row">


<div class="full grid content-center-v content-center-h">.full</div>

</div>


<div class="row">


<div class="one-half grid content-center-v content-center-h">.one-half</div>


<div class="one-half grid content-center-v content-center-h">.one-half</div>

</div>


<div class="row">


<div class="one-third grid content-center-v content-center-h">.one-third</div>


<div class="one-third grid content-center-v content-center-h">.one-third</div>


<div class="one-third grid content-center-v content-center-h">.one-third</div>

</div>


<div class="row">


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>

</div>


<div class="row">


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>

</div>


<div class="row">


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>

</div>


<div class="row">


<div class="one-half grid content-center-v content-center-h">.one-half</div>


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>

</div>


<div class="row">


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>


<div class="one-half grid content-center-v content-center-h">.one-half</div>

</div>


<div class="row">


<div class="one-half grid content-center-v content-center-h">.one-half</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>

</div>


<div class="row">


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-half grid content-center-v content-center-h">.one-half</div>

</div>


<div class="row">


<div class="one-half grid content-center-v content-center-h">.one-half</div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>

</div>


<div class="row">


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="one-half grid content-center-v content-center-h">.one-half</div>

</div>


<div class="row">


<div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>


<div class="one-third grid content-center-v content-center-h">.one-third</div>

</div>


<div class="row">


<div class="one-third grid content-center-v content-center-h">.one-third</div>


<div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>

</div>


<div class="row">


<div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>

</div>


<div class="row">


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>

</div>


<div class="row">


<div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>

</div>


<div class="row">


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>

</div>


<div class="row">


<div class="one-third grid content-center-v content-center-h">.one-third</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>

</div>


<div class="row">


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-third grid content-center-v content-center-h">.one-third</div>

</div>


<div class="row">


<div class="one-third grid content-center-v content-center-h">.one-third</div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>

</div>


<div class="row">


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="one-third grid content-center-v content-center-h">.one-third</div>

</div>


<div class="row">


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>

</div>


<div class="row">


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="grid"></div>


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>

</div>


<div class="row">


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="two-thirds middle grid content-center-v content-center-h">.two-thirds</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>

</div>


<div class="row">


<div class="grid"></div>


<div class="two-thirds middle grid content-center-v content-center-h">.two-thirds</div>


<div class="grid"></div>

</div>


<div class="row">


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>


<div class="one-half middle grid content-center-v content-center-h">.one-half</div>


<div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>

</div>


<div class="row">


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>


<div class="one-half middle grid content-center-v content-center-h">.one-half</div>


<div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>

</div>


<div class="row">


<div class="grid"></div>


<div class="one-half middle grid content-center-v content-center-h">.one-half</div>


<div class="grid"></div>

</div>


<div class="row">


<div class="one-half middle grid content-center-v content-center-h">.one-half</div>

</div>


<div class="row">


<div class="one-third middle grid content-center-v content-center-h">.one-third</div>

</div>


<div class="row">


<div class="one-sixth middle grid content-center-v content-center-h">.one-sixth</div>

</div>

</div>