Cuadrícula

Cajas flexibles

Está armado con cajas flexibles, pero tiene clases para utilizarlo parecido a la estructura basada en bloques de filas y celdas.

Filas

Se basa en fracciones, de un entero, un medio hasta un decimo, es la parte del grid que se parece más a estar armando el sitio en bloques.

Una fila puede contener solo un entero en cualquier combinación, si sobrepasas el entero, el contenido salta a la siguiente fila.

1

1/2

1/3

1/4

1/5

1/6

1/7

1/8

1/9

1/10


<div class="row">
  <div class="flex-1 bg-primary">1</div>
</div>

<div class="row">
  <div class="flex-1_2 bg-primary">1/2</div>
  <div class="flex-1_2 bg-primary">1/2</div>
</div>

<div class="row">
  <div class="flex-1_3 bg-primary">1/3</div>
  <div class="flex-1_3 bg-primary">1/3</div>
  <div class="flex-1_3 bg-primary">1/3 ...

Otro ejemplo

1/10

9/10

1/9

8/9

1/8

7/8

1/7

6/7

1/6

5/6

1/5

4/5

1/4

3/4

1/3

2/3

1/2

1


<div class="row">
  <div class="flex-1_10 bg-primary">1/10</div>
  <div class="flex-9_10 bg-primary">9/10</div>
</div>

<div class="row">
  <div class="flex-1_9 bg-primary">1/9</div>
  <div class="flex-8_9 bg-primary">8/9</div>
</div>

<div class="row">
  <div class="flex-1_8 bg-primary">1/8</div>
  <div class="flex-7_8 bg-primary">7/8</div>
</div>

<div class="row">
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-6_7 bg-primary">6/7...

Un ejemplo más con todos los septimos.

1/7

6/7

2/7

5/7

3/7

4/7


<div class="row">

  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-6_7 bg-primary">6/7</div>

  <div class="flex-2_7 bg-primary">2/7</div>
  <div class="flex-5_7 bg-primary">5/7</div>

  <div class="flex-3_7 bg-primary">3/7</div>
  <div class="flex-4_7 bg-primary">4/7</div>

</div>

Adaptable a dispositivos

Tamaños de pantalla

Las clases de las cuadrículas se pueden especificar para cada tamaño de pantalla.

Los puntos de ruptura del ancho de pantalla están definidos dentro del archivo _vars.sass para editarse fácilmente, los valores por defecto se especifícan en la tabla debajo.

El margen entre los elementos también varía dependiendo de la pantalla en la que se encuentre, por defecto es 2vw pero se puede editar desde el mismo archivo de variables, _vars.sass.

Si sólo se especifica un tamaño para los bloques debe utilizarse la clase 'Natural' con el prefijo .flex- y el bloque tomará el mismo tamaño para todos los dispositivos.

Natural / Celular	20rem	.flex-
Celular acostado	30rem	.flex-phonel-
Tableta	48rem	.flex-tablet-
Portátil	64rem	.flex-laptop-
Monitor	75rem	.flex-MDPI-
Monitorsote	90rem	.flex-HiDPI-
Televisión / Monitorsototote XD	120rem	.flex-HD-

Alineación horizontal

Al inicio

Se agrega la clase .h-start para alinear los elementos al inicio de la fila.

1/3

1/7


<div class="row h-start">
  <div class="flex-1_3 bg-primary">1/3</div>
  <div class="flex-1_3 bg-primary">1/3</div>
</div>

<div class="row h-start">
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
</div>

Al final

Se agrega la clase .h-end para alinear los elementos al final de la fila.

1/3

1/7


<div class="row h-end">
  <div class="flex-1_3 bg-primary">1/3</div>
  <div class="flex-1_3 bg-primary">1/3</div>
</div>

<div class="row h-end">
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
</div>

Al centro

Se agrega la clase .h-center para alinear los elementos al centro de la fila.

1/3

1/7


<div class="row h-center">
  <div class="flex-1_3 bg-primary">1/3</div>
  <div class="flex-1_3 bg-primary">1/3</div>
</div>

<div class="row h-center">
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
</div>

Espacio alrededor

Se agrega la clase .h-around para que se distribuya el espacio restante alrededor de los elementos de la fila.

1/3

1/7


<div class="row h-around">
  <div class="flex-1_3 bg-primary">1/3</div>
  <div class="flex-1_3 bg-primary">1/3</div>
</div>

<div class="row h-around">
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
</div>

Espacio entre elementos

Se agrega la clase .h-between para que se distribuya el espacio restante entre los elementos de la fila.

1/3

1/7


<div class="row h-between">
  <div class="flex-1_3 bg-primary">1/3</div>
  <div class="flex-1_3 bg-primary">1/3</div>
</div>

<div class="row h-between">
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
  <div class="flex-1_7 bg-primary">1/7</div>
</div>

No se ni me importa

Se agrega la clase .h-stretch a la fila y los elementos que contengan se repartirán equitativamente el espacio. Los elementos dentro no necesitan una clase para definir el ancho, lo malo es que se comportarán exactamente igual en cualquier resolucion, mobile, laptopb, tablets, en todos tendrá la misma disposición.


<div class="row h-stretch">
  <div class="bg-primary"> </div>
  <div class="bg-primary"> </div>
</div>

<div class="row h-stretch">
  <div class="bg-primary"> </div>
  <div class="bg-primary"> </div>
  <div class="bg-primary"> </div>
</div>

Alineación vertical

Las clases de alineación vertical únicamente funcionan, o se ve su uso, cuando están dentro de un elemento con un alto mayor que su contenido, ó cuando se tienen bloques de distinto alto.

Alineado arriba

Por defecto todas las cosas siempre se alinean arriba, al comenzar un elemento, pero aún así, hay extrañas veces en que se necesita especificar que así sea. Para alinear un elemento al inicio se debe agregar la clase v-start.


<div class="row v-start">
  <div class="bg-primary flex" style="height: 100px;"> </div>
  <div class="bg-primary flex" style="height: 200px;"> </div>
</div>

Alinado abajo

Se agrega la clase .v-end para alinear un elemnto hasta abajo de su contenedor.


<div class="row v-end">
  <div class="bg-primary flex" style="height: 100px;"> </div>
  <div class="bg-primary flex" style="height: 200px;"> </div>
</div>

Alineado al centro vertical

La clase más utilizada para alineación vertial. Se agrega .v-center, para alinear un elemento a la mitad de su contenedor.


<div class="row v-center">
  <div class="bg-primary flex" style="height: 100px;"> </div>
  <div class="bg-primary flex" style="height: 200px;"> </div>
</div>

Alinea el texto

Con la clase .v-baseline se alinea todo el texto de distintos contenedores para que se lean de corrido.

baseline


<div class="row v-baseline">
  <div class="bg-primary flex" style="height: 100px;">
    <h3> baseline <h3>
  </div>
  <div class="bg-primary flex" style="height: 200px;">
    <p> baseline <p>
  </div>
  <div class="bg-primary flex" style="height: 50px;">
    <small> baseline <small>
  </div>
</div>

Todo el alto!

Agregando la clase v-stretch, el contenido toma todo el alto de su contenedor.


<div class="row v-stretch" style="height: 100px;">
  <div class="bg-primary flex"> </div>
</div>

PinterGrid

Un grid como el de Pinterest

Éste grid se formatea automáticamente, una columna en mobiles, dos en mobiles en landscape, tres en tablets, cuatro en laptops y 5 columnas en monitores.

Para usarlo únicamente se necesita poner el contenedor .pin-container.

Pin Container. Éste contenido es el mismo parrafo, pero el estilo del contenedor hace que solo se separe en bloques, es interesante como para secciones de noticias como periodicos digitales, pero es un poco complicado porque no se sabe el orden en que se acomodaran cuando son bloques, por ejemplo los grids de las imagenes, no se puede escribir en qué orden deban aparecer, se acomodan dependiendo del tamaño que tengan para acomodarse.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia velit non orci ultricies venenatis. Sed euismod id tortor quis semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur dignissim nibh vel sagittis bibendum. Duis a eros et nulla ultrices aliquet a dignissim mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nibh nulla, congue sed urna eu, blandit aliquet orci. Maecenas varius sapien eget imperdiet ornare. Mauris lectus odio, rutrum a mollis eget, blandit vel nunc. Vivamus ut urna arcu. Pellentesque eleifend felis ac purus tincidunt rutrum. Suspendisse in nisi dui.


<div class="pin-container">
  <p>
    Pin Container. Éste contenido es el mismo parrafo, pero el estilo del contenedor hace que solo se separe en bloques, es interesante como para secciones de noticias como periodicos digitales, pero es un poco complicado porque no se sabe el orden en que se acomodaran cuando son bloques, por ejemplo los grids de las imagenes, no se puede escribir en qué orden deban aparecer, se acomodan dependiendo del tamaño que tengan para acomodarse.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia velit non orci ultricies venenatis. Sed euismod id tortor quis semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur dignissim nibh vel sagittis bibendum. Duis a eros et nulla ultrices aliquet a dignissim mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nibh nulla, congue sed urna eu, blandit aliquet orci. Maecenas varius sapien eget imperdiet ornare. Mauris lectus odio, rutrum a mollis eget, blandit vel nunc. Vivamus ut urna arcu. Pellentesque eleifend felis ac purus tincidunt rutrum. Suspendisse in nisi dui.
  </p>
</div>

PinterBlock

Si el contenido del PinterGrid son pequeños bloques, como por ejemplo una galería de imágenes, se puede utilizar la clase .pin para agregarle margen a cada elemento y .pin-info para agregar texto sobre el bloque del pin.

1

2

3

4

5

6

7

8

9


<div class="pin-container">

  <div class="pin">
    <img src="img/gallery/1.jpeg" alt="1" />
    <div class="pin-info">1</div>
  </div>

  <div class="pin">
    <img src="img/gallery/2.jpeg" alt="2" />
    <div class="pin-info">2</div>
  </div>

  <div class="pin">
    <img src="img/gallery/3.jpeg" alt="3" />
    <div class="pin-info">3...