Grid

Grid System

These is the basic vocabulary that one has to understand to use our grid system

Breakpoint size shortname

shortname	value
s	0px
m	704px
l	992px
xl	1280px
xxl	1472px
xxxl	1760px

Column Sizes within the 12 column grid

We use a 12 column grid with the following column sizes. The shortnames (numbers) represent a portion of the row width. So we can combine differnt columns until we reach the full width of the viewport (i.e. 2 + 2 + 8 = 12)

1	2	3	4	5	6	7	8	9	10	11	12
8.33%	16.67%	25%	33.33%	41.67%	50%	58.33%	66.67%	75%	83.33%	91.67%	100%

Columns

To configure a column, you need to combine the breakpoint shortname with the column size number that you expect in case the viewport has the size of the breakpoint. To specify different column sizes for different breakpoint sizes, just specify multiple combinations with the same column definiton.

(breakpoint)-(column size)	description
s-1	breakpoint size s what is minimum 0px and column size 1 what means 8.33% of 100% or 1 of 12 columns.
m-5	breakpoint size m what is minimum 704px and column size 5 what means 41.67% of 100% or 5 of 12 columns.
none	no breakpoint size and no column size, the column is using the rest of the available width

<div class="nxt-grid">
  <div class="nxt-row">
    <div class="nxt-col s-1">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-2">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-3">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-4">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-5">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-6">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-7">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-8">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-9">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-10">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-11">
      <div class="box"></div>
    </div>
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col">
      <div class="box"></div>
    </div>
  </div>
</div>

Responsive

<div class="grid">
  <div class="nxt-row">
    <div class="nxt-col s-6 m-4 offset-m-2 l-2 offset-l-4">
      <div class="box"></div>
    </div>
    <div class="nxt-col s-6 m-4 l-2">
      <div class="box"></div>
    </div>
  </div>
</div>

Offsets

<div class="nxt-grid">
  <div class="nxt-row">
    <div class="nxt-col s-1 offset-s-11">
      <div class="box"></div>
    </div>
  </div>

  <div class="nxt-row">
    <div class="nxt-col s-2 offset-s-10">
      <div class="box"></div>
    </div>
  </div>

  <div class="nxt-row">
    <div class="nxt-col s-3 offset-s-9">
      <div class="box"></div>
    </div>
  </div>

  <div class="nxt-row">
    <div class="nxt-col s-4 offset-s-8">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-5 offset-s-7">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-6 offset-s-6">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-7 offset-s-5">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-8 offset-s-4">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-9 offset-s-3">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-10 offset-s-2">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-11 offset-s-1">
      <div class="box"></div>
    </div>
  </div>
  <div class="nxt-row">
    <div class="nxt-col s-12">
      <div class="box"></div>
    </div>
  </div>
</div>