Framework CSS para la creación de layouts responsivos con Grid y Flexbox. Inspirado en Tailwind CSS.

Demo en v-grid

Debido a que la mayoría de las propiedades para crear layouts en CSS serán aplicadas como una sola clase para muchos elementos HTML, se ahorrarán muchas líneas de código CSS.

Aún así, para una experiencia de desarrollo ágil, v-grid genera cientos de clases para la construcción de layouts, en donde al finalizar un proyecto notará que la mayoría no serán usadas.

Por ello se recomienda usar v-grid junto a otra librería llamada PurgeCSS, la cual eliminará todas las clases no usadas en la versión de producción del proyecto.

Nota: Es por ello que hay que tener en cuenta que los elementos HTML generados dinámicamente es mejor que no se le agreguen clases de v-grid

Dando como resultado que la versión de producción de v-grid no pese más de 4KB en la mayoría de los proyectos.

Usando la metodología mobile first, cada clase en v-grid se puede aplicar condicionalmente en diferentes puntos de interrupción, lo que hace fácil cambiar el layout para distintos tamaños de pantallas sin salir del HTML.

Hay 4 puntos de interrupción

Para que una clase solo aplique sus estilos hasta cierto punto de interrupción solo se agrega el prefijo antes de la clase seguido del carácter ":".

Por ejemplo, el siguiente div tendrá ancho completo en móviles, medirá la mitad en tablets, y una tercera parte a partir de laptops.

<div class="w-full t:w-1/2 l:w-1/3"></div>

Clases para crear layouts intrínsecamente responsive con Grid o Flexbox (da diferentes resultados cada uno).

$min-responsive-size es una variable cuyo valor indica el tamaño mínimo que tendrán los elementos afectados por alguna de las clases reponsives

• responsive-grid:
  

display: grid;
grid-template-columns: repeat(
  auto-fit,
  minmax(min($min-responsive-size, 100%), 1fr)
);

• responsive-flex:
  

display: flex;
flex-wrap: wrap;
& > * {
  flex: 1 1 $min-responsive-size;
}

• responsive-flex:
  

display: flex;
flex-wrap: wrap;
justify-content: center;

& > * {
  flex: 0 1 $min-responsive-size;
}

• v-grid:
  

  display: grid;

• v-inline-grid:
  

  display: inline-grid;

• v-flex:
  

  display: flex;

• v-inline-flex:
  

  display: inline-flex;

• v-initial:
  

  display: inline-initial;

Siendo n un numero del 0 al 20 representando cada unidad 1rem:

• gap-n:
  css gap: nrem

  Ejemplo:

• gap-1:
  

  gap: 1rem;

También se puede usar mediadas intermedias para valores n,5:

• gap-1,5:
  

  gap: 1.5rem;

Controla el espacio entre los hijos del elemento al que se le aplique la clase.

Si bien estas clases se pueden usar para cualquier tipo de elementos, un bueno uso es para dar espaciados a hijos de elementos flex. Actualmente también se puede usar la propiedad gap para dar espaciado en flex, pero aún no es totalmente soportada por todos los navegador. Por lo que esta puede ser una buena solución en estos casos.

Funciona de manera horizontal

• col-space-n

.col-space-n > * + * {
    --reverse: 0; 
    margin-right: calc(n * var(--reverse));
    margin-left: calc(n * calc(1 - var(--reverse)));
}

O vertical

• row-space-n

.row-space-n > * + * {
    --reverse: 0; 
    margin-bottom: calc(n * var(--reverse));
    margin-top: calc(n * calc(1 - var(--reverse)));
}

En el caso de que se quiera colocar los valores por defecto

• row-space-initial

.row-space-initial > * + * {
    --y-initial: initial;
    --y-reverse-initial: 0;
    margin-top: var(--y-initial);
    margin-bottom: var(--y-reverse-initial);
}

• col-space-initial

.col-space-initial > * + * {
    --x-initial: initial;
    --x-reverse-initial: 0;
    margin-left: var(--x-initial);
    margin-right: var(--x-reverse-initial);
}

O el valor auto

Asemeja el resultado de space-between de elementos flex o grid sin ser uno

• row-space-auto

.row-space-auto > * + * {
    --y-auto: auto;
    --y-reverse-auto: 0;
    margin-top: var(--y-auto);
    margin-bottom: var(--y-reverse-auto);
}

• col-space-auto

.col-space-auto > * + * {
    --x-auto: auto;
    --x-reverse-auto: 0;
    margin-left: var(--x-auto);
    margin-right: var(--x-reverse-auto);
}

• space-reverse

Si los elementos hijos están en orden inverso (por haber usado clases cómo flex-row-reverse o flex-col-reverese en el elemento padre), use las utilidades space-reverse para asegurarse de que el espacio se agregue al lado correcto del elemento de los elementos.

.space-reverse > * + * {
    --reverse: 1;
    --x-initial: 0;
    --y-initial: 0;
    --x-reverse-initial: initial;
    --y-reverse-initial: initial;
    --x-auto: 0;
    --y-auto: 0;
    --x-reverse-auto: auto;
    --y-reverse-auto: auto;
}

Siendo n un numero del 1 al 12 o none

• grid-cols-n:
  

  grid-template-columns: repeat(n, minmax(0, 1fr));

• grid-rows-n:
  

  grid-template-rows: repeat(n, minmax(0, 1fr));

Siendo n un numero del 1 al 12

• col-span-n:
  

  grid-column: span n / span n;

• row-span-n:
  

  grid-row: span n / span n;

o auto:

• col-auto:
  

  grid-column: auto;

• row-auto:
  

  grid-row: auto;

Siendo n un numero del 1 al 13

• col-start-n:
  

  grid-column-start: n;

• row-start-n:
  

  grid-column-start: n;

• col-end-n:
  

  grid-column-end: n;

• row-end-n:
  

  grid-column-end: n;

o auto:

• col-start-auto:
  

  grid-column-start: auto;

• row-start-auto:
  

  grid-row-start: auto;

• col-end-auto:
  

  grid-column-end: auto;

• row-end-auto:
  

  grid-row-end: auto;

o full:

• col-full:
  

  grid-column: 1 / -1;

• grid-flow-row:
  

  grid-auto-flow: row;

• grid-flow-col:
  

  grid-auto-flow: column;

• grid-flow-row-dense:
  

  grid-auto-flow: row dense;

• grid-flow-row-dense:
  

  grid-auto-flow: column dense;

• flex-row:
  

  flex-direction: row;

• flex-row-reverse:
  

  flex-direction: row-reverse;

• flex-col:
  

  flex-direction: col;

• flex-col-reverse:
  

  flex-direction: col-reverse;

• flex-wrap:
  

  flex-wrap: wrap;

• flex-wrap-reverse:
  

  flex-wrap: wrap-reverse;

• flex-nowrap:
  

  flex-wrap: nowrap;

• flex-1:
  

  flex: 1 1 0%;

• flex-auto:
  

  flex: 1 1 auto;

• flex-initial:
  

  flex: 0 1 initial;

• flex-none:
  

  flex: none;

• flex-grow:
  

  flex-grow: 1;

• flex-grow-0:
  

  flex-grow: 0;

• flex-shrink:
  

  flex-shrink: 1;

• flex-shrink-0:
  

  flex-shrink: 0;

Siendo n un numero del 1 al 12

• order-n:
  

  order: n;

O valores específicos:

• order-first:
  

  order: -9999;

• order-last:
  

  order: 9999;

• order-none:
  

  order: none;

Alinea texto. Siendo align algunos de estos valores: (left | right | center)

• text-align:

  text-align: align;

Centra un elemento de bloque usando margin-left: auto y margin-right: auto

• block-center:

  margin-left: auto;
  margin-right: auto;

Siendo align algunos de estos valores: (start | flex-start | end | flex-end | center | stretch)

j-self-flex-start y j-self-flex-end no existen debido a que las propiedades justify-self: flex-start y justify-self: flex-end no existen para un contenedor padre flex.

• j-items-align:
  

  justify-items: align;

• a-items-align:
  

  align-items: align;

• j-self-align:
  

  justify-self: align;

• a-self-align:
  

  align-self: align;

para align-items también está el valor baseline:

• a-items-align:
  

  align-items: baseline;

Siendo align algunos de estos valores: (start | flex-start | end | flex-end | center | stretch | space-around | space-between | space-evenly)

• j-content-align:
  

  justify-content: align;

• a-content-align:
  

  align-content: align;

Usados idóneamente para los flex-items

• Breakpoints

$breakpoints: (
  '': 0,
  m: 420px,
  t: 768px,
  l: 1024px,
  d: 1280px,
) !default;

• Variables

$max-cols: 12;

$min-responsive-size: 250px;