Getting started

Start by adding one of the simplest possible tilex using the following code:

<div class="tilex-tile tile tilex-shared" role="button">
  <div class="tilex-small">
    click me
  </div>
  <div class="tilex-large">
    <div class="tilex-large-content">
      <div class="tilex-center">
        blah blah blah
      </div>
    </div>
  </div>
  <button class="tilex-close-button">
    <span class="tilex-close-button-text">×</span>
  </button>
</div>

And then required styles:

/* height and width of the tile must be set */
.tile{
  width: 150px;
  height: 150px;
}
/* Any class starting with tilex-shared would be added to the expanded tile */
.tilex-shared{
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

And use the following code to initialise Tilex:

$(document).ready(function(){
    initTilex(400); //animation takes 400ms
  });

Result

Adding another style

Doing this just requires creating two different classes tilex-shared-type1 and tilex-shared-type2 instead of simply using tilex-shared for both (which we could if we need only one styling).

<div class="tilex-tile tile tilex-shared-type1" role="button">
  ...
</div>

<div class="tilex-tile tile tilex-shared-type2" role="button">
  ...
</div>

We set different styles for the two classes we created:

/* height and width of the tile must be set */
.tile{...}
.tile:hover{...}
.tile:active{...}

/* Any class starting with tilex-shared would be added to the expanded tile */
.tilex-shared-type1{
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
/* Any class starting with tilex-shared would be added to the expanded tile */
.tilex-shared-type2{
  background: linear-gradient(0deg, #a044ff, #6a3093);
  color: #fff;
  border-radius: 75px;
}

Don't forget to initialise Tilex:

$(document).ready(function(){
    initTilex(400); //animation takes 400ms
  });

Result