Bodoke es un framework de CSS (desarrollado con SCSS) que brinda la pósibilidad al desarrollador de contar con varios tipos de grillas en un mismo documento.
Su fuerte está en su limpieza y pureza en el diseño, dado que fue pensado para que este despojado de identidad visual para que aquel que lo use sepa que cuenta sólo con un esqueleto para estructurar su sitio y que a partir de el puede aplicar cuanto estilo propio desee.

Para comenzar rápidamente a estructurarlom, se necesita primero un <div class="container"> (ubicado inmediatamente debajo del <body>) que centra todo el contenido. Dentro del <div class="container"> deben ir las filas <div class="row"> y dentro de cada una de ellas una o más columnas <div class="cX-Y cols"> (donde "X" es el número de columas e "Y" es el total de columnas).

Estructura de archivos

						
scss // carpeta con todos los archivos
	app // todos los archivos del sitio van acá
	bodoke // el corazón del bodoke
	media // hojas de scss para cada regla de media queries

Grilla

c1-12

3 columnas

.c4-12 .cols

<div class="row">
	<div class="c4-12 cols">.c4-12 .cols</div>
	<div class="c4-12 cols">.c4-12 .cols</div>
	<div class="c4-12 cols">.c4-12 .cols</div>
</div>

.c6-12 .cols

<div class="row">
	<div class="c6-12 cols">.c6-12 .cols</div>
	<div class="c6-12 cols">.c6-12 .cols</div>
</div>

.c4-12 .cols

<div class="row">
	<div class="c4-12 cols">.c4-12 .cols</div>
	<div class="c4-12 cols">.c4-12 .cols</div>
	<div class="c4-12 cols">.c4-12 .cols</div>
</div>

.c3-12 .cols

<div class="row">
	<div class="c3-12 cols">.c3-12 .cols</div>
	<div class="c3-12 cols">.c3-12 .cols</div>
	<div class="c3-12 cols">.c3-12 .cols</div>
	<div class="c3-12 cols">.c3-12 .cols</div>
</div>

.c2-12 .cols

<div class="row">
	<div class="c2-12 cols">.c2-12 .cols</div>
	<div class="c2-12 cols">.c2-12 .cols</div>
	<div class="c2-12 cols">.c2-12 .cols</div>
	<div class="c2-12 cols">.c2-12 .cols</div>
	<div class="c2-12 cols">.c2-12 .cols</div>
	<div class="c2-12 cols">.c2-12 .cols</div>
</div>

.c1-12 .cols

<div class="row">
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
	<div class="c1-12 cols">.c1-12 .cols</div>
</div>

CSS

						.container {
							propiedad: valor;
						}

HTML

<section>

Doce cols

Three cols to the left

Five cols to the right

3 Cols

1 Cols

Columnas para pantallas chicas .md4-12

4 Cols md(medium)

2 columnas en pantallas chicas y 4 en tablet .md6-12

6 Cols md(medium)

3 columnas en escritorio y 2 en tablet .tablet6-12

4 Cols

Columnas para mobile .mobile

4 Cols mobile

Columnas para tablet .tablet

4 Cols tablet

Botones

<button class="button">

Bodoke CSS