Download Github
English

Grid System

Unkuna uses a flexible grid system that divides the width of the screen into 12 spaces, these spaces combine to form the widths of the columns.

The image shows all possible combinations for a column width.

Sistema de columnas
Column widths.

Use

Copy the HTML snippet and keep in mind:

  1. The element with class nkn-row is the container for the column (s).
  2. Add inside the container (nkn-row) the columns that are needed, combining the class nkn-col- with the prefix of the screen size and the width of the column (explained in the table)..
    Breakpoints Screen width Column prefix Column width
    Small Less than 767px nkn-col-s 1 al 12
    Medium 768px to 991px nkn-col-m 1 al 12
    Large 992px to 1199px nkn-col-l 1 al 12
    Extra Large More than 1200px nkn-col-xl 1 al 12
  3. Build a column as follows:
    nkn-col-s6
    Where:
    col: Column
    s: Screen size
    6: Number of spaces to form two columns

Example

To create two columns on a small screen (less than 768px) use: nkn-col-s6.

HTML Snippet

Filled grid

This system has a 0.5rem fill on all sides of the column.

Use

Copy the HTML snippet and keep in mind:

  1. The element with the class nkn-row-padding is the row that will contain padded columns.
  2. Add the necessary columns to the row.

Example

HTML Snippet

Offset

Allows you to shift the column to the left within the nkn-row or nkn-row-paddingcontainer.

Use

Copy the HTML snippet and keep in mind:

  1. The element with class nkn-row is the container for the offset column (s).
  2. You define the number of columns; to offset a column you use the class nkn-offset- combined with the prefix of the screen size and the width of the column (explained in the table).
    Breakpoints Screen width Offset prefix Column width
    Small Less than 767px nkn-offset-s 1 al 12
    Medium 768px to 991px nkn-offset-m 1 al 12
    Large 992px to 1199px nkn-offset-l 1 al 12
    Extra Large Greater than 1200px nkn-offset-xl 1 al 12
  3. Build the column offset like this:
    nkn-col-s6 nkn-offset-s3
    Where:
    nkn-col-s6:
    offset: column: offset
    s: Screen size
    3: Number of spaces to move

    Result

    offset
    nkn-col-s6

Example

Shift column three spaces

HTML Snippet

More examples

Example 1

To create a column on a small screen, two columns on a medium screen onwards use:

nkn-col-s12 nkn-col-m6

Example 2

To create a small screen column, 2 medium screen columns, three large screen columns and 4 extra large screen columns use the class:

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

Example 3

To center 2 columns on medium screens onwards, move 1 space in the first column and move 2 spaces in the second column use:

nkn-col-m4 nkn-offset-m1