Structural Elements

Structural elements are used to arrange elements in relation to each other.

Check out this samples.

Table

The chayns® API provides a responsive table system that is easy to use. The sourrounding div element needs the class "table". Rows can be added with the class "table__row" and cells with "table__cell"'.

<div class="table">
  <div class="table__row">
    <div class="table__cell">1-1</div>
    <div class="table__cell">1-2</div>
  </div>
  <div class="table__row">
    <div class="table__cell">2-1</div>
    <div class="table__cell">2-2</div>
  </div>
</div>

Basic Grid

The chayns® API provides you with a responsive grid system that is easy to use. The grid design is similar to a table. You can define how many columns should exist per device. The surrounding div element needs the class "grid" and the class "grid__item" should be assigned to the inner-divs.

<div class="grid">
  <div class="grid__item">Sample 1</div>
  <div class="grid__item">Sample 2</div>
</div>

Desktop Grid

The grid system works with proportions. You can assign multiple devices to one item. ".col-1-2-desktop" defines, that - on a desktop - the item should take one half of the column's width.

<div class="grid">
  <div class="grid__item col-1-2-desktop">Sample 1</div>
  <div class="grid__item col-1-2-desktop">Sample 2</div>
  <div class="grid__item col-1-2-desktop">Sample 3</div>
  <div class="grid__item col-1-2-desktop">Sample 4</div>
</div>

Mobile Grid

The grid system works with proportions. You can assign multiple devices to one item. The class ".col-1-1-mobile" specifies that the item should occupy the full width on a mobile device.

<div class="grid">
  <div class="grid__item col-1-1-mobile">Sample 1</div>
  <div class="grid__item col-1-1-mobile">Sample 2</div>
</div>