Descargar Github
Español

Sistema de Cuadrícula

Unkuna usa un sistema flexible de cuadrícula que divide el ancho de la pantalla en 12 espacios, estos espacios se combinan para formar los anchos de las columnas.

La imagen muestra todas las combinaciones posibles para un ancho de columna.

Sistema de columnas
Anchos de columna.

Uso

Copias el snippet HTML y ten en cuenta:

  1. El elemento con la clase nkn-row es el contenedor de la(s) columna(s).
  2. Agregar dentro del contenedor (nkn-row) las columnas que se necesiten, combinando la clase nkn-col- con el prefijo del tamaño de pantalla y el ancho de la columna (explicado en la tabla).
    Breakpoints Ancho de la pantalla Prefijo de la columna Ancho de columna
    Pequeño menores igual 767px nkn-col-s 1 al 12
    Mediano 768px hasta 991px nkn-col-m 1 al 12
    Largo 992px hasta 1199px nkn-col-l 1 al 12
    Extra Largo desde 1200px a más nkn-col-xl 1 al 12
  3. Construye una columna de la siguiente manera:
    nkn-col-s6
    Donde:
    col: Columna
    s: Tamaño de la pantalla
    6: Número de espacios para formar dos columna

Ejemplo

Para crear dos columnas en una pantalla pequeña (menor a 768px) usar: nkn-col-s6.

Snippet HTML

Cuadrícula con relleno

Este sistema cuenta con un relleno de 0.5rem, en todos los lados de la columna.

Uso

Copias el snippet HTML y ten en cuenta:

  1. El elemento con la clase nkn-row-padding es la fila que contendrá columnas con relleno.
  2. Agregar dentro de la fila las columnas que se necesiten.

Ejemplo

Snippet HTML

Offset

Permite desplazar la columna a la izquierda dentro del contenedor nkn-row o nkn-row-padding.

Uso

Copias el snippet HTML y ten en cuenta:

  1. El elemento con la clase nkn-row es el contenedor de la(s) columna(s) desplazadas.
  2. Defines el numero de columnas; para desplazar una columna usas la clase nkn-offset- combinado con el prefijo del tamaño de pantalla y el ancho de la columna (explicado en la tabla).
    Breakpoints Ancho de pantalla Prefijo del offset Ancho de columna
    Pequeño menores igual 767px nkn-offset-s 1 al 12
    Mediano 768px hasta 991px nkn-offset-m 1 al 12
    Largo 992px hasta 1199px nkn-offset-l 1 al 12
    Extra Largo desde 1200px a más nkn-offset-xl 1 al 12
  3. Construye el desplazamiento de la columna asi:
    nkn-col-s6 nkn-offset-s3
    Donde:
    nkn-col-s6: columna
    offset: desplazamiento
    s: Tamaño de la pantalla
    3: Número de espacios a desplazar

    Resultado

    offset
    nkn-col-s6

Ejemplo

Desplazar 3 espacios una columna

Snippet HTML

Más ejemplos

Ejemplo 1

Para crear una columna en pantalla pequeña, dos columnas en pantalla mediana en adelante usar:

nkn-col-s12 nkn-col-m6

Ejemplo 2

Para crear una columna en pantalla pequeña, 2 columnas en pantalla mediana, tres columnas en pantalla grande y 4 columnas en pantalla extra grande usar la clase:

nkn-col-s12 nkn-col-m6 nkn-col-l4 nkn-col-xl3

Ejemplo 3

Para centrar 2 columnas en pantallas medianas en adelante desplazar 1 espacio en la primera columna y desplazar 2 espacios en la segunda columna usar:

nkn-col-m4 nkn-offset-m1